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] 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}