From 7d7846ef4a5af3ae6fabc573f690f9ef70c364bf Mon Sep 17 00:00:00 2001
From: DarioEsp <dario@fixu.cl>
Date: Sun, 24 Jul 2022 00:08:28 -0400
Subject: [PATCH 1/5] docs!: Added nvmrc with version node recommend

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..0a2cd98
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v16.15.1
\ No newline at end of file

From e97e859f337bfd3d69f4ed02107f6e43ef4e4179 Mon Sep 17 00:00:00 2001
From: DarioEsp <dario@fixu.cl>
Date: Sun, 24 Jul 2022 00:44:34 -0400
Subject: [PATCH 2/5] style: Replace shodow by minimalist hover

---
 src/components/svgCard.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/svgCard.tsx b/src/components/svgCard.tsx
index c948301..9ddcad0 100644
--- a/src/components/svgCard.tsx
+++ b/src/components/svgCard.tsx
@@ -17,10 +17,11 @@ const SVGCard = (props: SVGCardProps) => {
           borderWidth="1px"
           mb="2"
           _hover={{
-            shadow: "md",
+            /* shadow: "md", */
+            border:"1px solid rgb(0,0,0, .1)",
+            transform: "scale(0.98)",
           }}
-          transition="all 0.2s"
-        >
+          transition="all 0.2s" >
           <Center>
             <Image boxSize="50px" src={props.svg} alt={props.title} />
           </Center>

From 0b7ea6015b3ae7df1e94393986318d95817a6a3c Mon Sep 17 00:00:00 2001
From: DarioEsp <dario@fixu.cl>
Date: Sun, 24 Jul 2022 00:45:01 -0400
Subject: [PATCH 3/5] fix!: LInk hover

---
 src/layout/header/categories.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/layout/header/categories.tsx b/src/layout/header/categories.tsx
index 549a0fb..e70c3fb 100644
--- a/src/layout/header/categories.tsx
+++ b/src/layout/header/categories.tsx
@@ -15,9 +15,20 @@ const Categories = () => {
   return (
     <>
       {data.map((category: string) => (
-        <Box key={category} p="4" borderRadius="5px" borderWidth="1px">
-          <CustomLink href={`/category/${category}`}>{category}</CustomLink>
-        </Box>
+        <CustomLink 
+          key={category}
+          href={`/category/${category}`}>
+          <Box
+            p={4}
+            borderRadius="4px"
+            borderWidth="1px"
+            _hover={{
+              border:"1px solid rgb(0,0,0, .1)",
+              transform: "scale(0.98)",
+            }}>
+          {category}
+          </Box>
+        </CustomLink>
       ))}
     </>
   );

From c1719ebe70b0c9792ab3edbeab92b8fa0eb5d430 Mon Sep 17 00:00:00 2001
From: DarioEsp <dario@fixu.cl>
Date: Sun, 24 Jul 2022 00:55:46 -0400
Subject: [PATCH 4/5] fix!: Toggle use color minimalist

---
 src/components/svgCard.tsx       | 4 ++--
 src/layout/header/categories.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/svgCard.tsx b/src/components/svgCard.tsx
index 9ddcad0..8147c69 100644
--- a/src/components/svgCard.tsx
+++ b/src/components/svgCard.tsx
@@ -6,6 +6,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>
       <CustomLink href={`/svg/${props.id}`}>
@@ -17,8 +18,7 @@ const SVGCard = (props: SVGCardProps) => {
           borderWidth="1px"
           mb="2"
           _hover={{
-            /* shadow: "md", */
-            border:"1px solid rgb(0,0,0, .1)",
+            border:`1px solid ${color}`,
             transform: "scale(0.98)",
           }}
           transition="all 0.2s" >
diff --git a/src/layout/header/categories.tsx b/src/layout/header/categories.tsx
index e70c3fb..f476e00 100644
--- a/src/layout/header/categories.tsx
+++ b/src/layout/header/categories.tsx
@@ -2,16 +2,16 @@ 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";
 
 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) => (
@@ -23,7 +23,7 @@ const Categories = () => {
             borderRadius="4px"
             borderWidth="1px"
             _hover={{
-              border:"1px solid rgb(0,0,0, .1)",
+              border:`1px solid ${color}`,
               transform: "scale(0.98)",
             }}>
           {category}

From 97174c65ff04ec0ff3b552d1be1f67354d363537 Mon Sep 17 00:00:00 2001
From: DarioEsp <dario@fixu.cl>
Date: Sun, 24 Jul 2022 01:05:57 -0400
Subject: [PATCH 5/5] fix!: Resonsive category list

---
 src/layout/header/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layout/header/index.tsx b/src/layout/header/index.tsx
index 708f376..b256930 100644
--- a/src/layout/header/index.tsx
+++ b/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"