Tweak styles: basic Card component, Tx and Reward items, tab buttons

src/components/EditAccountModal.tsx

@@ -346,7 +346,7 @@ function EditAccountModal({
               errors={errors}
               isSubmitted={isSubmitted}
             />
-            <Text color="yellow" my={4} fontSize="xs" textAlign="center">
+            <Text color="orange" my={4} fontSize="xs" textAlign="center">
               Change the parameters below on your own risk.
               <br />
               Changing any of them will change the account&apos;s address.

src/components/KeyManager.tsx

@@ -290,7 +290,7 @@ function KeyManager({ isOpen, onClose }: KeyManagerProps): JSX.Element {
                           float="right"
                           display="flex"
                           alignItems="center"
-                          colorScheme="yellow"
+                          colorScheme="orange"
                           gap={1}
                         >
                           <IconDeviceUsb size={12} />
@@ -427,7 +427,7 @@ function KeyManager({ isOpen, onClose }: KeyManagerProps): JSX.Element {
                             fontWeight="normal"
                             fontSize="xx-small"
                             ml={1}
-                            colorScheme="yellow"
+                            colorScheme="orange"
                           >
                             {keys.length === 1 &&
                               keys[0] &&

src/components/NodeStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge, Box, Card, CardBody } from '@chakra-ui/react';
+import { Badge, Box, Card, CardBody, Text } from '@chakra-ui/react';
 
 import useNetworks from '../store/useNetworks';
 import useNetworkStatus from '../store/useNetworkStatus';
@@ -13,14 +13,15 @@ function NodeStatusBadge(): JSX.Element | null {
     return (
       <Card
         variant="outline"
-        borderColor="red"
+        borderColor="brand.red"
         fontSize="sm"
         width="100%"
         mt={2}
       >
         <CardBody>
-          Error: {error.message}
-          <br />
+          <Text textColor="brand.red" mb={2}>
+            Error: {error.message}
+          </Text>
           Please choose another public RPC.
         </CardBody>
       </Card>
@@ -31,7 +32,7 @@ function NodeStatusBadge(): JSX.Element | null {
     return (
       <Card
         variant="outline"
-        borderColor="grey"
+        borderColor="brand.gray"
         fontSize="sm"
         width="100%"
         mt={2}

src/components/RewardListItem.tsx

@@ -30,8 +30,8 @@ function RewardListItem({
 }: RewardListItemProps): JSX.Element {
   return (
     <Card
-      py={1}
-      _hover={{ cursor: 'pointer', bgColor: 'brand.modalGreen' }}
+      variant="list"
+      _hover={{ cursor: 'default', bgColor: 'brand.modalGreen' }}
       borderBottom="2px solid"
       borderColor="brand.modalGreen"
     >

src/components/RewardsList.tsx

@@ -39,7 +39,7 @@ function RewardsList({
         }}
       >
         {account.rewards.length === 0 && (
-          <Text color="grey">
+          <Text color="grey" fontSize="sm" p={2}>
             No rewards for this account.
             <br />
             Check out{' '}

src/components/TxList.tsx

@@ -41,13 +41,13 @@ function TxList({
       >
         {txs.length === 0 && (
           <>
-            <Text color="grey">
+            <Text color="grey" fontSize="sm" p={2}>
               No transactions yet.
               <br />
               <br />
               To send transactions you need to:
             </Text>
-            <OrderedList color="grey">
+            <OrderedList color="grey" pl={3} fontSize="sm">
               <ListItem>have some tokens on the balance,</ListItem>
               <ListItem>initiate a spawn transaction first.</ListItem>
             </OrderedList>

src/components/TxListItem.tsx

@@ -75,7 +75,7 @@ function TxListItem({
       : 'Unknown fee';
   return (
     <Card
-      py={1}
+      variant="list"
       _hover={{ cursor: 'pointer', bgColor: 'brand.modalGreen' }}
       borderBottom="2px solid"
       borderColor="brand.modalGreen"

src/components/sendTx/MultiSigSpawn.tsx

@@ -31,7 +31,7 @@ function MultiSigSpawn({
 
   return (
     <>
-      <Text fontSize="sm" mt={2} textAlign="center" color="brand.gray">
+      <Text fontSize="sm" textAlign="center" color="brand.gray">
         Spawn arguments are taken from Account settings.
       </Text>
       <FormInputViewOnly

src/components/sendTx/SingleSigSpawn.tsx

@@ -26,7 +26,7 @@ function SingleSigSpawn({
 
   return (
     <>
-      <Text fontSize="sm" mt={2} textAlign="center" color="brand.gray">
+      <Text fontSize="sm" textAlign="center" color="brand.gray">
         Spawn arguments are taken from Account settings.
       </Text>
       <FormInputViewOnly label="Public Key" value={args.PublicKey} />

src/components/sendTx/VaultSpawn.tsx

@@ -40,7 +40,7 @@ function VaultSpawn({
 
   return (
     <>
-      <Text fontSize="sm" mt={2} textAlign="center" color="brand.gray">
+      <Text fontSize="sm" textAlign="center" color="brand.gray">
         Spawn arguments are taken from Account settings.
       </Text>
       <FormInputViewOnly label="Owner address" value={String(args.Owner)} />

src/screens/WalletScreen.tsx

@@ -126,7 +126,7 @@ function WalletScreen(): JSX.Element {
         {O.mapWithDefault(
           currentAccount,
           accountList.length > 0 ? (
-            <Text color="yellow" align="center">
+            <Text color="orange" align="center">
               Please switch account to view balance.
             </Text>
           ) : (
@@ -257,7 +257,7 @@ function WalletScreen(): JSX.Element {
             borderRadius={6}
             position="relative"
           >
-            <TabList h={14} justifyContent="center" border="none">
+            <TabList h={16} justifyContent="center">
               <Tab>Transactions</Tab>
               <Tab>Rewards</Tab>
             </TabList>

src/theme/card.ts

@@ -9,24 +9,18 @@ const baseStyle = definePartsStyle({
     backgroundColor: 'brand.darkGreen',
     shadow: 'none',
   },
-  header: {
-    paddingBottom: '2px',
+});
+
+const list = definePartsStyle({
+  container: {
+    backgroundColor: 'brand.darkGreen',
+    shadow: 'none',
+    borderRadius: '0px',
   },
   body: {
-    paddingTop: '2px',
-  },
-  footer: {
-    paddingTop: '2px',
+    py: 2,
   },
 });
 
-const sizes = {
-  md: definePartsStyle({
-    container: {
-      borderRadius: '0px',
-    },
-  }),
-};
-
-const cardTheme = defineMultiStyleConfig({ baseStyle, sizes });
+const cardTheme = defineMultiStyleConfig({ baseStyle, variants: { list } });
 export default cardTheme;