refactor: All of the screens are now supporting theme variables

Signed-off-by: Tom Lanser <[email protected]>

packages/toolbox-ui/src/ToolboxApp.tsx

@@ -1,4 +1,4 @@
-import type { ColorScheme, MantineThemeOverride } from '@mantine/core'
+import type { ColorScheme } from '@mantine/core'
 import type { RouterProviderProps } from 'react-router-dom'
 
 import { ColorSchemeProvider, MantineProvider } from '@mantine/core'
@@ -7,6 +7,7 @@ import { NotificationsProvider } from '@mantine/notifications'
 import React from 'react'
 import { RouterProvider } from 'react-router-dom'
 
+import { toolboxTheme } from './ToolboxTheme'
 import { GlobalErrorHandler } from './components/GlobalErrorHandler'
 import { useConfigUnsafe } from './contexts/ConfigProvider'
 import { PresentInviteModal } from './modals/PresentInviteModal'
@@ -15,30 +16,6 @@ interface ToolboxAppProps {
   router: RouterProviderProps['router']
 }
 
-const toolboxTheme = (colorScheme: ColorScheme): MantineThemeOverride => ({
-  colorScheme: colorScheme,
-  colors: {
-    neutral: ['#333333', '#4D4D4D', '#666666', '#808080', '#999999', '#B3B3B3', '#CCCCCC', '#E6E6E6'],
-    secondary: ['#F5F5F5', '#D3D3D3', '#B0B0B0', '#8E8E8E', '#6C6C6C', '#494949', '#272727', '#050505'],
-    background: ['#F5F5F4', '#E8E8E8', '#D3D3D3', '#BFBFBF', '#A8A8A8', '#939393', '#7D7D7D', '#666666'],
-    animoWhite: ['#F5F5F4', '#E8E8E8', '#D3D3D3', '#BFBFBF', '#A8A8A8', '#939393', '#7D7D7D', '#666666'],
-    animoCoral: ['#EA6767', '#FF8989', '#FFA5A5', '#FFBFBF', '#FFD5D5', '#FFEAEA', '#FFFFFF', '#FFC6C6'],
-    animoBlue: ['#557EBA', '#7B9BC9', '#A3B6D3', '#C7D3E8', '#EBF1FF', '#F4F6F9', '#F8F9FA', '#EDF0F4'],
-    animoBlack: ['#202223', '#3D3D3D', '#4F4F4F', '#616161', '#737373', '#858585', '#979797', '#A9A9A9'],
-    animoLightgrey: ['#E5E5E5', '#D3D3D3', '#BFBFBF', '#A8A8A8', '#939393', '#7D7D7D', '#666666', '#505050'],
-    animoDarkgrey: ['#3A3B3B', '#2F2F2F', '#3D3D3D', '#4D4D4D', '#5C5C5C', '#6B6B6B', '#7A7A7A', '#898989'],
-  },
-
-  defaultRadius: '0.25rem',
-
-  white: '#F5F5F4',
-  black: '#202223',
-
-  primaryColor: colorScheme === 'dark' ? 'animoWhite' : 'animoBlack',
-
-  fontFamily: 'Montserrat, sans-serif',
-})
-
 export const ToolboxApp = ({ router }: ToolboxAppProps) => {
   const { config, setColorScheme } = useConfigUnsafe()
 

packages/toolbox-ui/src/ToolboxTheme.ts

@@ -0,0 +1,117 @@
+import type { ColorScheme, MantineThemeOverride, Tuple } from '@mantine/core'
+
+type ColorShade = Tuple<string, 8>
+
+const animoColors = {
+  neutral: ['#E6E6E6', '#CCCCCC', '#B3B3B3', '#999999', '#808080', '#666666', '#4D4D4D', '#333333'] as ColorShade,
+  animoWhite: ['#666666', '#7D7D7D', '#939393', '#A8A8A8', '#BFBFBF', '#D3D3D3', '#E8E8E8', '#F5F5F4'] as ColorShade,
+  animoCoral: ['#FFC6C6', '#FFFFFF', '#FFEAEA', '#FFD5D5', '#FFBFBF', '#FFA5A5', '#FF8989', '#EA6767'] as ColorShade,
+  animoBlue: ['#EDF0F4', '#F8F9FA', '#F4F6F9', '#EBF1FF', '#C7D3E8', '#A3B6D3', '#7B9BC9', '#557EBA'] as ColorShade,
+  animoGreen: ['#E0F6E0', '#F5FFF5', '#EAFEEA', '#DFFEDF', '#BFEABF', '#9FD19F', '#7FB77F', '#5E9E6E'] as ColorShade,
+  animoYellow: ['#FEF8D5', '#FFFDF5', '#FEFCEA', '#FEF8D5', '#FDF1BF', '#FBE9A5', '#F7D97B', '#F2C94C'] as ColorShade,
+  animoOrange: ['#FEF8D5', '#FFFDF5', '#FEFCEA', '#FEF5D5', '#FDEABF', '#FCD19F', '#F7B77B', '#F2994A'] as ColorShade,
+  animoRed: ['#FFEAEA', '#FFF5F5', '#FFEAEA', '#FFD5D5', '#FFBFBF', '#FF9F9F', '#FF7B7B', '#EB5757'] as ColorShade,
+  animoBlack: ['#A9A9A9', '#979797', '#858585', '#737373', '#616161', '#4F4F4F', '#3D3D3D', '#202223'] as ColorShade,
+  animoLightgrey: [
+    '#505050',
+    '#666666',
+    '#7D7D7D',
+    '#939393',
+    '#A8A8A8',
+    '#BFBFBF',
+    '#D3D3D3',
+    '#E5E5E5',
+  ] as ColorShade,
+  animoDarkgrey: ['#898989', '#7A7A7A', '#6B6B6B', '#5C5C5C', '#4D4D4D', '#3D3D3D', '#2F2F2F', '#3A3B3B'] as ColorShade,
+}
+
+type AnimoVariantTheme = {
+  primaryOne: ColorShade
+  primaryTwo: ColorShade
+  secondaryOne: ColorShade
+  secondaryTwo: ColorShade
+  backgroundOne: ColorShade
+  backgroundTwo: ColorShade
+  grayscaleOne: ColorShade
+  grayscaleTwo: ColorShade
+  info: ColorShade
+  success: ColorShade
+  warning: ColorShade
+  error: ColorShade
+  danger: ColorShade
+  textOne: ColorShade
+  textTwo: ColorShade
+}
+
+const animoLightTheme: AnimoVariantTheme = {
+  primaryOne: animoColors.animoBlack,
+  primaryTwo: animoColors.animoBlack, // TODO: Add a second primary color
+  secondaryOne: animoColors.animoWhite,
+  secondaryTwo: animoColors.animoWhite, // TODO: Add a second secondary color
+
+  backgroundOne: animoColors.animoWhite,
+  backgroundTwo: animoColors.animoWhite, // TODO: Add a second background color
+  grayscaleOne: animoColors.animoLightgrey,
+  grayscaleTwo: animoColors.animoDarkgrey,
+
+  info: animoColors.animoBlue,
+  success: animoColors.animoGreen,
+  warning: animoColors.animoYellow,
+  error: animoColors.animoCoral,
+  danger: animoColors.animoRed,
+
+  textOne: animoColors.animoBlack,
+  textTwo: animoColors.animoWhite,
+}
+
+const animoDarkTheme: AnimoVariantTheme = {
+  primaryOne: animoColors.animoWhite,
+  primaryTwo: animoColors.animoWhite, // TODO: Add a second primary color
+  secondaryOne: animoColors.animoBlack,
+  secondaryTwo: animoColors.animoBlack, // TODO: Add a second secondary color
+
+  backgroundOne: animoColors.animoBlack,
+  backgroundTwo: animoColors.animoBlack, // TODO: Add a second background color
+
+  grayscaleOne: animoColors.animoLightgrey,
+  grayscaleTwo: animoColors.animoDarkgrey,
+
+  info: animoColors.animoBlue,
+  success: animoColors.animoGreen,
+  warning: animoColors.animoYellow,
+  error: animoColors.animoCoral,
+  danger: animoColors.animoRed,
+
+  textOne: animoColors.animoWhite,
+  textTwo: animoColors.animoBlack,
+}
+
+export const toolboxTheme = (colorScheme: ColorScheme): MantineThemeOverride => ({
+  colorScheme: colorScheme,
+  colors: colorScheme === 'dark' ? animoDarkTheme : animoLightTheme,
+
+  defaultRadius: '0.25rem',
+
+  white: '#F5F5F4',
+  black: '#202223',
+
+  primaryColor: 'primaryOne',
+
+  fontFamily: 'Montserrat, sans-serif',
+
+  components: {
+    Title: {
+      styles: (theme) => ({
+        root: {
+          color: theme.colors.textOne[7],
+        },
+      }),
+    },
+  },
+})
+
+declare module '@mantine/core' {
+  export interface MantineThemeColorsOverride {
+    colors: Record<keyof AnimoVariantTheme, Tuple<string, 10>>
+  }
+}

packages/toolbox-ui/src/components/GlobalErrorHandler.tsx

@@ -15,7 +15,7 @@ export const GlobalErrorHandler = ({ children }: GlobalErrorHandlerProps) => {
       if (!(reason instanceof AriesFrameworkError)) return
 
       showNotification({
-        color: 'red',
+        color: 'error',
         title: reason.name,
         message: reason.message,
       })

packages/toolbox-ui/src/components/Loading.tsx

@@ -1,29 +1,29 @@
-import { Center, createStyles, Flex, Loader, Text, useMantineColorScheme } from '@mantine/core'
+import { useTheme } from '@emotion/react'
+import { Center, createStyles, Flex, Loader, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
-const useStyles = createStyles({
+const useStyles = createStyles((theme) => ({
   spinnerCentering: {
     height: '100vh',
   },
-})
+  descriptionText: {
+    color: theme.colors.textOne[0],
+  },
+}))
 
 interface LoadingProps {
   description?: string
 }
 
 export const Loading = ({ description }: LoadingProps) => {
   const { classes } = useStyles()
-  const { colorScheme } = useMantineColorScheme()
+  const { colors } = useMantineTheme()
 
   return (
     <Center className={classes.spinnerCentering}>
       <Flex direction="column" align="center" gap="sm">
-        <Loader size="xl" color={colorScheme == 'dark' ? 'white' : 'black'} />
-        {description && (
-          <Text align="center" c="dimmed">
-            {description}
-          </Text>
-        )}
+        <Loader size="xl" stroke={colors.primaryOne[0]} />
+        {description && <Text align="center">{description}</Text>}
       </Flex>
     </Center>
   )

packages/toolbox-ui/src/components/RecordActions.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Group, Loader } from '@mantine/core'
+import { ActionIcon, createStyles, Group, Loader } from '@mantine/core'
 import { IconTrash } from '@tabler/icons'
 import React from 'react'
 
@@ -11,7 +11,15 @@ interface RecordActionsProps {
   isLoading?: boolean
 }
 
+const useStyles = createStyles((theme) => ({
+  trashIcon: {
+    color: theme.colors.danger[6],
+  },
+}))
+
 export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: RecordActionsProps) => {
+  const { classes } = useStyles()
+
   const actions = [
     onAccept && (
       <PrimaryButton key="accept" size="xs" variant="light" onClick={onAccept}>
@@ -26,14 +34,14 @@ export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: Reco
     ),
 
     onDelete && (
-      <ActionIcon key="delete" color="red" onClick={onDelete}>
-        <IconTrash size={16} stroke={1.5} />
+      <ActionIcon key="delete" onClick={onDelete} variant="transparent">
+        <IconTrash size={16} stroke={1.5} className={classes.trashIcon} />
       </ActionIcon>
     ),
   ].filter(Boolean)
 
   return (
-    <Group spacing={0} position="right">
+    <Group spacing={4} position="right">
       {isLoading ? <Loader size={20} /> : actions}
     </Group>
   )

packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx

@@ -9,36 +9,38 @@ interface ClickAble {
 
 const useStyles = createStyles((theme) => ({
   primary: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoWhite[0] : theme.colors.animoBlack[0],
-    color: theme.colorScheme === 'dark' ? theme.colors.animoBlack[0] : theme.colors.animoWhite[0],
+    backgroundColor: theme.colors.primaryOne[7],
+    color: theme.colors.textTwo[7],
+    transition: 'background-color 0.2s ease',
 
     '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoWhite[0] : theme.colors.animoBlack[0],
+      backgroundColor: theme.colors.primaryOne[6],
     },
   },
 
   secondary: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoBlack[0] : theme.colors.animoWhite[0],
-    color: theme.colorScheme === 'dark' ? theme.colors.animoWhite[0] : theme.colors.animoBlack[0],
+    backgroundColor: theme.colors.secondaryOne[7],
+    color: theme.colors.textTwo[0],
+    transition: 'background-color 0.2s ease',
 
     '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoBlack[1] : theme.colors.animoWhite[1],
+      backgroundColor: theme.colors.secondaryOne[6],
     },
   },
 }))
 
 export const PrimaryButton = (props: ButtonProps & ClickAble) => {
   const { classes, cx } = useStyles()
 
-  return <Button color="primary" {...props} className={cx(classes.primary, props.className)} />
+  return <Button {...props} className={cx(classes.primary, props.className)} />
 }
 
 export const SecondaryButton = (props: ButtonProps & ClickAble) => {
   const { classes, cx } = useStyles()
 
-  return <Button color="secondary" {...props} className={cx(classes.secondary, props.className)} />
+  return <Button {...props} className={cx(classes.secondary, props.className)} />
 }
 
 export const DangerButton = (props: ButtonProps & ClickAble) => {
-  return <Button color="red" variant="subtle" {...props} />
+  return <Button color="danger" variant="subtle" {...props} />
 }

packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx

@@ -1,10 +1,17 @@
 import type { BadgeProps } from '@mantine/core'
 
-import { Badge, useMantineTheme } from '@mantine/core'
+import { Badge, createStyles } from '@mantine/core'
 import React from 'react'
 
+const useStyles = createStyles((theme) => ({
+  badge: {
+    backgroundColor: theme.colors.info[7],
+    color: theme.colors.textTwo[7],
+  },
+}))
+
 export const StatusBadge = (props: BadgeProps) => {
-  const { colorScheme } = useMantineTheme()
+  const { classes, cx } = useStyles()
 
-  return <Badge variant={colorScheme === 'dark' ? 'light' : 'outline'} color="blue" {...props} />
+  return <Badge {...props} className={cx(classes.badge, props.className)} />
 }

packages/toolbox-ui/src/layout/Layout.tsx

@@ -2,7 +2,7 @@ import type { NavigationItem } from './LayoutNavBar'
 import type { ReactNode } from 'react'
 
 import { useAgent } from '@aries-framework/react-hooks'
-import { AppShell, createStyles } from '@mantine/core'
+import { AppShell } from '@mantine/core'
 import { IconHome, IconId, IconKey, IconPlugConnected } from '@tabler/icons'
 import React from 'react'
 
@@ -21,14 +21,7 @@ const navigationItems: NavigationItem[] = [
   { name: 'Proofs', href: '/agent/proofs', icon: IconId },
 ]
 
-const useStyles = createStyles((theme) => ({
-  appshell: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
-  },
-}))
-
 export const Layout = ({ children }: LayoutProps) => {
-  const { classes } = useStyles()
   const { agent, loading } = useAgent()
 
   if (loading) {
@@ -40,11 +33,7 @@ export const Layout = ({ children }: LayoutProps) => {
   }
 
   return (
-    <AppShell
-      padding="md"
-      className={classes.appshell}
-      navbar={<LayoutNavBar navigationItems={navigationItems} agent={agent} />}
-    >
+    <AppShell padding="md" navbar={<LayoutNavBar navigationItems={navigationItems} agent={agent} />}>
       {children}
     </AppShell>
   )