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/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/pagination/index.tsx

@@ -63,14 +63,14 @@ export const Pagination = ({
           w="70px"
           fontSize="12px"
           focusBorderColor="none"
-          icon={<CustomIcon name="chevron-down" />}
           cursor="pointer"
           onChange={onPageSizeChange}
         >
           <option value="10">10</option>
           <option value="20">20</option>
           <option value="50">50</option>
           <option value="100">100</option>
+          <CustomIcon name="chevron-down" />
         </Select>
         <Text variant="body3" mx="30px">
           {`${offsetData} - ${lastDataInPage} of ${totalData}`}

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

@@ -29,12 +29,19 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
 
   const isCurrentPage = useCallback(
     (slug: string) => {
-      if (network) {
-        return slug === "/"
-          ? pathName === `/${network}`
-          : pathName === `/${network}${slug}`;
+      const networkPath = network ? `/${network}` : "";
+      switch (slug) {
+        // handle home page
+        case "/":
+          return pathName === `${networkPath}`;
+        // handle contract list page and public project page
+        case "/contract-list":
+        case "/public-project":
+          return pathName === `${networkPath}${slug}`;
+        // handle page with query param
+        default:
+          return pathName.includes(`${networkPath}${slug}`);
       }
-      return pathName === `${slug}`;
     },
     [network, pathName]
   );

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>

src/lib/pages/public-project/components/PublicProjectCard.tsx

@@ -17,7 +17,7 @@ export const PublicProjectCard = observer(
   ({ item, slug }: PublicProjectCardProps) => {
     const navigate = useInternalNavigate();
     const handleOnClick = () => {
-      navigate({ pathname: `/public-project/${slug}` });
+      navigate({ pathname: `/public-project/[slug]`, query: { slug } });
     };
 
     const [ref, { clampedText }] = useClampText({

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"