Refine styling

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
 - [#328](https://github.com/alleslabs/celatone-frontend/pull/328) Add proposal and pool page in sidebar navigation
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert
 

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="pebble.600" />,
+        headerIcon: <Spinner size="md" />,
       },
       actionVariant: "sending",
     } as TxResultRendering;

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

@@ -94,7 +94,9 @@ export const uploadContractTx = ({
               {isMigrate ? "migrate" : "instantiate"} your code now?
             </>
           ),
-          headerIcon: <CustomIcon name="upload-cloud" boxSize="5" />,
+          headerIcon: (
+            <CustomIcon name="upload-cloud" boxSize="5" color="pebble.600" />
+          ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",
       } as TxResultRendering;

src/lib/components/ButtonCard.tsx

@@ -52,6 +52,6 @@ export const ButtonCard = ({
         description
       )}
     </Stack>
-    <CustomIcon name="chevron-right" />
+    <CustomIcon name="chevron-right" color="pebble.600" />
   </Flex>
 );

src/lib/components/ConnectWalletAlert.tsx

@@ -5,7 +5,6 @@ import {
   Flex,
   Box,
   Button,
-  Text,
 } from "@chakra-ui/react";
 import type { AlertProps } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
@@ -42,15 +41,14 @@ export const ConnectWalletAlert = ({
       py="12px"
     >
       <Flex gap={2}>
-        <CustomIcon name="wallet-solid" color="honeydew.main" 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}>
-        <CustomIcon name="connect" color="honeydew.main" />
-        <Text color="honeydew.main">Connect Wallet</Text>
+        <CustomIcon name="connect" /> Connect Wallet
       </Button>
     </Alert>
   ) : null;

src/lib/components/ContractSelectSection.tsx

@@ -101,7 +101,7 @@ const ContractDetailsButton = ({
           variant="ghost-gray"
           float="right"
           size="sm"
-          leftIcon={<CustomIcon name="edit" color="text.dark" />}
+          leftIcon={<CustomIcon name="edit" />}
         >
           Edit
         </Button>
@@ -120,9 +120,7 @@ const ContractDetailsButton = ({
           variant="outline-gray"
           float="right"
           size="sm"
-          leftIcon={
-            <CustomIcon name="bookmark" color="text.dark" boxSize="12px" />
-          }
+          leftIcon={<CustomIcon name="bookmark" boxSize="12px" />}
         >
           Add To List
         </Button>

src/lib/components/CopyLink.tsx

@@ -1,10 +1,11 @@
-import { Flex, Text, Tooltip, useClipboard } from "@chakra-ui/react";
+import { Flex, Text, useClipboard } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useState } from "react";
 
 import { AmpTrackCopier } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
+import { Tooltip } from "./Tooltip";
 
 interface CopyLinkProps {
   value: string;
@@ -18,12 +19,8 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
   const [isHover, setIsHover] = useState(false);
   return (
     <Tooltip
-      hasArrow
       isOpen={isHover || hasCopied}
       label={hasCopied ? "Copied!" : "Click to copy"}
-      placement="top"
-      arrowSize={8}
-      bgColor="honeydew.darker"
       closeOnClick={false}
     >
       <Flex
@@ -48,7 +45,13 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         >
           {value === address ? `${value} (Me)` : value}
         </Text>
-        <CustomIcon cursor="pointer" marginLeft={2} name="copy" boxSize={3} />
+        <CustomIcon
+          cursor="pointer"
+          marginLeft={2}
+          name="copy"
+          boxSize={3}
+          color="pebble.600"
+        />
       </Flex>
     </Tooltip>
   );

src/lib/components/CustomTab.tsx

@@ -20,7 +20,6 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       lineHeight="24px"
       letterSpacing="0.4px"
       variant="ghost-gray"
-      color="text.dark"
       mb={0}
       sx={{
         "&[aria-selected=true]": {
@@ -35,11 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge
-          variant={isSelected ? "violet" : "gray"}
-          ml="6px"
-          color="text.main"
-        >
+        <Badge variant={isSelected ? "violet" : "gray"} ml="6px">
           {count}
         </Badge>
       )}

src/lib/components/EstimatedFeeRender.tsx

@@ -13,7 +13,7 @@ export const EstimatedFeeRender = ({
   if (loading) {
     return (
       <>
-        <Spinner color="pebble.600" size="sm" mx={1} /> Estimating ...
+        <Spinner size="sm" mx={1} /> Estimating ...
       </>
     );
   }

src/lib/components/Expedited.tsx

@@ -1,6 +1,7 @@
-import { Flex, Tooltip, Text, Highlight } from "@chakra-ui/react";
+import { Flex, Text, Highlight } from "@chakra-ui/react";
 
 import { CustomIcon } from "./icon";
+import { Tooltip } from "./Tooltip";
 
 const ExpeditedText = (
   <Text variant="body3">
@@ -18,13 +19,7 @@ interface ExpeditedProps {
   isActiveExpedited: boolean;
 }
 export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
-  <Tooltip
-    hasArrow
-    label={ExpeditedText}
-    placement="top"
-    bg="honeydew.darker"
-    arrowSize={8}
-  >
+  <Tooltip label={ExpeditedText}>
     <Flex align="center">
       <CustomIcon
         name="expedited"

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" />
+      <CustomIcon name="search" color="pebble.600" />
     </InputRightElement>
   </InputGroup>
 );

src/lib/components/ListSelection.tsx

@@ -144,18 +144,12 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <Tag
                       cursor="pointer"
                       whiteSpace="nowrap"
-                      size="md"
-                      bgColor="violet.light"
-                      color="pebble.900"
-                      alignItems="center"
-                      display="flex"
-                      textTransform="none"
+                      variant="violet-light"
                       gap={1}
-                      mr={2}
-                      borderRadius="full"
+                      mr={1}
                     >
                       {option.label}
-                      <CustomIcon name="close" color="pebble.900" boxSize="3" />
+                      <CustomIcon name="close" boxSize="3" />
                     </Tag>
                   </Flex>
                 ))}

src/lib/components/Loading.tsx

@@ -10,7 +10,7 @@ export const Loading = () => (
     flexDirection="column"
     alignItems="center"
   >
-    <Spinner size="xl" speed="0.65s" />
+    <Spinner size="xl" />
     <Text mt="20px">Loading ...</Text>
   </Flex>
 );

src/lib/components/LoadingOverlay.tsx

@@ -14,7 +14,7 @@ export const LoadingOverlay = () => (
     left={0}
     zIndex="overlay"
   >
-    <Spinner color="pebble.600" size="xl" />
+    <Spinner size="xl" />
     <Text variant="body1">Loading ...</Text>
   </Flex>
 );

src/lib/components/PermissionChip.tsx

@@ -1,20 +1,11 @@
-import { chakra, Tag, Tooltip } from "@chakra-ui/react";
+import { Flex, Tag } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import type { CSSProperties } from "react";
 
 import type { HumanAddr, PermissionAddresses } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
 import { getPermissionHelper } from "lib/utils";
 
-const StyledTag = chakra(Tag, {
-  baseStyle: {
-    borderRadius: "16px",
-    fontSize: "12px",
-    fontWeight: 400,
-    color: "text.main",
-    w: "fit-content",
-  },
-});
+import { Tooltip } from "./Tooltip";
 
 interface PermissionChipProps {
   instantiatePermission: AccessConfigPermission;
@@ -31,19 +22,19 @@ export const PermissionChip = ({
     permissionAddresses.includes(address as HumanAddr) ||
     instantiatePermission === AccessConfigPermission.EVERYBODY;
 
-  const tagBgColor: CSSProperties["backgroundColor"] = isAllowed
-    ? "honeydew.darker"
-    : "pebble.700";
-
   const { message } = getPermissionHelper(
     address as HumanAddr,
     instantiatePermission,
     permissionAddresses
   );
 
   return (
-    <Tooltip hasArrow label={message} placement="top" bg="honeydew.darker">
-      <StyledTag bgColor={tagBgColor}>{instantiatePermission}</StyledTag>
+    <Tooltip label={message}>
+      <Flex>
+        <Tag size="md" variant={isAllowed ? "honeydew-darker" : "gray"}>
+          {instantiatePermission}
+        </Tag>
+      </Flex>
     </Tooltip>
   );
 };

src/lib/components/TagSelection.tsx

@@ -41,16 +41,6 @@ const listItemProps: CSSProperties = {
   padding: "8px",
   cursor: "pointer",
 };
-const tagItemProps: CSSProperties = {
-  borderRadius: "24px",
-  cursor: "pointer",
-  whiteSpace: "nowrap",
-  alignItems: "center",
-  display: "flex",
-  textTransform: "none",
-  gap: "4px",
-  marginRight: "8px",
-};
 
 export const TagSelection = observer(
   forwardRef<HTMLInputElement, TagSelectionProps>(
@@ -59,7 +49,6 @@ export const TagSelection = observer(
         result,
         setResult,
         placeholder,
-        badgeBgColor = "honeydew.darker",
         helperText,
         labelBgColor = "background.main",
         label = "Tags",
@@ -163,17 +152,9 @@ export const TagSelection = observer(
                       onClick={() => selectOption(option)}
                       key={option}
                     >
-                      <Tag
-                        style={tagItemProps}
-                        size="md"
-                        bgColor={badgeBgColor}
-                      >
+                      <Tag gap={1} mr={1} cursor="pointer">
                         {option}
-                        <CustomIcon
-                          name="close"
-                          color="text.dark"
-                          boxSize="3"
-                        />
+                        <CustomIcon name="close" boxSize="3" />
                       </Tag>
                     </Flex>
                   ))}
@@ -257,11 +238,7 @@ export const TagSelection = observer(
                     onClick={() => selectOptionFromList(option)}
                   >
                     <Flex alignItems="center" justifyContent="space-between">
-                      <Tag
-                        style={tagItemProps}
-                        size="sm"
-                        bgColor={badgeBgColor}
-                      >
+                      <Tag gap={1} mr={1}>
                         {option}
                       </Tag>
                       {isOptionSelected(option) && (
@@ -287,11 +264,7 @@ export const TagSelection = observer(
                   >
                     <Flex alignItems="center" gap={2}>
                       <Text variant="body2">Create </Text>
-                      <Tag
-                        style={tagItemProps}
-                        size="sm"
-                        bgColor={badgeBgColor}
-                      >
+                      <Tag gap={1} mr={1}>
                         {inputValue}
                       </Tag>
                     </Flex>

src/lib/components/TokenCard.tsx

@@ -1,5 +1,5 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Badge, Flex, Image, Text, Tooltip } from "@chakra-ui/react";
+import { Badge, Flex, Image, Text } from "@chakra-ui/react";
 
 import { NAToken } from "lib/icon";
 import type { BalanceWithAssetInfo, Token, U, USD } from "lib/types";
@@ -10,6 +10,7 @@ import {
 } from "lib/utils";
 
 import { Copier } from "./copy";
+import { Tooltip } from "./Tooltip";
 
 interface TokenCardProps extends FlexProps {
   userBalance: BalanceWithAssetInfo;
@@ -25,10 +26,7 @@ export const TokenCard = ({
 
   return (
     <Tooltip
-      hasArrow
       label={`Token ID: ${id}`}
-      placement="top"
-      bg="honeydew.darker"
       maxW="240px"
       whiteSpace="pre-line"
       textAlign="center"

src/lib/components/Tooltip.tsx

@@ -0,0 +1,14 @@
+import type { TooltipProps } from "@chakra-ui/react";
+import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+
+export const Tooltip = ({
+  placement = "top",
+  ...tooltipProps
+}: TooltipProps) => (
+  <ChakraTooltip
+    hasArrow
+    placement={placement}
+    arrowSize={8}
+    {...tooltipProps}
+  />
+);