From c0211de262bad0ff42eba84f3680302af95df882 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Fri, 23 Dec 2022 14:07:33 +0100
Subject: [PATCH 1/8] feat: Implemented some Animo colors

Signed-off-by: Tom Lanser <tom@animo.id>
---
 packages/toolbox-ui/src/ToolboxApp.tsx        | 25 +++++++++++------
 .../toolbox-ui/src/components/Loading.tsx     |  5 ++--
 .../src/components/RecordActions.tsx          |  4 +--
 .../connections/ConnectionsTable.tsx          |  4 ++-
 .../components/generic/buttons/Buttons.tsx    | 28 ++++++++++++++++---
 .../toolbox-ui/src/layout/LayoutNavBar.tsx    | 15 ++++------
 .../src/layout/actions/LogoutAction.tsx       |  2 +-
 packages/toolbox-ui/src/pages/SetupScreen.tsx |  7 +++--
 .../agent/connections/ConnectionsScreen.tsx   |  4 +--
 9 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/packages/toolbox-ui/src/ToolboxApp.tsx b/packages/toolbox-ui/src/ToolboxApp.tsx
index 81ee1bb..5966099 100644
--- a/packages/toolbox-ui/src/ToolboxApp.tsx
+++ b/packages/toolbox-ui/src/ToolboxApp.tsx
@@ -18,17 +18,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
index 56fa824..dd17c42 100644
--- 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
index 539b6d6..bcb60fd 100644
--- 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
index 5a61ea9..aca9eb5 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -73,7 +73,9 @@ export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: Con
                   </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
index 6869a30..26ca623 100644
--- 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
index 46c84d4..aae9bc3 100644
--- 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
index 4c865ad..898c4b9 100644
--- 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
index 3a6d6a0..9825971 100644
--- 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'
 
@@ -88,9 +89,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
index 294463c..8cd4af8 100644
--- a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
+++ b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
@@ -1,5 +1,5 @@
 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 { openContextModal } from '@mantine/modals'
 import { showNotification } from '@mantine/notifications'
@@ -61,7 +61,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>
           <PrimaryButton onClick={() => createInvite()}>Create Invite</PrimaryButton>
         </Flex>
       </form>

From 02a5af68c6dd1ed3548db0201c94a4a47674ee0b Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 4 Jan 2023 13:57:43 +0100
Subject: [PATCH 2/8] feat: Changed the color usage of the action buttons and
 made the status badge generic

Signed-off-by: Tom Lanser <tom@animo.id>
---
 .../src/components/RecordActions.tsx          |  6 +++---
 .../connections/ConnectionsTable.tsx          |  8 +++-----
 .../credentials/CredentialsTable.tsx          |  6 +++---
 .../components/generic/buttons/Buttons.tsx    |  4 ++++
 .../components/generic/table/StatusBadge.tsx  | 10 ++++++++++
 .../src/components/proofs/ProofsTable.tsx     |  6 +++---
 .../src/pages/AgentSelectionScreen.tsx        | 19 ++++++++++++++++---
 7 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx

diff --git a/packages/toolbox-ui/src/components/RecordActions.tsx b/packages/toolbox-ui/src/components/RecordActions.tsx
index bcb60fd..0dc6f5f 100644
--- a/packages/toolbox-ui/src/components/RecordActions.tsx
+++ b/packages/toolbox-ui/src/components/RecordActions.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Group, Loader } from '@mantine/core'
 import { IconTrash } from '@tabler/icons'
 import React from 'react'
 
-import { DangerButton, PrimaryButton } from './generic'
+import { PrimaryButton, SecondaryButton } from './generic'
 
 interface RecordActionsProps {
   onDelete?: () => void
@@ -20,9 +20,9 @@ export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: Reco
     ),
 
     onDecline && (
-      <DangerButton key="reject" size="xs" variant="light" onClick={onDecline}>
+      <SecondaryButton key="reject" size="xs" onClick={onDecline}>
         Decline
-      </DangerButton>
+      </SecondaryButton>
     ),
 
     onDelete && (
diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index aca9eb5..62424e2 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -1,11 +1,12 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
 import { ConnectionsUtil } from '@animo/toolbox-core/src/utils/records/ConnectionsUtil'
-import { Badge, createStyles, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
+import { createStyles, Group, ScrollArea, Table, Text } from '@mantine/core'
 import React from 'react'
 
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface ConnectionsTableProps {
   records: ConnectionRecord[]
@@ -36,7 +37,6 @@ const useStyles = createStyles(() => ({
 
 export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: ConnectionsTableProps) => {
   const { classes } = useStyles()
-  const theme = useMantineTheme()
 
   return (
     <ScrollArea>
@@ -73,9 +73,7 @@ export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: Con
                   </Text>
                 </td>
                 <td className={classes.stateSize}>
-                  <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'} color="blue">
-                    {record.state}
-                  </Badge>
+                  <StatusBadge>{record.state}</StatusBadge>
                 </td>
                 <td className={classes.actionsSize}>
                   <RecordActions
diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
index e013d11..8d82846 100644
--- a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
+++ b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
@@ -2,12 +2,13 @@ import type { ConnectionRecord, CredentialExchangeRecord } from '@aries-framewor
 
 import { formatSchemaName } from '@animo/toolbox-core/src/utils'
 import { CredentialsUtil } from '@animo/toolbox-core/src/utils/records/CredentialsUtil'
-import { Badge, createStyles, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
+import { createStyles, Group, ScrollArea, Table, Text } from '@mantine/core'
 import React from 'react'
 
 import { useCredentialsFormatData } from '../../contexts/CredentialFormatDataProvider'
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface CredentialsTableProps {
   records: CredentialExchangeRecord[]
@@ -36,7 +37,6 @@ const useStyles = createStyles(() => ({
 
 export const CredentialsTable = ({ records, connections, onDelete, onAccept, onDecline }: CredentialsTableProps) => {
   const { classes } = useStyles()
-  const theme = useMantineTheme()
   const { formattedData } = useCredentialsFormatData()
 
   return (
@@ -70,7 +70,7 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
                   </Group>
                 </td>
                 <td className={classes.stateSize}>
-                  <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
+                  <StatusBadge>{record.state}</StatusBadge>
                 </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
index 26ca623..6f72f8a 100644
--- a/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx
+++ b/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx
@@ -20,6 +20,10 @@ const useStyles = createStyles((theme) => ({
   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],
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoBlack[1] : theme.colors.animoWhite[1],
+    },
   },
 }))
 
diff --git a/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx b/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
new file mode 100644
index 0000000..fb27c35
--- /dev/null
+++ b/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
@@ -0,0 +1,10 @@
+import type { BadgeProps } from '@mantine/core'
+
+import { Badge, useMantineTheme } from '@mantine/core'
+import React from 'react'
+
+export const StatusBadge = (props: BadgeProps) => {
+  const { colorScheme } = useMantineTheme()
+
+  return <Badge variant={colorScheme === 'dark' ? 'light' : 'outline'} color="blue" {...props} />
+}
diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
index 6e76fbb..708395f 100644
--- a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
+++ b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -1,12 +1,13 @@
 import type { ConnectionRecord, ProofExchangeRecord } from '@aries-framework/core'
 
 import { ProofsUtil } from '@animo/toolbox-core/src/utils/records/ProofsUtil'
-import { Badge, createStyles, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
+import { createStyles, Group, ScrollArea, Table, Text } from '@mantine/core'
 import React from 'react'
 
 import { useProofsFormatData } from '../../contexts/ProofsFormatDataProvider'
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface ProofsTableProps {
   records: ProofExchangeRecord[]
@@ -38,7 +39,6 @@ const useStyles = createStyles(() => ({
 
 export const ProofsTable = ({ records, connections, onDelete, onAccept, onDecline }: ProofsTableProps) => {
   const { classes } = useStyles()
-  const theme = useMantineTheme()
   const { formattedData } = useProofsFormatData()
 
   return (
@@ -80,7 +80,7 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
                   </Text>
                 </td>
                 <td className={classes.stateSize}>
-                  <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
+                  <StatusBadge>{record.state}</StatusBadge>
                 </td>
                 <td className={classes.actionsSize}>
                   <RecordActions
diff --git a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
index 72ae5c3..c397721 100644
--- a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
+++ b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
@@ -1,4 +1,4 @@
-import { Card, Container, Flex, Group, Space, Text, Title, UnstyledButton } from '@mantine/core'
+import { Card, Container, createStyles, Flex, Group, Space, Text, Title, UnstyledButton } from '@mantine/core'
 import { IconPlus } from '@tabler/icons'
 import React from 'react'
 
@@ -7,7 +7,20 @@ import { SmartAvatar } from '../components/SmartAvatar'
 import { useAgentManager } from '../contexts/AgentManagerContext'
 import { useNavigation } from '../hooks/useNavigation'
 
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    boxShadow: theme.shadows.xs,
+    transition: 'background-color 0.2s ease',
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  },
+}))
+
 export const AgentSelectionScreen = () => {
+  const { classes } = useStyles()
   const navigation = useNavigation()
   const { agents, setCurrentAgentId, loading } = useAgentManager()
 
@@ -22,12 +35,12 @@ export const AgentSelectionScreen = () => {
 
   return (
     <Container mt={20}>
-      <Title size="h3">Agents</Title>
+      <Title size="h2">Agents</Title>
       <Space h="md" />
       <Flex gap="md" wrap="wrap">
         {agents.map((agent) => (
           <UnstyledButton key={agent.id} onClick={() => switchToAgent(agent.id)}>
-            <Card h={100} w={220}>
+            <Card h={100} w={220} className={classes.card}>
               <Group noWrap>
                 <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={64} radius="md">
                   {agent.agentConfig.label}

From 77320ffeb8d3234bebeb8ab2806c9840be797453 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Fri, 6 Jan 2023 17:18:29 +0100
Subject: [PATCH 3/8] refactor: All of the screens are now supporting theme
 variables

Signed-off-by: Tom Lanser <tom@animo.id>
---
 packages/toolbox-ui/src/ToolboxApp.tsx        |  27 +---
 packages/toolbox-ui/src/ToolboxTheme.ts       | 117 ++++++++++++++++++
 .../src/components/GlobalErrorHandler.tsx     |   2 +-
 .../toolbox-ui/src/components/Loading.tsx     |  20 +--
 .../src/components/RecordActions.tsx          |  16 ++-
 .../components/generic/buttons/Buttons.tsx    |  20 +--
 .../components/generic/table/StatusBadge.tsx  |  13 +-
 packages/toolbox-ui/src/layout/Layout.tsx     |  15 +--
 .../toolbox-ui/src/layout/LayoutAvatar.tsx    |  49 ++++++--
 .../toolbox-ui/src/layout/LayoutNavBar.tsx    |  20 +--
 .../src/layout/actions/ColorSchemeSwitch.tsx  |   8 +-
 .../src/layout/actions/LogoutAction.tsx       |  10 +-
 .../src/modals/PresentInviteModal.tsx         |   2 +-
 .../src/pages/AgentSelectionScreen.tsx        |  34 +++--
 packages/toolbox-ui/src/pages/SetupScreen.tsx |   2 +-
 .../agent/connections/ConnectionsScreen.tsx   |  14 +--
 16 files changed, 252 insertions(+), 117 deletions(-)
 create mode 100644 packages/toolbox-ui/src/ToolboxTheme.ts

diff --git a/packages/toolbox-ui/src/ToolboxApp.tsx b/packages/toolbox-ui/src/ToolboxApp.tsx
index 5966099..67921d2 100644
--- a/packages/toolbox-ui/src/ToolboxApp.tsx
+++ b/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()
 
diff --git a/packages/toolbox-ui/src/ToolboxTheme.ts b/packages/toolbox-ui/src/ToolboxTheme.ts
new file mode 100644
index 0000000..b695ee9
--- /dev/null
+++ b/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>>
+  }
+}
diff --git a/packages/toolbox-ui/src/components/GlobalErrorHandler.tsx b/packages/toolbox-ui/src/components/GlobalErrorHandler.tsx
index e31e8c9..ee1030c 100644
--- a/packages/toolbox-ui/src/components/GlobalErrorHandler.tsx
+++ b/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,
       })
diff --git a/packages/toolbox-ui/src/components/Loading.tsx b/packages/toolbox-ui/src/components/Loading.tsx
index dd17c42..697b3c1 100644
--- a/packages/toolbox-ui/src/components/Loading.tsx
+++ b/packages/toolbox-ui/src/components/Loading.tsx
@@ -1,11 +1,15 @@
-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
@@ -13,17 +17,13 @@ interface LoadingProps {
 
 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>
   )
diff --git a/packages/toolbox-ui/src/components/RecordActions.tsx b/packages/toolbox-ui/src/components/RecordActions.tsx
index 0dc6f5f..10bac0d 100644
--- a/packages/toolbox-ui/src/components/RecordActions.tsx
+++ b/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>
   )
diff --git a/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx b/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx
index 6f72f8a..2ec5052 100644
--- a/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx
+++ b/packages/toolbox-ui/src/components/generic/buttons/Buttons.tsx
@@ -9,20 +9,22 @@ 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],
     },
   },
 }))
@@ -30,15 +32,15 @@ const useStyles = createStyles((theme) => ({
 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} />
 }
diff --git a/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx b/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
index fb27c35..dcb2db1 100644
--- a/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
+++ b/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)} />
 }
diff --git a/packages/toolbox-ui/src/layout/Layout.tsx b/packages/toolbox-ui/src/layout/Layout.tsx
index 0a64f6d..4acf1c8 100644
--- a/packages/toolbox-ui/src/layout/Layout.tsx
+++ b/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>
   )
diff --git a/packages/toolbox-ui/src/layout/LayoutAvatar.tsx b/packages/toolbox-ui/src/layout/LayoutAvatar.tsx
index 0c35e8e..b921ea2 100644
--- a/packages/toolbox-ui/src/layout/LayoutAvatar.tsx
+++ b/packages/toolbox-ui/src/layout/LayoutAvatar.tsx
@@ -1,6 +1,6 @@
 import type { Agent } from '@aries-framework/core'
 
-import { Group, Text } from '@mantine/core'
+import { Box, createStyles, Group, Text } from '@mantine/core'
 import { useNetwork } from '@mantine/hooks'
 import { IconWifi } from '@tabler/icons'
 import React from 'react'
@@ -11,7 +11,32 @@ interface LayoutAvatarProps {
   agent: Agent
 }
 
+const useStyles = createStyles((theme) => ({
+  variantLabel: {
+    color: theme.colors.textOne[3],
+    textTransform: 'uppercase',
+    fontWeight: 700,
+    fontSize: theme.fontSizes.xs,
+  },
+  avatarLabel: {
+    color: theme.colors.textOne[0],
+    fontWeight: 600,
+    fontSize: theme.fontSizes.md,
+  },
+  attributeLabel: {
+    color: theme.colors.textOne[3],
+    fontSize: theme.fontSizes.xs,
+  },
+  connectedStatusConnected: {
+    color: theme.colors.success[0],
+  },
+  connectedStatusDisconnected: {
+    color: theme.colors.error[0],
+  },
+}))
+
 export const LayoutAvatar = ({ agent }: LayoutAvatarProps) => {
+  const { classes } = useStyles()
   const { online } = useNetwork()
   const avatarLabel = agent.config.label
 
@@ -20,21 +45,19 @@ export const LayoutAvatar = ({ agent }: LayoutAvatarProps) => {
       <SmartAvatar src={agent.config.connectionImageUrl} size={64} radius="md">
         {avatarLabel}
       </SmartAvatar>
-      <div>
-        <Text size="xs" sx={{ textTransform: 'uppercase' }} weight={700} color="dimmed">
-          Native (AFJ)
-        </Text>
-        <Text size="md" weight={600}>
-          {avatarLabel}
-        </Text>
+      <Box>
+        <Text className={classes.variantLabel}>Native (AFJ)</Text>
+        <Text className={classes.avatarLabel}>{avatarLabel}</Text>
 
         <Group noWrap spacing={10} mt={3}>
-          <Text size="xs" color="dimmed">
-            {online ? 'Connected' : 'Offline'}
-          </Text>
-          <IconWifi size={20} stroke={1.5} color={online ? 'green' : 'red'} />
+          <Text className={classes.attributeLabel}>{online ? 'Connected' : 'Offline'}</Text>
+          <IconWifi
+            size={20}
+            stroke={1.5}
+            className={online ? classes.connectedStatusConnected : classes.connectedStatusDisconnected}
+          />
         </Group>
-      </div>
+      </Box>
     </Group>
   )
 }
diff --git a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
index aae9bc3..be19638 100644
--- a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
+++ b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
@@ -25,7 +25,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
 
   return {
     navbar: {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+      backgroundColor: theme.colors.backgroundOne[7],
     },
 
     link: {
@@ -34,39 +34,39 @@ const useStyles = createStyles((theme, _params, getRef) => {
       alignItems: 'center',
       textDecoration: 'none',
       fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === 'dark' ? theme.colors.animoWhite[4] : theme.colors.animoBlack[2],
+      color: theme.colors.textOne[7],
       padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
       borderRadius: theme.radius.sm,
       fontWeight: 500,
 
       '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.animoBlack[0] : theme.colors.animoLightgrey[0],
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        backgroundColor: theme.fn.rgba(theme.colors.primaryOne[7], 0.1),
+        color: theme.colors.textOne[7],
 
         [`& .${icon}`]: {
-          color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+          color: theme.colors.textOne[7],
         },
       },
     },
 
     linkIcon: {
       ref: icon,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+      color: theme.colors.textOne[7],
       marginRight: theme.spacing.sm,
     },
 
     linkActive: {
       '&, &:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.white : theme.black,
-        color: theme.colorScheme === 'dark' ? theme.black : theme.white,
+        backgroundColor: theme.colors.primaryOne[7],
+        color: theme.colors.textTwo[7],
         [`& .${icon}`]: {
-          color: theme.colorScheme === 'dark' ? theme.black : theme.white,
+          color: theme.colors.textTwo[7],
         },
       },
     },
 
     footer: {
-      borderTop: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,
+      borderTop: `1px solid ${theme.colors.backgroundOne[3]}`,
       paddingTop: theme.spacing.md,
     },
   }
diff --git a/packages/toolbox-ui/src/layout/actions/ColorSchemeSwitch.tsx b/packages/toolbox-ui/src/layout/actions/ColorSchemeSwitch.tsx
index fb450c5..4eff2b4 100644
--- a/packages/toolbox-ui/src/layout/actions/ColorSchemeSwitch.tsx
+++ b/packages/toolbox-ui/src/layout/actions/ColorSchemeSwitch.tsx
@@ -4,8 +4,12 @@ import React from 'react'
 
 const useStyles = createStyles((theme) => ({
   icon: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-    color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+    backgroundColor: theme.colors.primaryOne[7],
+    color: theme.colors.textTwo[7],
+
+    '&:hover': {
+      backgroundColor: theme.colors.primaryOne[6],
+    },
   },
 }))
 
diff --git a/packages/toolbox-ui/src/layout/actions/LogoutAction.tsx b/packages/toolbox-ui/src/layout/actions/LogoutAction.tsx
index 898c4b9..218ea5d 100644
--- a/packages/toolbox-ui/src/layout/actions/LogoutAction.tsx
+++ b/packages/toolbox-ui/src/layout/actions/LogoutAction.tsx
@@ -15,25 +15,25 @@ const useStyles = createStyles((theme, _params, getRef) => {
       alignItems: 'center',
       textDecoration: 'none',
       fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
+      color: theme.colors.textOne[7],
       padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
       borderRadius: theme.radius.sm,
       fontWeight: 500,
       cursor: 'pointer',
 
       '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.animoLightgrey[0],
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        backgroundColor: theme.fn.rgba(theme.colors.primaryOne[7], 0.1),
+        color: theme.colors.textOne[7],
 
         [`& .${icon}`]: {
-          color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+          color: theme.colors.textOne[7],
         },
       },
     },
 
     linkIcon: {
       ref: icon,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+      color: theme.colors.textOne[7],
       marginRight: theme.spacing.sm,
     },
   }
diff --git a/packages/toolbox-ui/src/modals/PresentInviteModal.tsx b/packages/toolbox-ui/src/modals/PresentInviteModal.tsx
index baedf6f..9eac63a 100644
--- a/packages/toolbox-ui/src/modals/PresentInviteModal.tsx
+++ b/packages/toolbox-ui/src/modals/PresentInviteModal.tsx
@@ -10,7 +10,7 @@ import { PrimaryButton } from '../components/generic'
 const useStyles = createStyles((theme) => ({
   qrCode: {
     borderRadius: theme.radius.sm,
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[0] : theme.white,
+    backgroundColor: theme.colors.primaryOne[7],
     padding: theme.spacing.xs,
   },
 }))
diff --git a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
index c397721..793d1f4 100644
--- a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
+++ b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
@@ -1,4 +1,4 @@
-import { Card, Container, createStyles, Flex, Group, Space, Text, Title, UnstyledButton } from '@mantine/core'
+import { Box, Card, Container, createStyles, Flex, Group, Text, Title, UnstyledButton } from '@mantine/core'
 import { IconPlus } from '@tabler/icons'
 import React from 'react'
 
@@ -9,14 +9,25 @@ import { useNavigation } from '../hooks/useNavigation'
 
 const useStyles = createStyles((theme) => ({
   card: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    backgroundColor: theme.colors.secondaryOne[5],
     boxShadow: theme.shadows.xs,
     transition: 'background-color 0.2s ease',
 
     '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+      backgroundColor: theme.colors.secondaryOne[4],
     },
   },
+  variantLabel: {
+    color: theme.colors.textOne[7],
+    textTransform: 'uppercase',
+    fontWeight: 700,
+    fontSize: theme.fontSizes.xs,
+  },
+  avatarLabel: {
+    color: theme.colors.textOne[7],
+    fontWeight: 600,
+    fontSize: theme.fontSizes.md,
+  },
 }))
 
 export const AgentSelectionScreen = () => {
@@ -35,8 +46,9 @@ export const AgentSelectionScreen = () => {
 
   return (
     <Container mt={20}>
-      <Title size="h2">Agents</Title>
-      <Space h="md" />
+      <Title size="h2" mb="md">
+        Agents
+      </Title>
       <Flex gap="md" wrap="wrap">
         {agents.map((agent) => (
           <UnstyledButton key={agent.id} onClick={() => switchToAgent(agent.id)}>
@@ -45,14 +57,10 @@ export const AgentSelectionScreen = () => {
                 <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={64} radius="md">
                   {agent.agentConfig.label}
                 </SmartAvatar>
-                <div>
-                  <Text size="xs" sx={{ textTransform: 'uppercase' }} weight={700} color="dimmed">
-                    Native (AFJ)
-                  </Text>
-                  <Text size="md" weight={600}>
-                    {agent.agentConfig.label}
-                  </Text>
-                </div>
+                <Box>
+                  <Text className={classes.variantLabel}>Native (AFJ)</Text>
+                  <Text className={classes.avatarLabel}>{agent.agentConfig.label}</Text>
+                </Box>
               </Group>
             </Card>
           </UnstyledButton>
diff --git a/packages/toolbox-ui/src/pages/SetupScreen.tsx b/packages/toolbox-ui/src/pages/SetupScreen.tsx
index 9825971..0d57bf9 100644
--- a/packages/toolbox-ui/src/pages/SetupScreen.tsx
+++ b/packages/toolbox-ui/src/pages/SetupScreen.tsx
@@ -77,7 +77,7 @@ export const SetupScreen = () => {
         <BackButton />
       </div>
       <div className={classes.screen}>
-        <Title align="center" size="h3" sx={() => ({ fontWeight: 900 })}>
+        <Title align="center" size="h3" weight={900}>
           Create a new Agent
         </Title>
         <Paper withBorder shadow="md" p={30} mt={20} radius="md">
diff --git a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
index 8cd4af8..ccf6e1d 100644
--- a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
+++ b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
@@ -1,5 +1,5 @@
 import { useAgent, useConnections } from '@aries-framework/react-hooks'
-import { Flex, TextInput, Title } from '@mantine/core'
+import { Box, Flex, TextInput, Title } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import { openContextModal } from '@mantine/modals'
 import { showNotification } from '@mantine/notifications'
@@ -37,7 +37,7 @@ export const ConnectionsScreen = () => {
       showNotification({
         title: 'Error',
         message: 'Could not create invitation',
-        color: 'red',
+        color: 'error',
       })
       return
     }
@@ -55,17 +55,17 @@ export const ConnectionsScreen = () => {
 
   return (
     <>
-      <Title size="h2" mb={20}>
+      <Title size="h2" mb="xs">
         Connections
       </Title>
       <form onSubmit={form.onSubmit(receiveInvite)}>
-        <Flex gap={10} mb={20}>
-          <TextInput placeholder="Invite url" {...form.getInputProps('url')} />
+        <Flex gap="xs" mb="xs">
+          <TextInput placeholder="Invite url" {...form.getInputProps('url')} required />
           <PrimaryButton type="submit">Receive invite</PrimaryButton>
           <PrimaryButton onClick={() => createInvite()}>Create Invite</PrimaryButton>
         </Flex>
       </form>
-      <div>
+      <Box>
         {connectionLoading ? (
           <Loading />
         ) : (
@@ -76,7 +76,7 @@ export const ConnectionsScreen = () => {
             onDecline={(connection) => declineRequest(connection.id)}
           />
         )}
-      </div>
+      </Box>
     </>
   )
 }

From f7cca14de8dc1a52e71d8c961018db3b8110bc7d Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Mon, 9 Jan 2023 11:07:42 +0100
Subject: [PATCH 4/8] refactor: Splitted the different theme elements in their
 own file

Signed-off-by: Tom Lanser <tom@animo.id>
---
 packages/toolbox-ui/src/ToolboxTheme.ts       | 87 +------------------
 .../src/layout/themes/AnimoColorShades.ts     | 24 +++++
 .../src/layout/themes/AnimoDarkTheme.ts       | 25 ++++++
 .../src/layout/themes/AnimoLightTheme.ts      | 24 +++++
 .../src/layout/themes/AnimoVariantTheme.ts    | 21 +++++
 .../toolbox-ui/src/layout/themes/index.ts     |  4 +
 6 files changed, 100 insertions(+), 85 deletions(-)
 create mode 100644 packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts
 create mode 100644 packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts
 create mode 100644 packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts
 create mode 100644 packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts
 create mode 100644 packages/toolbox-ui/src/layout/themes/index.ts

diff --git a/packages/toolbox-ui/src/ToolboxTheme.ts b/packages/toolbox-ui/src/ToolboxTheme.ts
index b695ee9..1f3f3cf 100644
--- a/packages/toolbox-ui/src/ToolboxTheme.ts
+++ b/packages/toolbox-ui/src/ToolboxTheme.ts
@@ -1,90 +1,7 @@
+import type { AnimoVariantTheme } from './layout/themes'
 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,
-}
+import { animoLightTheme, animoDarkTheme } from './layout/themes'
 
 export const toolboxTheme = (colorScheme: ColorScheme): MantineThemeOverride => ({
   colorScheme: colorScheme,
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts b/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts
new file mode 100644
index 0000000..77c36b0
--- /dev/null
+++ b/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts
@@ -0,0 +1,24 @@
+import type { ColorShade } from './AnimoVariantTheme'
+
+export 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,
+}
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts b/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts
new file mode 100644
index 0000000..5ace26f
--- /dev/null
+++ b/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts
@@ -0,0 +1,25 @@
+import type { AnimoVariantTheme } from './AnimoVariantTheme'
+
+import { animoColors } from './AnimoColorShades'
+
+export 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,
+}
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts b/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts
new file mode 100644
index 0000000..847df7d
--- /dev/null
+++ b/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts
@@ -0,0 +1,24 @@
+import type { AnimoVariantTheme } from './AnimoVariantTheme'
+
+import { animoColors } from './AnimoColorShades'
+
+export 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,
+}
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts b/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts
new file mode 100644
index 0000000..190e375
--- /dev/null
+++ b/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts
@@ -0,0 +1,21 @@
+import type { Tuple } from '@mantine/core'
+
+export type ColorShade = Tuple<string, 8>
+
+export 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
+}
diff --git a/packages/toolbox-ui/src/layout/themes/index.ts b/packages/toolbox-ui/src/layout/themes/index.ts
new file mode 100644
index 0000000..077ef15
--- /dev/null
+++ b/packages/toolbox-ui/src/layout/themes/index.ts
@@ -0,0 +1,4 @@
+export * from './AnimoDarkTheme'
+export * from './AnimoLightTheme'
+export * from './AnimoVariantTheme'
+export * from './AnimoColorShades'

From bed45009acec78925e892d95ca854f0ec830e8f0 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Tue, 10 Jan 2023 10:53:56 +0100
Subject: [PATCH 5/8] feat: Made some texts a bit brighter and changed the
 roundness of the avatar at the agent selection

Signed-off-by: Tom Lanser <tom@animo.id>
---
 packages/toolbox-electron/src/preload.js      |  3 +-
 .../toolbox-ui/src/components/BackButton.tsx  | 11 ++++--
 .../toolbox-ui/src/layout/LayoutAvatar.tsx    |  8 ++---
 .../src/pages/AgentSelectionScreen.tsx        | 34 +++++++++++--------
 packages/toolbox-ui/src/pages/SetupScreen.tsx | 13 ++++---
 5 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/packages/toolbox-electron/src/preload.js b/packages/toolbox-electron/src/preload.js
index c89132e..c69c659 100644
--- a/packages/toolbox-electron/src/preload.js
+++ b/packages/toolbox-electron/src/preload.js
@@ -31,7 +31,8 @@ contextBridge.exposeInMainWorld('nodeFetch', async (endpoint, request) => {
 
 const getConfigDirForPlatform = (platform, homeDir, appDataDir) => {
   switch (platform) {
-    case 'linux' || 'darwin':
+    case 'darwin':
+    case 'linux':
       return `${homeDir}/.config/siera/ui/config.json`
     case 'win32':
       return `${appDataDir}\\siera\\ui\\config.json`
diff --git a/packages/toolbox-ui/src/components/BackButton.tsx b/packages/toolbox-ui/src/components/BackButton.tsx
index ec0aab8..649882f 100644
--- a/packages/toolbox-ui/src/components/BackButton.tsx
+++ b/packages/toolbox-ui/src/components/BackButton.tsx
@@ -1,14 +1,21 @@
-import { UnstyledButton } from '@mantine/core'
+import { createStyles, UnstyledButton } from '@mantine/core'
 import { IconChevronLeft } from '@tabler/icons'
 import React from 'react'
 
 import { useNavigation } from '../hooks/useNavigation'
 
+const useStyles = createStyles((theme) => ({
+  button: {
+    color: theme.colors.primaryOne[7],
+  },
+}))
+
 export const BackButton = () => {
+  const { classes } = useStyles()
   const navigation = useNavigation()
 
   return (
-    <UnstyledButton onClick={() => navigation.goBack()}>
+    <UnstyledButton className={classes.button} onClick={() => navigation.goBack()}>
       <IconChevronLeft size={32} />
     </UnstyledButton>
   )
diff --git a/packages/toolbox-ui/src/layout/LayoutAvatar.tsx b/packages/toolbox-ui/src/layout/LayoutAvatar.tsx
index b921ea2..f8d4c21 100644
--- a/packages/toolbox-ui/src/layout/LayoutAvatar.tsx
+++ b/packages/toolbox-ui/src/layout/LayoutAvatar.tsx
@@ -19,19 +19,19 @@ const useStyles = createStyles((theme) => ({
     fontSize: theme.fontSizes.xs,
   },
   avatarLabel: {
-    color: theme.colors.textOne[0],
+    color: theme.colors.textOne[7],
     fontWeight: 600,
     fontSize: theme.fontSizes.md,
   },
   attributeLabel: {
-    color: theme.colors.textOne[3],
+    color: theme.colors.textOne[7],
     fontSize: theme.fontSizes.xs,
   },
   connectedStatusConnected: {
-    color: theme.colors.success[0],
+    color: theme.colors.success[7],
   },
   connectedStatusDisconnected: {
-    color: theme.colors.error[0],
+    color: theme.colors.error[7],
   },
 }))
 
diff --git a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
index 793d1f4..48b034b 100644
--- a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
+++ b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
@@ -9,18 +9,18 @@ import { useNavigation } from '../hooks/useNavigation'
 
 const useStyles = createStyles((theme) => ({
   card: {
-    backgroundColor: theme.colors.secondaryOne[5],
+    backgroundColor: theme.colors.secondaryOne[6],
     boxShadow: theme.shadows.xs,
     transition: 'background-color 0.2s ease',
 
     '&:hover': {
-      backgroundColor: theme.colors.secondaryOne[4],
+      backgroundColor: theme.colors.secondaryOne[5],
     },
   },
   variantLabel: {
     color: theme.colors.textOne[7],
     textTransform: 'uppercase',
-    fontWeight: 700,
+    fontWeight: 500,
     fontSize: theme.fontSizes.xs,
   },
   avatarLabel: {
@@ -28,6 +28,10 @@ const useStyles = createStyles((theme) => ({
     fontWeight: 600,
     fontSize: theme.fontSizes.md,
   },
+  createAgentButton: {
+    color: theme.colors.textOne[7],
+    height: 80,
+  },
 }))
 
 export const AgentSelectionScreen = () => {
@@ -52,20 +56,22 @@ export const AgentSelectionScreen = () => {
       <Flex gap="md" wrap="wrap">
         {agents.map((agent) => (
           <UnstyledButton key={agent.id} onClick={() => switchToAgent(agent.id)}>
-            <Card h={100} w={220} className={classes.card}>
-              <Group noWrap>
-                <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={64} radius="md">
-                  {agent.agentConfig.label}
-                </SmartAvatar>
-                <Box>
-                  <Text className={classes.variantLabel}>Native (AFJ)</Text>
-                  <Text className={classes.avatarLabel}>{agent.agentConfig.label}</Text>
-                </Box>
-              </Group>
+            <Card h={80} w={220} className={classes.card} radius="lg">
+              <Flex align="center" h="100%">
+                <Group noWrap>
+                  <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={48} radius="xl">
+                    {agent.agentConfig.label}
+                  </SmartAvatar>
+                  <Box>
+                    <Text className={classes.avatarLabel}>{agent.agentConfig.label}</Text>
+                    <Text className={classes.variantLabel}>Native (AFJ)</Text>
+                  </Box>
+                </Group>
+              </Flex>
             </Card>
           </UnstyledButton>
         ))}
-        <UnstyledButton onClick={() => navigation.navigate('/setup')} h={100}>
+        <UnstyledButton className={classes.createAgentButton} onClick={() => navigation.navigate('/setup')}>
           <Group spacing="sm">
             <IconPlus />
             <Text span>Create new Agent</Text>
diff --git a/packages/toolbox-ui/src/pages/SetupScreen.tsx b/packages/toolbox-ui/src/pages/SetupScreen.tsx
index 0d57bf9..65a37bc 100644
--- a/packages/toolbox-ui/src/pages/SetupScreen.tsx
+++ b/packages/toolbox-ui/src/pages/SetupScreen.tsx
@@ -44,6 +44,7 @@ const getRandomRobotImage = () => {
 export const SetupScreen = () => {
   const navigation = useNavigation()
   const { classes } = useStyles()
+  const agentManager = useAgentManager()
   const form = useForm<CreateAgentForm>({
     initialValues: {
       agentLabel: '',
@@ -71,21 +72,23 @@ export const SetupScreen = () => {
     navigation.navigate('/')
   }
 
+  const agentLabel = agentManager.agents.length === 0 ? 'First agent' : 'My agent'
+
   return (
     <>
       <div className={classes.backButton}>
         <BackButton />
       </div>
       <div className={classes.screen}>
-        <Title align="center" size="h3" weight={900}>
-          Create a new Agent
-        </Title>
         <Paper withBorder shadow="md" p={30} mt={20} radius="md">
+          <Title align="center" size="h3" weight={900} mb="xs">
+            Create a new Agent
+          </Title>
           <form onSubmit={form.onSubmit(createAgentConfig)}>
-            <TextInput label="Agent label" placeholder="Agent label" required {...form.getInputProps('agentLabel')} />
+            <TextInput label="Agent label" placeholder={agentLabel} required {...form.getInputProps('agentLabel')} />
             <TextInput
               label="Mediator invite url"
-              placeholder="Mediator url"
+              placeholder="https://mediator.com/example-url"
               {...form.getInputProps('mediatorInviteUrl')}
             />
 

From 767205d7ba4a81cd6e62a80c423166cd21052e8e Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 11 Jan 2023 10:33:23 +0100
Subject: [PATCH 6/8] feat: Added a empty state and changed some styling and
 the way we have the navbar

Signed-off-by: Tom Lanser <tom@animo.id>
---
 packages/toolbox-ui/src/ToolboxTheme.ts       |  8 ++++
 .../toolbox-ui/src/components/Loading.tsx     |  3 +-
 .../toolbox-ui/src/components/SmartAvatar.tsx | 22 ++++++++++-
 .../connections/ConnectionsTable.tsx          | 13 ++++++-
 .../credentials/CredentialsTable.tsx          |  8 ++++
 .../components/generic/table/EmptyState.tsx   | 33 ++++++++++++++++
 .../components/generic/table/StatusBadge.tsx  | 13 +------
 .../src/components/proofs/ProofsTable.tsx     | 10 ++++-
 .../toolbox-ui/src/layout/LayoutActions.tsx   | 14 -------
 .../toolbox-ui/src/layout/LayoutNavBar.tsx    | 38 +++++++++++--------
 .../src/layout/themes/AnimoColorShades.ts     |  2 +-
 .../src/layout/themes/AnimoDarkTheme.ts       |  3 +-
 .../src/layout/themes/AnimoLightTheme.ts      |  3 +-
 .../src/layout/themes/AnimoVariantTheme.ts    |  1 +
 .../src/modals/PresentInviteModal.tsx         | 11 ++++--
 .../src/pages/AgentSelectionScreen.tsx        | 15 +++++---
 .../agent/connections/ConnectionsScreen.tsx   |  3 +-
 17 files changed, 138 insertions(+), 62 deletions(-)
 create mode 100644 packages/toolbox-ui/src/components/generic/table/EmptyState.tsx
 delete mode 100644 packages/toolbox-ui/src/layout/LayoutActions.tsx

diff --git a/packages/toolbox-ui/src/ToolboxTheme.ts b/packages/toolbox-ui/src/ToolboxTheme.ts
index 1f3f3cf..9c5472e 100644
--- a/packages/toolbox-ui/src/ToolboxTheme.ts
+++ b/packages/toolbox-ui/src/ToolboxTheme.ts
@@ -24,6 +24,14 @@ export const toolboxTheme = (colorScheme: ColorScheme): MantineThemeOverride =>
         },
       }),
     },
+
+    Modal: {
+      styles: () => ({
+        title: {
+          fontWeight: 700,
+        },
+      }),
+    },
   },
 })
 
diff --git a/packages/toolbox-ui/src/components/Loading.tsx b/packages/toolbox-ui/src/components/Loading.tsx
index 697b3c1..9ca253c 100644
--- a/packages/toolbox-ui/src/components/Loading.tsx
+++ b/packages/toolbox-ui/src/components/Loading.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react'
 import { Center, createStyles, Flex, Loader, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
@@ -22,7 +21,7 @@ export const Loading = ({ description }: LoadingProps) => {
   return (
     <Center className={classes.spinnerCentering}>
       <Flex direction="column" align="center" gap="sm">
-        <Loader size="xl" stroke={colors.primaryOne[0]} />
+        <Loader size="xl" stroke={colors.primaryTwo[0]} />
         {description && <Text align="center">{description}</Text>}
       </Flex>
     </Center>
diff --git a/packages/toolbox-ui/src/components/SmartAvatar.tsx b/packages/toolbox-ui/src/components/SmartAvatar.tsx
index 1d9bf23..7d85362 100644
--- a/packages/toolbox-ui/src/components/SmartAvatar.tsx
+++ b/packages/toolbox-ui/src/components/SmartAvatar.tsx
@@ -1,11 +1,19 @@
 import type { AvatarProps } from '@mantine/core'
 
-import { Avatar } from '@mantine/core'
+import { Avatar, createStyles } from '@mantine/core'
 import React from 'react'
 
 type SmartAvatarProps = AvatarProps
 
+const useStyles = createStyles((theme) => ({
+  placeholder: {
+    backgroundColor: theme.fn.rgba(theme.colors.primaryOne[7], 0.1),
+    color: theme.colors.primaryOne[7],
+  },
+}))
+
 export const SmartAvatar = ({ children, ...props }: SmartAvatarProps) => {
+  const { classes, cx } = useStyles()
   const label = children
     ? children
         .toString()
@@ -16,5 +24,15 @@ export const SmartAvatar = ({ children, ...props }: SmartAvatarProps) => {
         .toUpperCase()
     : undefined
 
-  return <Avatar {...props}>{label}</Avatar>
+  return (
+    <Avatar
+      {...props}
+      classNames={{
+        ...props.classNames,
+        placeholder: cx(classes.placeholder, props.classNames?.placeholder),
+      }}
+    >
+      {label}
+    </Avatar>
+  )
 }
diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index 62424e2..388ee6e 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -1,11 +1,13 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
 import { ConnectionsUtil } from '@animo/toolbox-core/src/utils/records/ConnectionsUtil'
-import { createStyles, Group, ScrollArea, Table, Text } from '@mantine/core'
+import { Box, createStyles, Flex, Group, ScrollArea, Table, Text } from '@mantine/core'
+import { IconDatabaseOff } from '@tabler/icons'
 import React from 'react'
 
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { EmptyState } from '../generic/table/EmptyState'
 import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface ConnectionsTableProps {
@@ -44,12 +46,19 @@ export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: Con
         <thead>
           <tr>
             <th className={classes.labelSize}>Connection</th>
-            <th className={classes.idSize}>Connection Id</th>
+            <th className={classes.idSize}>Connection</th>
             <th className={classes.stateSize}>State</th>
             <th className={classes.actionsSize} />
           </tr>
         </thead>
         <tbody>
+          {records.length === 0 ? (
+            <tr>
+              <td colSpan={4}>
+                <EmptyState message="No connections found" />
+              </td>
+            </tr>
+          ) : null}
           {records.map((record: ConnectionRecord) => {
             const isLoading = ConnectionsUtil.isConnectionWaitingForResponse(record)
             const isWaitingForAccept = ConnectionsUtil.isConnectionWaitingForAcceptInput(record)
diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
index 8d82846..108e6d5 100644
--- a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
+++ b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
@@ -8,6 +8,7 @@ import React from 'react'
 import { useCredentialsFormatData } from '../../contexts/CredentialFormatDataProvider'
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { EmptyState } from '../generic/table/EmptyState'
 import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface CredentialsTableProps {
@@ -50,6 +51,13 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
           </tr>
         </thead>
         <tbody>
+          {records.length === 0 ? (
+            <tr>
+              <td colSpan={3}>
+                <EmptyState message="No credentials found" />
+              </td>
+            </tr>
+          ) : null}
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
             const formattedCredential = formattedData.find((data) => data.id === record.id)
diff --git a/packages/toolbox-ui/src/components/generic/table/EmptyState.tsx b/packages/toolbox-ui/src/components/generic/table/EmptyState.tsx
new file mode 100644
index 0000000..3a653ee
--- /dev/null
+++ b/packages/toolbox-ui/src/components/generic/table/EmptyState.tsx
@@ -0,0 +1,33 @@
+import { Box, createStyles, Flex, Text } from '@mantine/core'
+import { IconDatabaseOff } from '@tabler/icons'
+import React from 'react'
+
+interface EmptyStateProps {
+  message: string
+}
+
+const useStyles = createStyles((theme) => ({
+  icon: {
+    backgroundColor: theme.fn.rgba(theme.colors.grayscaleOne[7], 0.1),
+    padding: theme.spacing.xs,
+    borderRadius: theme.radius.xl,
+    height: 48,
+    width: 48,
+    marginBottom: theme.spacing.xs,
+  },
+}))
+
+export const EmptyState = ({ message }: EmptyStateProps) => {
+  const { classes } = useStyles()
+
+  return (
+    <Flex direction="column" align="center" mt="xl">
+      <Box className={classes.icon}>
+        <Flex align="center" justify="center" h="100%" w="100%">
+          <IconDatabaseOff size={32} stroke={1} />
+        </Flex>
+      </Box>
+      <Text>{message}</Text>
+    </Flex>
+  )
+}
diff --git a/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx b/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
index dcb2db1..aae30c3 100644
--- a/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
+++ b/packages/toolbox-ui/src/components/generic/table/StatusBadge.tsx
@@ -1,17 +1,8 @@
 import type { BadgeProps } from '@mantine/core'
 
-import { Badge, createStyles } from '@mantine/core'
+import { Badge } 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 { classes, cx } = useStyles()
-
-  return <Badge {...props} className={cx(classes.badge, props.className)} />
+  return <Badge color="primaryTwo" variant="dot" {...props} />
 }
diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
index 708395f..7be1779 100644
--- a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
+++ b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -7,6 +7,7 @@ import React from 'react'
 import { useProofsFormatData } from '../../contexts/ProofsFormatDataProvider'
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { EmptyState } from '../generic/table/EmptyState'
 import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface ProofsTableProps {
@@ -47,12 +48,19 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
         <thead>
           <tr>
             <th className={classes.labelSize}>Connection</th>
-            <th className={classes.idSize}>Proof Id</th>
+            <th className={classes.idSize}>Proof</th>
             <th className={classes.stateSize}>State</th>
             <th className={classes.actionsSize} />
           </tr>
         </thead>
         <tbody>
+          {records.length === 0 ? (
+            <tr>
+              <td colSpan={4}>
+                <EmptyState message="No proofs found" />
+              </td>
+            </tr>
+          ) : null}
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id === record.connectionId)
             const formattedProof = formattedData.find((proof) => proof.id === record.id)
diff --git a/packages/toolbox-ui/src/layout/LayoutActions.tsx b/packages/toolbox-ui/src/layout/LayoutActions.tsx
deleted file mode 100644
index 6014d4b..0000000
--- a/packages/toolbox-ui/src/layout/LayoutActions.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Group } from '@mantine/core'
-import React from 'react'
-
-import { ColorSchemeSwitch } from './actions/ColorSchemeSwitch'
-import { LogoutAction } from './actions/LogoutAction'
-
-export const LayoutActions = () => {
-  return (
-    <Group position="apart">
-      <LogoutAction />
-      <ColorSchemeSwitch />
-    </Group>
-  )
-}
diff --git a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
index be19638..5dc41e0 100644
--- a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
+++ b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
@@ -1,13 +1,14 @@
 import type { Agent } from '@aries-framework/core'
 import type { TablerIcon } from '@tabler/icons'
 
-import { createStyles, Navbar } from '@mantine/core'
+import { createStyles, Group, Navbar } from "@mantine/core";
 import React, { useState } from 'react'
 
 import { useNavigation } from '../hooks/useNavigation'
 
-import { LayoutActions } from './LayoutActions'
 import { LayoutAvatar } from './LayoutAvatar'
+import { LogoutAction } from "./actions/LogoutAction";
+import { ColorSchemeSwitch } from "./actions/ColorSchemeSwitch";
 
 export interface NavigationItem {
   name: string
@@ -36,12 +37,14 @@ const useStyles = createStyles((theme, _params, getRef) => {
       fontSize: theme.fontSizes.sm,
       color: theme.colors.textOne[7],
       padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-      borderRadius: theme.radius.sm,
+      // borderRadius: theme.radius.sm,
       fontWeight: 500,
 
+      borderLeft: '4px solid transparent',
+
       '&:hover': {
-        backgroundColor: theme.fn.rgba(theme.colors.primaryOne[7], 0.1),
-        color: theme.colors.textOne[7],
+        backgroundColor: theme.fn.rgba(theme.colors.primaryTwo[7], 0.05),
+        borderLeft: `4px solid ${theme.fn.rgba(theme.colors.primaryTwo[7], 0.7)}`,
 
         [`& .${icon}`]: {
           color: theme.colors.textOne[7],
@@ -57,16 +60,16 @@ const useStyles = createStyles((theme, _params, getRef) => {
 
     linkActive: {
       '&, &:hover': {
-        backgroundColor: theme.colors.primaryOne[7],
-        color: theme.colors.textTwo[7],
-        [`& .${icon}`]: {
-          color: theme.colors.textTwo[7],
-        },
+        backgroundColor: theme.fn.rgba(theme.colors.primaryTwo[7], 0.1),
+        borderLeft: `4px solid ${theme.colors.primaryTwo[7]}`,
       },
     },
 
+    layoutAvatar: {
+      paddingBottom: theme.spacing.xl,
+    },
+
     footer: {
-      borderTop: `1px solid ${theme.colors.backgroundOne[3]}`,
       paddingTop: theme.spacing.md,
     },
   }
@@ -78,12 +81,12 @@ export const LayoutNavBar = ({ navigationItems, agent }: LayoutNavigationProps)
   const [activeIndex, setActiveIndex] = useState(0)
 
   return (
-    <Navbar p="md" width={{ sm: 300 }} className={classes.navbar}>
-      <Navbar.Section>
+    <Navbar py="md" width={{ sm: 300 }} className={classes.navbar}>
+      <Navbar.Section mx="md" className={classes.layoutAvatar}>
         <LayoutAvatar agent={agent} />
       </Navbar.Section>
 
-      <Navbar.Section grow mt="xl">
+      <Navbar.Section grow mt="xs">
         {navigationItems.map((item, index) => (
           <a
             className={cx(classes.link, { [classes.linkActive]: index === activeIndex })}
@@ -101,8 +104,11 @@ export const LayoutNavBar = ({ navigationItems, agent }: LayoutNavigationProps)
         ))}
       </Navbar.Section>
 
-      <Navbar.Section className={classes.footer}>
-        <LayoutActions />
+      <Navbar.Section className={classes.footer} mx="md">
+        <Group position="apart">
+          <LogoutAction />
+          <ColorSchemeSwitch />
+        </Group>
       </Navbar.Section>
     </Navbar>
   )
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts b/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts
index 77c36b0..0978647 100644
--- a/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts
+++ b/packages/toolbox-ui/src/layout/themes/AnimoColorShades.ts
@@ -3,7 +3,7 @@ import type { ColorShade } from './AnimoVariantTheme'
 export 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,
+  animoCoral: ['#FFFFFF', '#FFF5F5', '#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,
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts b/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts
index 5ace26f..9cae978 100644
--- a/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts
+++ b/packages/toolbox-ui/src/layout/themes/AnimoDarkTheme.ts
@@ -4,7 +4,8 @@ import { animoColors } from './AnimoColorShades'
 
 export const animoDarkTheme: AnimoVariantTheme = {
   primaryOne: animoColors.animoWhite,
-  primaryTwo: animoColors.animoWhite, // TODO: Add a second primary color
+  primaryTwo: animoColors.animoBlue,
+  primaryThree: animoColors.animoBlue,
   secondaryOne: animoColors.animoBlack,
   secondaryTwo: animoColors.animoBlack, // TODO: Add a second secondary color
 
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts b/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts
index 847df7d..002b805 100644
--- a/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts
+++ b/packages/toolbox-ui/src/layout/themes/AnimoLightTheme.ts
@@ -4,7 +4,8 @@ import { animoColors } from './AnimoColorShades'
 
 export const animoLightTheme: AnimoVariantTheme = {
   primaryOne: animoColors.animoBlack,
-  primaryTwo: animoColors.animoBlack, // TODO: Add a second primary color
+  primaryTwo: animoColors.animoCoral,
+  primaryThree: animoColors.animoBlue,
   secondaryOne: animoColors.animoWhite,
   secondaryTwo: animoColors.animoWhite, // TODO: Add a second secondary color
 
diff --git a/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts b/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts
index 190e375..8007618 100644
--- a/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts
+++ b/packages/toolbox-ui/src/layout/themes/AnimoVariantTheme.ts
@@ -5,6 +5,7 @@ export type ColorShade = Tuple<string, 8>
 export type AnimoVariantTheme = {
   primaryOne: ColorShade
   primaryTwo: ColorShade
+  primaryThree: ColorShade
   secondaryOne: ColorShade
   secondaryTwo: ColorShade
   backgroundOne: ColorShade
diff --git a/packages/toolbox-ui/src/modals/PresentInviteModal.tsx b/packages/toolbox-ui/src/modals/PresentInviteModal.tsx
index 9eac63a..7de6dbd 100644
--- a/packages/toolbox-ui/src/modals/PresentInviteModal.tsx
+++ b/packages/toolbox-ui/src/modals/PresentInviteModal.tsx
@@ -1,7 +1,9 @@
 import type { ContextModalProps } from '@mantine/modals'
 
 import { Box, Center, createStyles, Divider, Text } from '@mantine/core'
+import { useClipboard } from '@mantine/hooks'
 import { showNotification } from '@mantine/notifications'
+import { IconCopy } from '@tabler/icons'
 import { QRCodeSVG } from 'qrcode.react'
 import React from 'react'
 
@@ -16,11 +18,12 @@ const useStyles = createStyles((theme) => ({
 }))
 
 export const PresentInviteModal = ({ innerProps }: ContextModalProps<{ inviteUrl: string }>) => {
+  const clipBoard = useClipboard()
   const { classes } = useStyles()
   const { inviteUrl } = innerProps
 
   const copyToClipboard = async () => {
-    await window.navigator.clipboard.writeText(inviteUrl)
+    clipBoard.copy(inviteUrl)
 
     showNotification({
       title: 'Invitation copied to clipboard',
@@ -38,11 +41,11 @@ export const PresentInviteModal = ({ innerProps }: ContextModalProps<{ inviteUrl
         </Box>
       </Center>
       <Text mt="xs" align="center">
-        Scan this QR code with your mobile device.
+        Scan the QR-code with your wallet.
       </Text>
-      <Divider label="OR" labelPosition="center" mb="xs" />
+      <Divider label="OR" labelPosition="center" mb="lg" mt="md" />
       <PrimaryButton fullWidth onClick={copyToClipboard}>
-        Copy url
+        <IconCopy size={16} /> Copy url
       </PrimaryButton>
     </>
   )
diff --git a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
index 48b034b..36f0eec 100644
--- a/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
+++ b/packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx
@@ -6,12 +6,12 @@ import { Loading } from '../components/Loading'
 import { SmartAvatar } from '../components/SmartAvatar'
 import { useAgentManager } from '../contexts/AgentManagerContext'
 import { useNavigation } from '../hooks/useNavigation'
+import { ColorSchemeSwitch } from '../layout/actions/ColorSchemeSwitch'
 
 const useStyles = createStyles((theme) => ({
   card: {
     backgroundColor: theme.colors.secondaryOne[6],
     boxShadow: theme.shadows.xs,
-    transition: 'background-color 0.2s ease',
 
     '&:hover': {
       backgroundColor: theme.colors.secondaryOne[5],
@@ -50,16 +50,19 @@ export const AgentSelectionScreen = () => {
 
   return (
     <Container mt={20}>
-      <Title size="h2" mb="md">
-        Agents
-      </Title>
+      <Flex justify="space-between">
+        <Title size="h2" mb="md">
+          Agents
+        </Title>
+        <ColorSchemeSwitch />
+      </Flex>
       <Flex gap="md" wrap="wrap">
         {agents.map((agent) => (
           <UnstyledButton key={agent.id} onClick={() => switchToAgent(agent.id)}>
-            <Card h={80} w={220} className={classes.card} radius="lg">
+            <Card h={80} w={220} className={classes.card} radius="md">
               <Flex align="center" h="100%">
                 <Group noWrap>
-                  <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={48} radius="xl">
+                  <SmartAvatar src={agent.agentConfig.connectionImageUrl} size={48} radius="md">
                     {agent.agentConfig.label}
                   </SmartAvatar>
                   <Box>
diff --git a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
index ccf6e1d..e8a50b2 100644
--- a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
+++ b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
@@ -1,8 +1,9 @@
 import { useAgent, useConnections } from '@aries-framework/react-hooks'
-import { Box, Flex, TextInput, Title } from '@mantine/core'
+import { Box, createStyles, Flex, TextInput, Title, Tooltip } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import { openContextModal } from '@mantine/modals'
 import { showNotification } from '@mantine/notifications'
+import { IconPlus } from '@tabler/icons'
 import React from 'react'
 
 import { Loading } from '../../../components/Loading'

From 62eb4931e29b9b3dbc158a1ac7a81cf82e61ea0e Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 11 Jan 2023 11:01:59 +0100
Subject: [PATCH 7/8] fix: Fixed some linting errors

Signed-off-by: Tom Lanser <tom@animo.id>
---
 .../src/components/connections/ConnectionsTable.tsx         | 3 +--
 packages/toolbox-ui/src/layout/LayoutNavBar.tsx             | 6 +++---
 .../src/pages/agent/connections/ConnectionsScreen.tsx       | 3 +--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index 388ee6e..69e8c56 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -1,8 +1,7 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
 import { ConnectionsUtil } from '@animo/toolbox-core/src/utils/records/ConnectionsUtil'
-import { Box, createStyles, Flex, Group, ScrollArea, Table, Text } from '@mantine/core'
-import { IconDatabaseOff } from '@tabler/icons'
+import { createStyles, Group, ScrollArea, Table, Text } from '@mantine/core'
 import React from 'react'
 
 import { RecordActions } from '../RecordActions'
diff --git a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
index 5dc41e0..0a3c6f8 100644
--- a/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
+++ b/packages/toolbox-ui/src/layout/LayoutNavBar.tsx
@@ -1,14 +1,14 @@
 import type { Agent } from '@aries-framework/core'
 import type { TablerIcon } from '@tabler/icons'
 
-import { createStyles, Group, Navbar } from "@mantine/core";
+import { createStyles, Group, Navbar } from '@mantine/core'
 import React, { useState } from 'react'
 
 import { useNavigation } from '../hooks/useNavigation'
 
 import { LayoutAvatar } from './LayoutAvatar'
-import { LogoutAction } from "./actions/LogoutAction";
-import { ColorSchemeSwitch } from "./actions/ColorSchemeSwitch";
+import { ColorSchemeSwitch } from './actions/ColorSchemeSwitch'
+import { LogoutAction } from './actions/LogoutAction'
 
 export interface NavigationItem {
   name: string
diff --git a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
index e8a50b2..ccf6e1d 100644
--- a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
+++ b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
@@ -1,9 +1,8 @@
 import { useAgent, useConnections } from '@aries-framework/react-hooks'
-import { Box, createStyles, Flex, TextInput, Title, Tooltip } from '@mantine/core'
+import { Box, Flex, TextInput, Title } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import { openContextModal } from '@mantine/modals'
 import { showNotification } from '@mantine/notifications'
-import { IconPlus } from '@tabler/icons'
 import React from 'react'
 
 import { Loading } from '../../../components/Loading'

From 288a18655c9ee6877ca5bd33ba8fe09a5dbe8991 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 11 Jan 2023 12:39:06 +0100
Subject: [PATCH 8/8] refactor: Processed the PR comments

Signed-off-by: Tom Lanser <tom@animo.id>
---
 .../src/components/connections/ConnectionsTable.tsx           | 4 ++--
 .../src/components/credentials/CredentialsTable.tsx           | 4 ++--
 packages/toolbox-ui/src/components/proofs/ProofsTable.tsx     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index 69e8c56..5a5d725 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -51,13 +51,13 @@ export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: Con
           </tr>
         </thead>
         <tbody>
-          {records.length === 0 ? (
+          {records.length === 0 && (
             <tr>
               <td colSpan={4}>
                 <EmptyState message="No connections found" />
               </td>
             </tr>
-          ) : null}
+          )}
           {records.map((record: ConnectionRecord) => {
             const isLoading = ConnectionsUtil.isConnectionWaitingForResponse(record)
             const isWaitingForAccept = ConnectionsUtil.isConnectionWaitingForAcceptInput(record)
diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
index 108e6d5..6c6aa80 100644
--- a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
+++ b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
@@ -51,13 +51,13 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
           </tr>
         </thead>
         <tbody>
-          {records.length === 0 ? (
+          {records.length === 0 && (
             <tr>
               <td colSpan={3}>
                 <EmptyState message="No credentials found" />
               </td>
             </tr>
-          ) : null}
+          )}
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
             const formattedCredential = formattedData.find((data) => data.id === record.id)
diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
index 7be1779..d7b7f99 100644
--- a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
+++ b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -54,13 +54,13 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
           </tr>
         </thead>
         <tbody>
-          {records.length === 0 ? (
+          {records.length === 0 && (
             <tr>
               <td colSpan={4}>
                 <EmptyState message="No proofs found" />
               </td>
             </tr>
-          ) : null}
+          )}
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id === record.connectionId)
             const formattedProof = formattedData.find((proof) => proof.id === record.id)