Fix/css related issue

CHANGELOG.md

@@ -63,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#235](https://github.com/alleslabs/celatone-frontend/pull/235) Fix css bugs and aesthetics improvement
 - [#236](https://github.com/alleslabs/celatone-frontend/pull/236) Add alphabetically sorting to JSON attach funds
 - [#231](https://github.com/alleslabs/celatone-frontend/pull/231) Fix double slash for endpoint, disable calling endpoint when there is no contract addr in contract details page
 - [#229](https://github.com/alleslabs/celatone-frontend/pull/229) Disable Sentry debug to prevent "logger.info is not a function" error

src/lib/components/ContractSelectSection.tsx

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

src/lib/components/copy/Copier.tsx

@@ -31,7 +31,7 @@ export const Copier = ({
         marginLeft={ml}
         onClick={() => AmpTrack(AmpEvent.USE_COPIER)}
         name="copy"
-        boxSize="16px"
+        boxSize="12px"
       />
     }
   />

src/lib/components/forms/TextInput.tsx

@@ -78,13 +78,15 @@ export const TextInput = ({
       {error ? (
         <FormErrorMessage className="error-text">{error}</FormErrorMessage>
       ) : (
-        <FormHelperText className="helper-text">
-          {status?.message ? (
-            getResponseMsg(status, helperText)
-          ) : (
-            <Text color="text.dark">{helperText}</Text>
-          )}
-        </FormHelperText>
+        helperText && (
+          <FormHelperText className="helper-text">
+            {status?.message ? (
+              getResponseMsg(status, helperText)
+            ) : (
+              <Text color="text.dark">{helperText}</Text>
+            )}
+          </FormHelperText>
+        )
       )}
       {helperAction}
     </Flex>

src/lib/components/json/JsonReadOnly.tsx

@@ -40,7 +40,7 @@ const JsonReadOnly = ({
   const zeroHeight = height === 0;
   return (
     <Box
-      m={zeroHeight ? 0 : "8px 0 16px"}
+      m={zeroHeight ? 0 : "0px 0 16px"}
       p={
         zeroHeight
           ? 0

src/lib/components/select-contract/SelectContractAdmin.tsx

@@ -66,7 +66,7 @@ export const SelectContractAdmin = ({
         }}
         leftIcon={
           !notSelected ? (
-            <CustomIcon name="swap" color="violet.light" />
+            <CustomIcon name="swap" color="violet.light" boxSize="12px" />
           ) : undefined
         }
         disabled={!address}

src/lib/components/select-contract/SelectContractInstantiator.tsx

@@ -113,7 +113,7 @@ export const SelectContractInstantiator = ({
         }}
         leftIcon={
           !notSelected ? (
-            <CustomIcon name="swap" color="violet.light" />
+            <CustomIcon name="swap" color="violet.light" boxSize="12px" />
           ) : undefined
         }
       >

src/lib/components/table/TableTitle.tsx

@@ -22,12 +22,12 @@ export const TableTitle = ({
       <Badge
         variant="gray"
         color="text.main"
-        textColor={count ? "gray.100" : "gray.500"}
+        textColor={count ? "text.main" : "pebble.500"}
       >
         {count}
       </Badge>
     </Flex>
-    <Text variant="body2" textColor="gray.400">
+    <Text variant="body2" textColor="text.dark">
       {helperText}
     </Text>
   </Box>

src/lib/layout/navbar/Collapse.tsx

@@ -77,11 +77,22 @@ export const CollapseNavMenu = ({
                   _hover={{ bg: "pebble.700", borderRadius: "8px" }}
                   transition="all .25s ease-in-out"
                   alignItems="center"
+                  position="relative"
                   bgColor={
                     isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
                   }
                   borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
                 >
+                  <Flex
+                    opacity={isCurrentPage(submenu.slug) ? 1 : 0}
+                    width="3px"
+                    height="16px"
+                    bgColor="violet.light"
+                    position="absolute"
+                    top="8px"
+                    borderRadius="2px"
+                    left="0px"
+                  />
                   {submenu.icon && <CustomIcon name={submenu.icon} />}
                   {submenu.logo && (
                     <Image

src/lib/layout/navbar/index.tsx

@@ -30,9 +30,16 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const isCurrentPage = useCallback(
     (slug: string) => {
       if (network) {
-        return slug === "/"
-          ? pathName === `/${network}`
-          : pathName === `/${network}${slug}`;
+        switch (slug) {
+          case "/":
+            return pathName === `/${network}`;
+          case "/contract-list":
+            return pathName === `/${network}${slug}`;
+          case "/public-project":
+            return pathName === `/${network}${slug}`;
+          default:
+            return pathName.includes(`/${network}${slug}`);
+        }
       }
       return pathName === `${slug}`;
     },

src/lib/pages/faucet/index.tsx

@@ -149,7 +149,7 @@ const Faucet = () => {
       <Heading as="h5" variant="h5">
         Osmosis Testnet Faucet
       </Heading>
-      <Text variant="body2" color="pebble.600" pt={4} textAlign="center" mb={8}>
+      <Text variant="body2" color="text.dark" pt={4} textAlign="center" mb={8}>
         The faucet provides 10 testnet OSMO per request. Requests are limited to
         once per hour for each receiving address and IP address.
       </Text>
@@ -167,6 +167,7 @@ const Faucet = () => {
             variant="body3"
             cursor="pointer"
             alignSelf="flex-start"
+            ml="3"
             onClick={() => {
               AmpTrack(AmpEvent.USE_ASSIGN_ME);
               setAddress(walletAddress);

src/lib/pages/query/components/QueryArea.tsx

@@ -89,17 +89,17 @@ export const QueryArea = ({
 
   return (
     <Flex direction="column">
-      <Box width="full" my="16px" alignItems="center">
+      <Box width="full" mt="4" mb="8" alignItems="center">
         {contractAddress && (
-          <Text variant="body3" mb="8px">
+          <Text variant="body3" mb="2">
             Message Suggestions:
           </Text>
         )}
         {cmds.length ? (
           <ButtonGroup
             width="90%"
             flexWrap="wrap"
-            rowGap="8px"
+            rowGap="2"
             sx={{
               "> button": {
                 marginInlineStart: "0 !important",
@@ -120,13 +120,13 @@ export const QueryArea = ({
           </ButtonGroup>
         ) : (
           contractAddress && (
-            <Text my="4px" variant="body2" color="text.dark">
+            <Text my="1" variant="body2" color="text.dark">
               No QueryMsgs suggestion available
             </Text>
           )
         )}
       </Box>
-      <Flex gap="16px">
+      <Flex gap="4">
         <Box w="full">
           <JsonInput
             topic="Query Msg"