From 3cf309b7cdc06b1ab3fc024170809982716e9c64 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 4 Jan 2023 13:57:43 +0100
Subject: [PATCH] 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          |  5 ++---
 .../credentials/CredentialsTable.tsx          |  5 ++++-
 .../components/generic/buttons/Buttons.tsx    |  4 ++++
 .../components/generic/table/StatusBadge.tsx  | 10 ++++++++++
 .../src/components/proofs/ProofsTable.tsx     |  3 ++-
 .../src/pages/AgentSelectionScreen.tsx        | 19 ++++++++++++++++---
 7 files changed, 41 insertions(+), 11 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 b50119f..7ff1db2 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -6,6 +6,7 @@ import React from 'react'
 
 import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
+import { StatusBadge } from '../generic/table/StatusBadge'
 
 interface ConnectionsTableProps {
   records: ConnectionRecord[]
@@ -71,9 +72,7 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
                   </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..4f733c1 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 { StatusBadge } from "../generic/table/StatusBadge";
 
 interface CredentialsTableProps {
   records: CredentialExchangeRecord[]
@@ -70,7 +71,9 @@ 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..24ac616 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 { StatusBadge } from "../generic/table/StatusBadge";
 
 interface ProofsTableProps {
   records: ProofExchangeRecord[]
@@ -80,7 +81,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}