Merge pull request #164 from fedimint/pill-colors

Clean up theme colors & component hex values
fedimint · Aug 31, 2023 · dca2a26 · dca2a26
2 parents c48f7fc + d26ecc9
commit dca2a26
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 218 deletions.
diff --git a/apps/gateway-ui/src/components/Input.tsx b/apps/gateway-ui/src/components/Input.tsx
diff --git a/apps/gateway-ui/src/components/index.tsx b/apps/gateway-ui/src/components/index.tsx
@@ -2,7 +2,6 @@ export { GatewayCard } from './GatewayCard';
 export { WithdrawCard } from './WithdrawCard';
 export { FederationCard } from './FederationCard';
 export { Header } from './Header';
-export { Input } from './Input';
 export { ConnectFederation } from './ConnectFederation';
 export { TabHeader } from './TabHeader';
 export { InfoCard } from './InfoCard';

diff --git a/apps/guardian-ui/src/admin/FederationAdmin.tsx b/apps/guardian-ui/src/admin/FederationAdmin.tsx
@@ -13,6 +13,7 @@ import {
   Box,
   Icon,
   Text,
+  useTheme,
 } from '@chakra-ui/react';
 import { CopyInput } from '@fedimint/ui';
 import { useTranslation } from '@fedimint/utils';
@@ -37,6 +38,7 @@ interface PeerData {
 }
 
 export const FederationAdmin: React.FC = () => {
+  const theme = useTheme();
   const { api } = useAdminContext();
   const [versions, setVersions] = useState<Versions>();
   const [epochCount, setEpochCount] = useState<number>();
@@ -75,19 +77,19 @@ export const FederationAdmin: React.FC = () => {
     }
   }, [config, api]);
 
-  const [guardiansStatusText, statusColor] = useMemo(() => {
+  const [guardiansStatusText, statusType] = useMemo(() => {
     const online = status?.federation ? status.federation.peers_online + 1 : 1;
     const offline = status?.federation ? status.federation.peers_offline : 0;
     const totalPeers = online + offline;
     const onlinePercentage = online / totalPeers;
-    const statusColor: 'green' | 'yellow' | 'red' =
+    const statusType: 'success' | 'warning' | 'error' =
       onlinePercentage === 1
-        ? 'green'
+        ? 'success'
         : onlinePercentage >= 2 / 3
-        ? 'yellow'
-        : 'red';
+        ? 'warning'
+        : 'error';
     const guardiansStatusText = `${online} / ${totalPeers}`;
-    return [guardiansStatusText, statusColor];
+    return [guardiansStatusText, statusType];
   }, [status]);
 
   const data = useMemo(() => {
@@ -124,35 +126,44 @@ export const FederationAdmin: React.FC = () => {
         <Flex>
           <Box>
             <Text
-              color='#111827'
               fontSize='24px'
               fontWeight='600'
               lineHeight='32px'
               textTransform='capitalize'
             >
               {config?.client_config.meta.federation_name}
             </Text>
-            <Text color='#111827' fontSize='14px' lineHeight='32px'>
+            <Text fontSize='14px' lineHeight='32px'>
               {t('federation-dashboard.placeholder-fed-description')}
             </Text>
             <Flex gap='12px' mt='13px'>
               <Pill
                 text='Guardians'
-                status={`${guardiansStatusText}`}
-                color={statusColor}
+                status={guardiansStatusText}
+                type={statusType}
               />
-              <Pill text='Server' status='Healthy' color='green' />
-              <Pill text='Uptime' status='100%' color='green' />
+              <Pill text='Server' status='Healthy' type='success' />
+              <Pill text='Uptime' status='100%' type='success' />
             </Flex>
             <Box mt='38px'>
-              <Text mb='6px' fontSize='14px' fontWeight='500' color='#344054'>
+              <Text
+                mb='6px'
+                fontSize='14px'
+                fontWeight='500'
+                color={theme.colors.gray[700]}
+              >
                 {t('federation-dashboard.invite-members')}
               </Text>
               <CopyInput
                 value={inviteCode}
                 buttonLeftIcon={<Icon as={CopyIcon} />}
               />
-              <Text mt='6px' mb='25px' fontSize='14px' color='#6B7280'>
+              <Text
+                mt='6px'
+                mb='25px'
+                fontSize='14px'
+                color={theme.colors.gray[500]}
+              >
                 {t('federation-dashboard.invite-members-prompt')}
               </Text>
             </Box>

diff --git a/apps/guardian-ui/src/components/Epochs.tsx b/apps/guardian-ui/src/components/Epochs.tsx
@@ -31,7 +31,7 @@ const Epoch: FC<EpochProps> = ({ epochCount, pegin, pegout, gatewayTrxs }) => {
         pt='4px'
         pb='8px'
         fontWeight='semibold'
-        color='#059669'
+        color={theme.colors.success[500]}
         fontSize='md'
       >
         #{epochCount}

diff --git a/apps/guardian-ui/src/components/Pill.tsx b/apps/guardian-ui/src/components/Pill.tsx
@@ -1,48 +1,37 @@
 import React, { FC } from 'react';
-import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Box, Text, useColorModeValue, useTheme } from '@chakra-ui/react';
 
 interface PillProp {
   text: string;
   status: string;
-  color?: 'green' | 'red' | 'yellow';
+  type?: 'error' | 'warning' | 'success';
 }
 
 // Have to update pill color based on quorum.
-export const Pill: FC<PillProp> = ({ text, status, color }) => {
-  const greenBgColor = useColorModeValue('#34D399', '#065F46');
-  const greenTextColor = useColorModeValue('#065F46', '#34D399');
-  const redBgColor = useColorModeValue('#F87171', '#991B1B');
-  const redTextColor = useColorModeValue('#991B1B', '#F87171');
-  const yellowBgColor = useColorModeValue('#FBBF24', '#B45309');
-  const yellowTextColor = useColorModeValue('#B45309', '#FBBF24');
-  const defaultBgColor = useColorModeValue('#D1FAE5', '#065F46');
-  const defaultTextColor = useColorModeValue('#065F46', '#D1FAE5');
-  const colors = () => {
-    switch (color) {
-      case 'green':
-        return { bgColor: greenBgColor, textColor: greenTextColor };
-      case 'red':
-        return { bgColor: redBgColor, textColor: redTextColor };
-      case 'yellow':
-        return { bgColor: yellowBgColor, textColor: yellowTextColor };
-      default:
-        return { bgColor: defaultBgColor, textColor: defaultTextColor };
-    }
-  };
-  const { bgColor, textColor } = colors();
+export const Pill: FC<PillProp> = ({ text, status, type }) => {
+  const theme = useTheme();
+  const color = theme.colors[type || 'gray'];
+  const labelColor = useColorModeValue(
+    theme.colors.gray[500],
+    theme.colors.gray[400]
+  );
+  const bgColor = useColorModeValue(type ? color[50] : color[100], color[700]);
+  const textColor = useColorModeValue(color[700], color[200]);
+  const dotColor = useColorModeValue(color[500], color[400]);
   return (
     <Flex gap='8px' alignItems='center'>
-      <Text color={defaultTextColor} lineHeight='27px' fontSize='14px'>
+      <Text color={labelColor} lineHeight='20px' fontSize='14px'>
         {text}
       </Text>
       <Flex
+        h='22px'
+        p='0 8px'
         gap='6px'
-        p='2px 10px'
-        borderRadius='32px'
+        borderRadius='10px'
         alignItems='center'
         bgColor={bgColor}
       >
-        <Box bgColor={textColor} h='8px' w='8px' borderRadius='32px'></Box>
+        <Box bgColor={dotColor} h='6px' w='6px' borderRadius='100%' />
         <Text
           color={textColor}
           fontSize='12px'

diff --git a/apps/guardian-ui/src/components/SetupProgress.tsx b/apps/guardian-ui/src/components/SetupProgress.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Center, Flex, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Text, useTheme } from '@chakra-ui/react';
 import { ReactComponent as CheckIcon } from '../assets/svgs/white-check.svg';
 import { StepState } from '../setup/types';
 
@@ -10,6 +10,8 @@ interface StepProps {
 }
 
 const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
+  const theme = useTheme();
+
   const colorState = (
     inActiveColor: string,
     activeColor: string,
@@ -33,20 +35,32 @@ const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
         <Box
           w='100%'
           h='2px'
-          bgColor={state === StepState.InActive ? '#EAECF0' : '#1570ef'}
+          bgColor={
+            state === StepState.InActive
+              ? theme.colors.gray[200]
+              : theme.colors.blue[600]
+          }
         ></Box>
         <Flex>
           <Center
             borderRadius={'50%'}
             h={state === StepState.Active ? '36px' : '24px'}
             w={state === StepState.Active ? '36px' : '24px'}
-            bgColor={colorState('transparent', '#EFF8FF', 'transparent')}
+            bgColor={colorState(
+              'transparent',
+              theme.colors.blue[50],
+              'transparent'
+            )}
           >
             <Center
               borderRadius='50%'
               h='24px'
               w='24px'
-              bgColor={colorState('#F2F4F7', '#1570ef', '#1570ef')}
+              bgColor={colorState(
+                theme.colors.gray[100],
+                theme.colors.blue[600],
+                theme.colors.blue[600]
+              )}
             >
               {state === StepState.Completed ? (
                 <CheckIcon />
@@ -66,7 +80,11 @@ const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
         textTransform='capitalize'
         fontWeight='600'
         fontSize='14px'
-        color={colorState('#344054', '#1570ef', '#1570ef')}
+        color={colorState(
+          theme.colors.gray[700],
+          theme.colors.blue[600],
+          theme.colors.blue[600]
+        )}
         whiteSpace='nowrap'
         mr={margin}
       >
@@ -77,6 +95,8 @@ const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
 };
 
 const InitialStep: React.FC<Pick<StepProps, 'state'>> = ({ state }) => {
+  const theme = useTheme();
+
   return (
     <Flex
       flexDir='column'
@@ -89,9 +109,14 @@ const InitialStep: React.FC<Pick<StepProps, 'state'>> = ({ state }) => {
           borderRadius='50%'
           h={state === StepState.Active ? '36px' : '24px'}
           w={state === StepState.Active ? '36px' : '24px'}
-          bgColor='#EFF8FF'
+          bgColor={theme.colors.blue[50]}
         >
-          <Center borderRadius='50%' h='24px' w='24px' bgColor='#1570EF'>
+          <Center
+            borderRadius='50%'
+            h='24px'
+            w='24px'
+            bgColor={theme.colors.blue[600]}
+          >
             {state === StepState.Completed ? (
               <CheckIcon />
             ) : (
@@ -109,7 +134,11 @@ const InitialStep: React.FC<Pick<StepProps, 'state'>> = ({ state }) => {
         textTransform='capitalize'
         fontWeight='600'
         fontSize='14px'
-        color={state === StepState.InActive ? '#344054' : '#1570ef'}
+        color={
+          state === StepState.InActive
+            ? theme.colors.gray[700]
+            : theme.colors.blue[600]
+        }
         whiteSpace='nowrap'
         mr='-42px'
       >