feat: Implemented some Animo colors

Signed-off-by: Tom Lanser <[email protected]>
animo · Dec 23, 2022 · 709bfdd · 709bfdd
1 parent 699ce77
commit 709bfdd
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 34 deletions.
diff --git a/packages/toolbox-ui/src/ToolboxApp.tsx b/packages/toolbox-ui/src/ToolboxApp.tsx
@@ -15,17 +15,24 @@ interface ToolboxAppProps {
 const toolboxTheme = (colorScheme: ColorScheme): MantineThemeOverride => ({
   colorScheme: colorScheme,
   colors: {
-    neutral: ['#333333'],
-    secondary: ['#557EBA'],
-    background: ['#F5F5F4'],
-    animoWhite: ['#F5F5F4'],
-    animoCoral: ['#EA6767'],
-    animoBlue: ['#557EBA'],
-    animoBlack: ['#202223'],
-    animoLightgrey: ['#E5E5E5'],
-    animoDarkgrey: ['#3A3B3B'],
+    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',
 })
 

diff --git a/packages/toolbox-ui/src/components/Loading.tsx b/packages/toolbox-ui/src/components/Loading.tsx
@@ -1,4 +1,4 @@
-import { Center, createStyles, Flex, Loader, Text } from '@mantine/core'
+import { Center, createStyles, Flex, Loader, Text, useMantineColorScheme } from '@mantine/core'
 import React from 'react'
 
 const useStyles = createStyles({
@@ -13,11 +13,12 @@ interface LoadingProps {
 
 export const Loading = ({ description }: LoadingProps) => {
   const { classes } = useStyles()
+  const { colorScheme } = useMantineColorScheme()
 
   return (
     <Center className={classes.spinnerCentering}>
       <Flex direction="column" align="center" gap="sm">
-        <Loader size="xl" />
+        <Loader size="xl" color={colorScheme == 'dark' ? 'white' : 'black'} />
         {description && (
           <Text align="center" c="dimmed">
             {description}

diff --git a/packages/toolbox-ui/src/components/RecordActions.tsx b/packages/toolbox-ui/src/components/RecordActions.tsx
@@ -14,13 +14,13 @@ interface RecordActionsProps {
 export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: RecordActionsProps) => {
   const actions = [
     onAccept && (
-      <PrimaryButton key="accept" size="xs" onClick={onAccept}>
+      <PrimaryButton key="accept" size="xs" variant="light" onClick={onAccept}>
         Accept
       </PrimaryButton>
     ),
 
     onDecline && (
-      <DangerButton key="reject" size="xs" onClick={onDecline}>
+      <DangerButton key="reject" size="xs" variant="light" onClick={onDecline}>
         Decline
       </DangerButton>
     ),

diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -71,7 +71,9 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
                   </Text>
                 </td>
                 <td className={classes.stateSize}>
-                  <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
+                  <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'} color="blue">
+                    {record.state}
+                  </Badge>
                 </td>
                 <td className={classes.actionsSize}>
                   <RecordActions

diff --git a/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx b/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx
@@ -1,18 +1,38 @@
 import type { ButtonProps } from '@mantine/core'
 
-import { Button } from '@mantine/core'
+import { Button, createStyles } from '@mantine/core'
 import React from 'react'
 
 interface ClickAble {
   onClick?: () => void
 }
 
+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],
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoWhite[0] : theme.colors.animoBlack[0],
+    },
+  },
+
+  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],
+  },
+}))
+
 export const PrimaryButton = (props: ButtonProps & ClickAble) => {
-  return <Button color="primary" variant="light" {...props} />
+  const { classes, cx } = useStyles()
+
+  return <Button color="primary" {...props} className={cx(classes.primary, props.className)} />
 }
 
-export const SecondaryButton = (props: ButtonProps) => {
-  return <Button color="secondary" variant="light" {...props} />
+export const SecondaryButton = (props: ButtonProps & ClickAble) => {
+  const { classes, cx } = useStyles()
+
+  return <Button color="secondary" {...props} className={cx(classes.secondary, props.className)} />
 }
 
 export const DangerButton = (props: ButtonProps & ClickAble) => {

diff --git a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
@@ -28,24 +28,19 @@ const useStyles = createStyles((theme, _params, getRef) => {
       backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
     },
 
-    title: {
-      textTransform: 'uppercase',
-      letterSpacing: -0.25,
-    },
-
     link: {
       ...theme.fn.focusStyles(),
       display: 'flex',
       alignItems: 'center',
       textDecoration: 'none',
       fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
+      color: theme.colorScheme === 'dark' ? theme.colors.animoWhite[4] : theme.colors.animoBlack[2],
       padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
       borderRadius: theme.radius.sm,
       fontWeight: 500,
 
       '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoBlack[0] : theme.colors.animoLightgrey[0],
         color: theme.colorScheme === 'dark' ? theme.white : theme.black,
 
         [`& .${icon}`]: {
@@ -62,10 +57,10 @@ const useStyles = createStyles((theme, _params, getRef) => {
 
     linkActive: {
       '&, &:hover': {
-        backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,
-        color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        color: theme.colorScheme === 'dark' ? theme.black : theme.white,
         [`& .${icon}`]: {
-          color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+          color: theme.colorScheme === 'dark' ? theme.black : theme.white,
         },
       },
     },

diff --git a/packages/toolbox-ui/src/layout/actions/LogoutAction.tsx b/packages/toolbox-ui/src/layout/actions/LogoutAction.tsx
@@ -22,7 +22,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
       cursor: 'pointer',
 
       '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.animoLightgrey[0],
         color: theme.colorScheme === 'dark' ? theme.white : theme.black,
 
         [`& .${icon}`]: {

diff --git a/packages/toolbox-ui/src/pages/SetupScreen.tsx b/packages/toolbox-ui/src/pages/SetupScreen.tsx
@@ -1,9 +1,10 @@
 import { uuid } from '@animo/toolbox-core/src/utils'
-import { createStyles, TextInput, Paper, Title, Button } from '@mantine/core'
+import { createStyles, TextInput, Paper, Title } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import React from 'react'
 
 import { BackButton } from '../components/BackButton'
+import { PrimaryButton } from '../components/generic'
 import { useAgentManager } from '../contexts/AgentManagerContext'
 import { useNavigation } from '../hooks/useNavigation'
 
@@ -91,9 +92,9 @@ export const SetupScreen = () => {
               {...form.getInputProps('mediatorInviteUrl')}
             />
 
-            <Button type="submit" fullWidth mt="xl">
+            <PrimaryButton type="submit" fullWidth mt="xl">
               Create
-            </Button>
+            </PrimaryButton>
           </form>
         </Paper>
       </div>

diff --git a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
@@ -1,10 +1,11 @@
 import { useAgent, useConnections } from '@aries-framework/react-hooks'
-import { Button, Flex, TextInput, Title } from '@mantine/core'
+import { Flex, TextInput, Title } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import React from 'react'
 
 import { Loading } from '../../../components/Loading'
 import { ConnectionsTable } from '../../../components/connections/ConnectionsTable'
+import { PrimaryButton } from '../../../components/generic'
 
 interface ConnectionInviteValues {
   url: string
@@ -31,7 +32,7 @@ export const ConnectionsScreen = () => {
       <form onSubmit={form.onSubmit(receiveInvite)}>
         <Flex gap={10} mb={20}>
           <TextInput placeholder="Invite url" {...form.getInputProps('url')} />
-          <Button type="submit">Receive invite</Button>
+          <PrimaryButton type="submit">Receive invite</PrimaryButton>
         </Flex>
       </form>
       <div>