alleslabs · jennieramida · May 23, 2023 · May 22, 2023 · May 22, 2023 · May 22, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
 
 ### Bug fixes

diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
@@ -64,7 +64,7 @@ export const resendTx = ({
         receiptInfo: {
           header: "Transaction Completed",
           description: (
-            <Text fontWeight="700">
+            <Text fontWeight={700}>
               Your transaction was successfully resent.
             </Text>
           ),

diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
@@ -89,7 +89,7 @@ export const submitProposalTx = ({
           headerIcon: (
             <CustomIcon
               name="submit-proposal-solid"
-              color="pebble.600"
+              color="gray.600"
               boxSize="5"
             />
           ),

diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
@@ -95,7 +95,7 @@ export const uploadContractTx = ({
             </>
           ),
           headerIcon: (
-            <CustomIcon name="upload-cloud" boxSize="5" color="pebble.600" />
+            <CustomIcon name="upload-cloud" boxSize="5" color="gray.600" />
           ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",

diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx
@@ -8,7 +8,7 @@ export const AccordionStepperItem = () => (
       h="31px"
       right="45%"
       bottom="9px"
-      background="pebble.600"
+      background="gray.600"
       position="absolute"
       visibility="hidden"
       zIndex={0}
@@ -18,7 +18,7 @@ export const AccordionStepperItem = () => (
       borderRadius="full"
       h="10px"
       w="10px"
-      borderColor="pebble.600"
+      borderColor="gray.600"
       borderWidth="1px"
       position="relative"
       zIndex={1}

diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
@@ -14,8 +14,8 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
     <Text
       textAlign="right"
       mr={3}
-      color={enabled ? "honeydew.main" : "pebble.500"}
-      fontWeight="600"
+      color={enabled ? "accent.main" : "text.disabled"}
+      fontWeight={700}
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
       minW={16}

diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
@@ -24,14 +24,14 @@ export const ButtonCard = ({
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}
-    bgColor="pebble.800"
+    bgColor="gray.800"
     borderRadius="8px"
     w="100%"
     cursor="pointer"
-    _hover={{ bgColor: "pebble.700" }}
+    _hover={{ bgColor: "gray.700" }}
     transition="all .25s ease-in-out"
     _disabled={{
-      bgColor: "pebble.900",
+      bgColor: "gray.900",
       cursor: "not-allowed",
     }}
     {...componentProps}
@@ -52,6 +52,6 @@ export const ButtonCard = ({
         description
       )}
     </Stack>
-    <CustomIcon name="chevron-right" color="pebble.600" />
+    <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
@@ -35,7 +35,7 @@ export const ConnectWalletAlert = ({
   return !address ? (
     <Alert
       {...alertProps}
-      variant="honeydew"
+      variant="accent"
       alignItems="center"
       justifyContent="space-between"
       py="12px"
@@ -47,7 +47,7 @@ export const ConnectWalletAlert = ({
           <AlertDescription>{subtitle}</AlertDescription>
         </Box>
       </Flex>
-      <Button size="sm" variant="ghost-info" gap={2} onClick={onClickConnect}>
+      <Button size="sm" variant="ghost-accent" gap={2} onClick={onClickConnect}>
         <CustomIcon name="connect" /> Connect Wallet
       </Button>
     </Alert>

diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx
@@ -14,7 +14,7 @@ export const ContractCmdButton = ({
     height="24px"
     px="10px"
     borderRadius="16px"
-    fontWeight="400"
+    fontWeight={400}
     onClick={onClickCmd}
   >
     {cmd}

diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
@@ -196,7 +196,7 @@ export const ContractSelectSection = observer(
       <Flex
         mb={style.container}
         borderWidth="thin"
-        borderColor="pebble.800"
+        borderColor="gray.800"
         p="16px"
         borderRadius="8px"
         fontSize="12px"

diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
@@ -31,16 +31,16 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         }}
         _hover={{
           textDecoration: "underline",
-          textDecorationColor: "lilac.light",
-          "& > p": { color: "lilac.light" },
+          textDecorationColor: "secondary.light",
+          "& > p": { color: "secondary.light" },
         }}
         cursor="pointer"
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
       >
         <Text
           variant="body2"
-          color="lilac.main"
+          color="secondary.main"
           transition="all .25s ease-in-out"
         >
           {value === address ? `${value} (Me)` : value}
@@ -50,7 +50,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
           marginLeft={2}
           name="copy"
           boxSize={3}
-          color="pebble.600"
+          color="gray.600"
         />
       </Flex>
     </Tooltip>

diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
@@ -16,14 +16,14 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       display="flex"
       alignItems="center"
       fontSize="14px"
-      fontWeight="700"
+      fontWeight={700}
       lineHeight="24px"
       letterSpacing="0.4px"
       variant="ghost-gray"
       mb={0}
       sx={{
         "&[aria-selected=true]": {
-          color: "violet.light",
+          color: "primary.light",
         },
       }}
       _active={{
@@ -34,7 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge variant={isSelected ? "violet" : "gray"} ml="6px">
+        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
           {count}
         </Badge>
       )}

diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
diff --git a/src/lib/components/DotSeperator.tsx b/src/lib/components/DotSeperator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
@@ -25,11 +25,11 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
         name="expedited"
         boxSize="4"
         ml="0"
-        color={isActiveExpedited ? "honeydew.main" : "pebble.400"}
+        color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text
         variant="body3"
-        color={isActiveExpedited ? "honeydew.main" : "text.dark"}
+        color={isActiveExpedited ? "accent.main" : "text.dark"}
       >
         Expedited
       </Text>

diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
@@ -111,9 +111,9 @@ const LinkRender = ({
   const textElement = (
     <Text
       variant={textVariant}
-      color="lilac.main"
+      color="secondary.main"
       transition="all .25s ease-in-out"
-      _hover={{ color: "lilac.light" }}
+      _hover={{ color: "secondary.light" }}
       className={isEllipsis ? "ellipsis" : undefined}
       maxW={maxWidth}
       pointerEvents={hrefLink ? "auto" : "none"}
@@ -179,7 +179,7 @@ export const ExplorerLink = ({
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
-          textDecorationColor: "lilac.light",
+          textDecorationColor: "secondary.light",
         }),
       }}
       {...componentProps}

diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
@@ -30,7 +30,7 @@ const InputWithIcon = ({
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
     <InputRightElement h="56px" alignItems="center" mr="1">
-      <CustomIcon name="search" color="pebble.600" />
+      <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>
 );

diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
@@ -46,7 +46,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
       setResult,
       placeholder,
       helperText,
-      labelBgColor = "pebble.900",
+      labelBgColor = "gray.900",
       ...rest
     }: ListSelectionProps,
     ref
@@ -127,7 +127,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             alignItems="center"
             color="text.main"
             border="1px solid"
-            borderColor="pebble.700"
+            borderColor="gray.700"
             background="none"
             borderRadius="8px"
             maxW="100%"
@@ -144,7 +144,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <Tag
                       cursor="pointer"
                       whiteSpace="nowrap"
-                      variant="violet-light"
+                      variant="primary-light"
                       gap={1}
                       mr={1}
                     >
@@ -175,7 +175,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
               position="absolute"
               top={0}
               left={0}
-              fontWeight="400"
+              fontWeight={400}
               color="text.dark"
               bgColor={labelBgColor}
               pointerEvents="none"
@@ -194,7 +194,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
           {displayOptions && (
             <List
               borderRadius="8px"
-              bg="pebble.800"
+              bg="gray.800"
               px="2"
               py="1"
               mt={0}
@@ -210,7 +210,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                 <ListItem
                   key={option.value}
                   style={listItemProps}
-                  _hover={{ bg: "pebble.700" }}
+                  _hover={{ bg: "gray.700" }}
                   transition="all .25s ease-in-out"
                   onClick={() => selectOptionFromList(option)}
                 >
@@ -221,7 +221,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                         data-label={option.label}
                         mr={2}
                         name="check"
-                        color="pebble.600"
+                        color="gray.600"
                         boxSize="3"
                       />
                     )}
@@ -235,7 +235,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <ListItem
                       w="full"
                       style={listItemProps}
-                      _hover={{ bg: "pebble.700" }}
+                      _hover={{ bg: "gray.700" }}
                       transition="all .25s ease-in-out"
                       data-testid="create-option"
                       onClick={() => setEnableOutside(false)}

diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
@@ -3,7 +3,7 @@ import { Flex, Spinner, Text } from "@chakra-ui/react";
 export const Loading = () => (
   <Flex
     borderY="1px solid"
-    borderColor="pebble.700"
+    borderColor="gray.700"
     width="full"
     py="60px"
     my={12}

diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
@@ -31,7 +31,7 @@ export const PermissionChip = ({
   return (
     <Tooltip label={message}>
       <Flex>
-        <Tag size="md" variant={isAllowed ? "honeydew-darker" : "gray"}>
+        <Tag size="md" variant={isAllowed ? "accent-darker" : "gray"}>
           {instantiatePermission}
         </Tag>
       </Flex>

diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
@@ -30,7 +30,7 @@ export const PublicDescription = ({
   return (
     <Flex
       direction="column"
-      bg="pebble.900"
+      bg="gray.900"
       maxW="100%"
       borderRadius="8px"
       p={4}

diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
@@ -39,7 +39,7 @@ export const StickySidebar = ({
     <Box flex="4" px={8} position="relative" {...boxProps}>
       <Flex position="fixed" width="full">
         <Accordion allowToggle width={96} defaultIndex={[0]}>
-          <AccordionItem borderTop="none" borderColor="pebble.700">
+          <AccordionItem borderTop="none" borderColor="gray.700">
             <AccordionButton py={3} px={0}>
               <Text
                 variant="body2"
@@ -49,13 +49,13 @@ export const StickySidebar = ({
               >
                 {title}
               </Text>
-              <AccordionIcon color="pebble.600" ml="auto" />
+              <AccordionIcon color="gray.600" ml="auto" />
             </AccordionButton>
             <AccordionPanel
               py={3}
               px={0}
               borderTop="1px solid"
-              borderColor="pebble.700"
+              borderColor="gray.700"
             >
               <Text variant="body2" color="text.dark" mb={hasAction ? 3 : 0}>
                 {description}
@@ -69,10 +69,10 @@ export const StickySidebar = ({
                   gap={2}
                   width="fit-content"
                   transition="all 0.25s ease-in-out"
-                  color="lilac.main"
+                  color="secondary.main"
                   _hover={{
-                    color: "lilac.light",
-                    bgColor: "lilac.background",
+                    color: "secondary.light",
+                    bgColor: "secondary.background",
                   }}
                   onClick={() =>
                     navigate({ pathname: "/proposals/store-code" })
@@ -83,7 +83,7 @@ export const StickySidebar = ({
                   </Text>
                   <CustomIcon
                     name="chevron-right"
-                    color="lilac.main"
+                    color="secondary.main"
                     boxSize={3}
                     m={0}
                   />