Merge pull request #2 from darioesp/main

⚒️ Added file .nvmrc, minors changes of styles and fix hover

.nvmrc

@@ -0,0 +1 @@
+v16.15.1

src/components/svgCard.tsx

@@ -13,6 +13,7 @@ import CustomLink from "@/common/link";
 
 const SVGCard = (props: SVGCardProps) => {
   const bg = useColorModeValue("bg.light", "bg.dark");
+  const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)");
   return (
     <>
       <Tap>
@@ -25,10 +26,10 @@ const SVGCard = (props: SVGCardProps) => {
             borderWidth="1px"
             mb="2"
             _hover={{
-              shadow: "md",
+              border:`1px solid ${color}`,
+              transform: "scale(0.98)",
             }}
-            transition="all 0.2s"
+            transition="all 0.2s" >
-          >
             <Center>
               <Image boxSize="50px" src={props.svg} alt={props.title} />
             </Center>

src/layout/header/categories.tsx

@@ -2,27 +2,35 @@ import React from "react";
 import useSWR from "swr";
 import { getCategorySvgs } from "@/services";
 import CustomLink from "@/common/link";
-import { Box } from "@chakra-ui/react";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { RaceBy } from "@uiball/loaders";
 import Tap from "@/animations/tap";
 
 const Categories = () => {
   const { data, error } = useSWR(getCategorySvgs);
+  const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)");
 
   if (error) return <div>failed to load</div>;
   if (!data)
     return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />;
-
   return (
     <>
       {data.map((category: string) => (
-        <Tap key={category}>
+      <Tap key={category}>
-          <CustomLink href={`/category/${category}`}>
+        <CustomLink 
-            <Box p="4" borderRadius="5px" borderWidth="1px">
+          href={`/category/${category}`}>
-              {category}
+          <Box
-            </Box>
+            p={4}
-          </CustomLink>
+            borderRadius="4px"
-        </Tap>
+            borderWidth="1px"
+            _hover={{
+              border:`1px solid ${color}`,
+              transform: "scale(0.98)",
+            }}>
+            {category}
+          </Box>
+        </CustomLink>
+      </Tap>
       ))}
     </>
   );

src/layout/header/index.tsx

@@ -104,7 +104,8 @@ const Header = () => {
       </Box>
       <Box p="4" overflowX="hidden" overflowY="auto">
         <HStack
-          justifyContent={{ base: "none", md: "center" }}
+          justifyContent={{ base: "none", lg: "center" }}
+          flexWrap={{ base: "initial", lg: "wrap" }}
           spacing={4}
           overflowX="auto"
           overflowY="hidden"