Feat/apply new branding

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#149](https://github.com/alleslabs/celatone-frontend/pull/149) Apply new branding
+
 - [#93](https://github.com/alleslabs/celatone-frontend/pull/93) Add filter code by instantiate permission in all codes page
 - [#141](https://github.com/alleslabs/celatone-frontend/pull/141) Add 404 not found page, catch network params error
 - [#134](https://github.com/alleslabs/celatone-frontend/pull/134) Fix un-align sub-page with sidebar

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

@@ -19,7 +19,7 @@ export const sendingTx = (fee: StdFee) => {
       ],
       receiptInfo: {
         header: "Sending Transaction",
-        headerIcon: <Spinner size="md" color="gray.400" />,
+        headerIcon: <Spinner size="md" color="pebble.600" />,
       },
       actionVariant: "sending",
     } as TxResultRendering;

src/lib/components/AccordionStepperItem.tsx

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

src/lib/components/ButtonCard.tsx

@@ -22,13 +22,14 @@ export const ButtonCard = ({
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}
-    bgColor="gray.900"
-    borderRadius="4px 4px 0 0"
+    bgColor="pebble.800"
+    borderRadius="8px"
     w="100%"
     cursor="pointer"
-    _hover={{ bgColor: "rgba(255, 255, 255, 0.15)" }}
+    _hover={{ bgColor: "pebble.700" }}
+    transition="all .25s ease-in-out"
     _disabled={{
-      bgColor: "divider.main",
+      bgColor: "pebble.800",
       cursor: "not-allowed",
     }}
     {...componentProps}
@@ -45,6 +46,6 @@ export const ButtonCard = ({
         {description}
       </Text>
     </Stack>
-    <Icon as={MdChevronRight} color="gray.600" fontSize="28px" />
+    <Icon as={MdChevronRight} color="pebble.600" fontSize="28px" />
   </Flex>
 );

src/lib/components/ConnectWalletAlert.tsx

@@ -34,7 +34,7 @@ export const ConnectWalletAlert = ({
   return !address ? (
     <Alert
       {...alertProps}
-      variant="info"
+      variant="honeydew"
       alignItems="center"
       justifyContent="space-between"
       py="12px"
@@ -43,20 +43,20 @@ export const ConnectWalletAlert = ({
         <AlertIcon />
         <Box>
           <AlertTitle>
-            <Text variant="body1" fontWeight="600" color="info.main">
+            <Text variant="body1" fontWeight="600" color="honeydew.main">
               {title}
             </Text>
           </AlertTitle>
           <AlertDescription>
-            <Text variant="body2" color="info.main">
+            <Text variant="body2" color="honeydew.main">
               {subtitle}
             </Text>
           </AlertDescription>
         </Box>
       </Flex>
-      <Button variant="ghost" gap={2} onClick={onClickConnect}>
-        <Icon as={MdLink} boxSize={4} color="info.main" />
-        <Text color="info.main">Connect Wallet</Text>
+      <Button variant="ghost-info" gap={2} onClick={onClickConnect}>
+        <Icon as={MdLink} boxSize={4} />
+        <Text color="honeydew.main">Connect Wallet</Text>
       </Button>
     </Alert>
   ) : null;

src/lib/components/ContractCmdButton.tsx

@@ -11,11 +11,11 @@ export const ContractCmdButton = ({
   return (
     <Button
       variant="outline-gray"
-      textColor="white"
       fontSize="12px"
       height="24px"
       px="10px"
-      borderColor="rgba(255, 255, 255, 0.3)"
+      textColor="white"
+      borderColor="pebble.700"
       borderRadius="16px"
       fontWeight="400"
       onClick={onClickCmd}

src/lib/components/ContractSelectSection.tsx

@@ -165,9 +165,9 @@ export const ContractSelectSection = observer(
     return (
       <Flex
         borderWidth="thin"
-        borderColor="gray.800"
+        borderColor="pebble.800"
         p="16px"
-        borderRadius="4px"
+        borderRadius="8px"
         fontSize="12px"
         justify="space-between"
         align="center"
@@ -188,7 +188,7 @@ export const ContractSelectSection = observer(
                 maxWidth="none"
               />
             ) : (
-              <Text textColor="text.disabled" variant="body2">
+              <Text color="text.disabled" variant="body2">
                 Not Selected
               </Text>
             )}

src/lib/components/Copier.tsx

@@ -29,7 +29,7 @@ export const Copier = ({
       label={copyLabel}
       placement="top"
       arrowSize={8}
-      bg="primary.dark"
+      bg="honeydew.darker"
     >
       <div>
         <CopyIcon