🔨 Fix view svgs in dark mode & nprogress added

components/card/index.js

@@ -16,16 +16,17 @@ import toast from "react-hot-toast";
 import Tap from "animations/tap";
 
 const Index = ({ title, url, href }) => {
-  const bgColor = useColorModeValue("#F2F2F2", "#1D1D1D");
-  const color = useColorModeValue("black", "white");
+  const toastBg = useColorModeValue("#F2F2F2", "#1D1D1D");
+  const toastColor = useColorModeValue("black", "white");
+  const bgImage = useColorModeValue("transparent", "#E9E9E9");
 
   const downloadSvg = (url) => {
     toast(`Downloading ${title}...`, {
       icon: "🥳",
       style: {
         borderRadius: "10px",
-        background: bgColor,
-        color: color,
+        background: toastBg,
+        color: toastColor,
       },
     });
     download(url);
@@ -42,7 +43,7 @@ const Index = ({ title, url, href }) => {
       }}
     >
       <Center>
-        <Image src={href} alt={title} boxSize="40px" />
+        <Image src={href} alt={title} boxSize="45px" bg={bgImage} borderRadius="15px" p="1" />
       </Center>
       <Text mt="2" fontWeight="light" textAlign="center">
         {title}

components/sidebar/index.js

@@ -24,7 +24,7 @@ import ModalSearch from "components/search/modal";
 
 export default function Index({ children }) {
   const sidebar = useDisclosure();
-  const border = useColorModeValue("dark.200", "dark.800");
+  const border = useColorModeValue("gray.200", "dark.800");
   const bg = useColorModeValue("gray.100", "lightDark.900");
 
   const SidebarContent = (props) => (
@@ -40,7 +40,6 @@ export default function Index({ children }) {
       overflowY="auto"
       borderColor={border}
       borderRightWidth="1px"
-      shadow="sm"
       w="56"
       {...props}
     >

components/sidebar/links.js

@@ -1,4 +1,4 @@
-import { IoHomeOutline, IoLogoGithub } from 'react-icons/io5';
+import { IoAppsOutline, IoLogoGithub } from 'react-icons/io5';
 import { FiTwitter } from 'react-icons/fi';
 
 const SidebarLinks = [
@@ -7,7 +7,7 @@ const SidebarLinks = [
     href: "/",
     external: false,
     title: "Browse",
-    icon: IoHomeOutline,
+    icon: IoAppsOutline,
   },
   {
     id: 2,