Fix/abstract styling

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

src/lib/app-fns/tx/clearAdmin.tsx

@@ -70,7 +70,7 @@ export const clearAdminTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

src/lib/app-fns/tx/common/catchTxError.tsx

@@ -52,7 +52,7 @@ export const catchTxError = (
           <CustomIcon
             name="alert-circle-solid"
             color="error.light"
-            boxSize="5"
+            boxSize={5}
           />
         ),
       },

src/lib/app-fns/tx/execute.tsx

@@ -88,7 +88,7 @@ export const executeContractTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

src/lib/app-fns/tx/resend.tsx

@@ -64,15 +64,15 @@ export const resendTx = ({
         receiptInfo: {
           header: "Transaction Completed",
           description: (
-            <Text fontWeight="700">
+            <Text fontWeight={700}>
               Your transaction was successfully resent.
             </Text>
           ),
           headerIcon: (
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

src/lib/app-fns/tx/submitProposal.tsx

@@ -89,8 +89,8 @@ export const submitProposalTx = ({
           headerIcon: (
             <CustomIcon
               name="submit-proposal-solid"
-              color="pebble.600"
-              boxSize="5"
+              color="gray.600"
+              boxSize={5}
             />
           ),
         },

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",

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}

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}

src/lib/components/ButtonCard.tsx

@@ -20,18 +20,18 @@ export const ButtonCard = ({
 }: ButtonCardProps) => (
   <Flex
     aria-disabled={disabled}
-    p="24px"
+    p={6}
     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>
 );

src/lib/components/ConnectWalletAlert.tsx

@@ -35,19 +35,19 @@ export const ConnectWalletAlert = ({
   return !address ? (
     <Alert
       {...alertProps}
-      variant="honeydew"
+      variant="accent"
       alignItems="center"
       justifyContent="space-between"
-      py="12px"
+      py={3}
     >
       <Flex gap={2}>
-        <CustomIcon name="wallet-solid" boxSize="4" />
+        <CustomIcon name="wallet-solid" boxSize={4} />
         <Box>
           <AlertTitle>{title}</AlertTitle>
           <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>

src/lib/components/ContractCmdButton.tsx

@@ -12,9 +12,8 @@ export const ContractCmdButton = ({
     variant="command-button"
     fontSize="12px"
     height="24px"
-    px="10px"
     borderRadius="16px"
-    fontWeight="400"
+    fontWeight={400}
     onClick={onClickCmd}
   >
     {cmd}

src/lib/components/ContractSelectSection.tsx

@@ -196,8 +196,8 @@ export const ContractSelectSection = observer(
       <Flex
         mb={style.container}
         borderWidth="thin"
-        borderColor="pebble.800"
-        p="16px"
+        borderColor="gray.800"
+        p={4}
         borderRadius="8px"
         fontSize="12px"
         justify="space-between"
@@ -235,7 +235,7 @@ export const ContractSelectSection = observer(
               label={contractState.label}
             />
           </Flex>
-          <Flex gap="8px" alignItems="center">
+          <Flex gap={2} alignItems="center">
             {mode === "all-lists" && contractState.isValid && (
               <ContractDetailsButton
                 contractAddress={contractAddress}

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>

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={2}>
           {count}
         </Badge>
       )}

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={1} h={1} />
 );

src/lib/components/ErrorMessageRender.tsx

@@ -12,7 +12,7 @@ export const ErrorMessageRender = ({
   ...restProps
 }: ErrorMessageRenderProps) => (
   <Flex gap={2} {...restProps}>
-    <CustomIcon name="alert-circle-solid" color="error.main" boxSize="3" />
+    <CustomIcon name="alert-circle-solid" color="error.main" boxSize={3} />
     <Text variant="body3" color="error.main">
       {error}
     </Text>

src/lib/components/Expedited.tsx

@@ -23,13 +23,13 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
     <Flex align="center">
       <CustomIcon
         name="expedited"
-        boxSize="4"
-        ml="0"
-        color={isActiveExpedited ? "honeydew.main" : "pebble.400"}
+        boxSize={4}
+        ml={0}
+        color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text
         variant="body3"
-        color={isActiveExpedited ? "honeydew.main" : "text.dark"}
+        color={isActiveExpedited ? "accent.main" : "text.dark"}
       >
         Expedited
       </Text>

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}
@@ -203,7 +203,7 @@ export const ExplorerLink = ({
             value={copyValue || value}
             copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
             display={showCopyOnHover ? "none" : "block"}
-            ml="8px"
+            ml={2}
             amptrackSection={ampCopierSection}
           />
         </>

src/lib/components/InputWithIcon.tsx

@@ -29,8 +29,8 @@ const InputWithIcon = ({
       size={size}
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
-    <InputRightElement h="56px" alignItems="center" mr="1">
-      <CustomIcon name="search" color="pebble.600" />
+    <InputRightElement h="56px" alignItems="center" mr={1}>
+      <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>
 );