Polish-toasts

src/cljs/athens/self_hosted/presence/views.cljs

@@ -24,6 +24,7 @@
   [host-address]
   (.. js/navigator -clipboard (writeText host-address))
   (util/toast (clj->js {:status "info"
+                        :position "top-right"
                         :title "Host address copied to clipboard"})))
 
 
@@ -38,6 +39,7 @@
       ;; TODO: if we support navigating to a block, it should be added here.
       (rf/dispatch [:navigate :page {:id page-uid}])
       (util/toast (clj->js {:title "User is not on any page"
+                            :position "top-right"
                             :status "warning"})))))
 
 

src/js/components/PresenceDetails/PresenceDetails.tsx

@@ -54,7 +54,7 @@ const ConnectionButton = React.forwardRef((props: ConnectionButtonProps, ref) =>
 });
 
 
-export const _PresenceDetails = (props: PresenceDetailsProps) => {
+export const PresenceDetails = withErrorBoundary((props: PresenceDetailsProps) => {
   const {
     hostAddress,
     currentUser,
@@ -171,6 +171,4 @@ export const _PresenceDetails = (props: PresenceDetailsProps) => {
       />
     </>
   );
-};
-
-export const PresenceDetails = withErrorBoundary(_PresenceDetails, { fallback: <></> });
+}, { fallback: <></> });

src/js/theme/theme.js

@@ -28,47 +28,6 @@ const radii = {
   full: '9999px',
 }
 
-const colors = {
-  // light theme
-  linkLight: "#0071DB",
-  linkContrastLight: '#fff',
-  highlightLight: "#F9A132",
-  textHighlightLight: "#ffdb8a",
-  highlightContrastLight: "#000",
-  warningLight: "#D20000",
-
-  backgroundPlus2Light: "#fff",
-  backgroundPlus1Light: "#fbfbfb",
-  backgroundColorLight: "#F6F6F6",
-  backgroundMinus1Light: "#FAF8F6",
-  backgroundMinus2Light: "#EFEDEB",
-  backgroundVibrancyLight: "#ffffff99",
-
-  errorLight: "#fd5243",
-  shadowLight: "#000",
-
-  // dark theme
-  backgroundMinu2Dark: "#151515",
-  backgroundMinus1Dark: "#111",
-  backgroundColorDark: "#1A1A1A",
-  backgroundPlus1Dark: "#222",
-  backgroundPlus2Dark: "#333",
-  backgroundVibrancyDark: "#222222aa",
-
-  linkDark: "#498eda",
-  linkContrastDark: '#fff',
-  highlightDark: "#FBBE63",
-  textHighlightDark: "#FBBE63",
-  highlightContrastDark: "#000",
-  warningDark: "#DE3C21",
-
-  errorDark: "#fd5243",
-  shadowDark: "#000",
-
-  // interactives
-
-}
-
 const semanticTokens = {
   shadows: {
     focus: {
@@ -105,8 +64,8 @@ const semanticTokens = {
   },
   colors: {
     brand: {
-      default: 'linkLight',
-      _dark: 'linkDark'
+      default: '#0071DB',
+      _dark: '#498eda'
     },
     // separator colors
     "separator.border": {
@@ -119,24 +78,24 @@ const semanticTokens = {
     },
     // background colors
     "background.floor": {
-      default: 'backgroundColorLight',
-      _dark: 'backgroundColorDark'
+      default: '#F6F6F6',
+      _dark: '#1A1A1A'
     },
     "background.basement": {
-      default: 'backgroundMinus1Light',
-      _dark: 'backgroundMinus1Dark'
+      default: '#FAF8F6',
+      _dark: '#111'
     },
     "background.upper": {
-      default: 'backgroundPlus1Light',
-      _dark: 'backgroundPlus1Dark'
+      default: '#fbfbfb',
+      _dark: '#222'
     },
     "background.attic": {
-      default: 'backgroundPlus2Light',
-      _dark: 'backgroundPlus2Dark'
+      default: '#fff',
+      _dark: '#333'
     },
     "background.vibrancy": {
-      default: 'backgroundVibrancyLight',
-      _dark: 'backgroundVibrancyDark'
+      default: '#ffffff99',
+      _dark: '#222222aa'
     },
     // foreground colors
     "foreground.primary": {
@@ -165,42 +124,42 @@ const semanticTokens = {
       _dark: 'hsla(0, 0%, 100%, 0.16)',
     },
     // status colors
-    danger: {
-      default: 'warningLight',
-      _dark: 'warningDark'
+    error: {
+      default: '#D20000',
+      _dark: '#DE3C21'
     },
     info: {
-      default: 'linkLight',
-      _dark: 'linkDark'
+      default: '#0071DB',
+      _dark: '#498eda'
     },
     warning: {
-      default: 'warningLight',
-      _dark: 'warningDark'
+      default: '#D20000',
+      _dark: '#DE3C21'
     },
     success: {
-      default: 'confirmationLight',
-      _dark: 'confirmationDark'
+      default: '#4CBB17',
+      _dark: '#498eda'
     },
     // other colors
     textHighlight: {
-      default: 'textHighlightLight',
-      _dark: 'textHighlightDark'
+      default: '#ffdb8a',
+      _dark: '#FBBE63'
     },
     highlight: {
-      default: 'highlightLight',
-      _dark: 'highlightDark'
+      default: '#F9A132',
+      _dark: '#FBBE63'
     },
     highlightContrast: {
-      default: 'highlightContrastLight',
-      _dark: 'highlightContrastDark'
+      default: '#000',
+      _dark: '#000'
     },
     link: {
-      default: 'linkLight',
-      _dark: 'linkDark'
+      default: '#0071DB',
+      _dark: '#498eda'
     },
     linkContrast: {
-      default: 'linkContrastLight',
-      _dark: 'linkContrastDark'
+      default: '#fff',
+      _dark: '#fff'
     },
     // block content colors
     "ref.foreground": {
@@ -237,28 +196,41 @@ const components = {
   Alert: {
     variants: {
       // variant used by toasts
-      solid: ({ colorScheme }) => ({
-        container: {
-          bg: 'background.vibrancy',
-          backdropFilter: "blur(20px)",
-          color: "foreground.primary",
-          _after: {
-            content: "''",
-            position: "absolute",
-            inset: 0,
-            borderRadius: "inherit",
-            background: colorScheme,
-            opacity: 0.1,
-            zIndex: -1,
+      solid: ({ theme, status }) => {
+
+        // Toasts don't recieve the current color mode
+        // as a prop, so we get both colors and use one or
+        // the other based on the CSS context
+        const toastColorDefault = theme.semanticTokens.colors[ status ].default;
+        const toastColorDark = theme.semanticTokens.colors[ status ].dark;
+
+        return ({
+          container: {
+            bg: 'background.vibrancy',
+            backdropFilter: "blur(20px)",
+            color: "foreground.primary",
+            "--toast-color": toastColorDefault,
+            ".is-theme-dark &": {
+              "--toast-color": toastColorDark,
+            },
+            _after: {
+              content: "''",
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              background: "var(--toast-color)",
+              opacity: 0.1,
+              zIndex: -1,
+            }
+          },
+          title: {
+            fontWeight: "normal"
+          },
+          icon: {
+            color: "var(--toast-color)",
           }
-        },
-        title: {
-          fontWeight: "normal"
-        },
-        icon: {
-          color: colorScheme || "info"
-        }
-      })
+        })
+      }
     }
   },
   Avatar: {
@@ -366,8 +338,8 @@ const components = {
       }
     },
     colorSchemes: {
-      danger: {
-        color: "danger"
+      error: {
+        color: "error"
       }
     }
   },
@@ -591,6 +563,9 @@ const styles = {
       lineHeight: '1.5',
       height: '100vh',
       fontFamily: 'default',
+    },
+    "#chakra-toast-manager-top-right, #chakra-toast-manager-top, #chakra-toast-manager-top-left": {
+      margin: "3rem 1rem"
     }
   }
 }
@@ -599,4 +574,4 @@ const sizes = {
   ...spacing
 }
 
-export const theme = extendTheme({ config, radii, fonts, colors, shadows, semanticTokens, spacing, sizes, components, styles });
+export const theme = extendTheme({ config, radii, fonts, shadows, semanticTokens, spacing, sizes, components, styles });