Merge pull request #54 from animo/feature/TBX-62

feat: Implemented some Animo colors

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`

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,23 +16,6 @@ interface ToolboxAppProps {
   router: RouterProviderProps['router']
 }
 
-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'],
-  },
-
-  fontFamily: 'Montserrat, sans-serif',
-})
-
 export const ToolboxApp = ({ router }: ToolboxAppProps) => {
   const { config, setColorScheme } = useConfigUnsafe()
 

packages/toolbox-ui/src/ToolboxTheme.ts

@@ -0,0 +1,42 @@
+import type { AnimoVariantTheme } from './layout/themes'
+import type { ColorScheme, MantineThemeOverride, Tuple } from '@mantine/core'
+
+import { animoLightTheme, animoDarkTheme } from './layout/themes'
+
+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],
+        },
+      }),
+    },
+
+    Modal: {
+      styles: () => ({
+        title: {
+          fontWeight: 700,
+        },
+      }),
+    },
+  },
+})
+
+declare module '@mantine/core' {
+  export interface MantineThemeColorsOverride {
+    colors: Record<keyof AnimoVariantTheme, Tuple<string, 10>>
+  }
+}

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>
   )

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

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

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

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

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

@@ -1,8 +1,8 @@
-import { ActionIcon, Group, Loader } from '@mantine/core'
+import { ActionIcon, createStyles, 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
@@ -11,29 +11,37 @@ 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" onClick={onAccept}>
+      <PrimaryButton key="accept" size="xs" variant="light" onClick={onAccept}>
         Accept
       </PrimaryButton>
     ),
 
     onDecline && (
-      <DangerButton key="reject" size="xs" onClick={onDecline}>
+      <SecondaryButton key="reject" size="xs" onClick={onDecline}>
         Decline
-      </DangerButton>
+      </SecondaryButton>
     ),
 
     onDelete && (
-      <ActionIcon key="delete" color="red" onClick={onDelete}>
-        <IconTrash size={16} stroke={1.5} />
+      <ActionIcon key="delete" onClick={onDelete} variant="transparent">
+        <IconTrash size={16} stroke={1.5} className={classes.trashIcon} />
       </ActionIcon>
     ),
   ].filter(Boolean)
 
   return (
-    <Group spacing={0} position="right">
+    <Group spacing={4} position="right">
       {isLoading ? <Loader size={20} /> : actions}
     </Group>
   )

packages/toolbox-ui/src/components/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>
+  )
 }

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 { 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 { EmptyState } from '../generic/table/EmptyState'
+import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface ConnectionsTableProps {
   records: ConnectionRecord[]
@@ -36,20 +38,26 @@ const useStyles = createStyles(() => ({
 
 export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: ConnectionsTableProps) => {
   const { classes } = useStyles()
-  const theme = useMantineTheme()
 
   return (
     <ScrollArea>
       <Table verticalSpacing="sm" className={classes.table}>
         <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>
+          )}
           {records.map((record: ConnectionRecord) => {
             const isLoading = ConnectionsUtil.isConnectionWaitingForResponse(record)
             const isWaitingForAccept = ConnectionsUtil.isConnectionWaitingForAcceptInput(record)
@@ -73,7 +81,7 @@ export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: Con
                   </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

packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx

@@ -2,12 +2,14 @@ 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 { EmptyState } from '../generic/table/EmptyState'
+import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface CredentialsTableProps {
   records: CredentialExchangeRecord[]
@@ -36,7 +38,6 @@ const useStyles = createStyles(() => ({
 
 export const CredentialsTable = ({ records, connections, onDelete, onAccept, onDecline }: CredentialsTableProps) => {
   const { classes } = useStyles()
-  const theme = useMantineTheme()
   const { formattedData } = useCredentialsFormatData()
 
   return (
@@ -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>
+          )}
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
             const formattedCredential = formattedData.find((data) => data.id === record.id)
@@ -70,7 +78,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