🔨 Fix view svgs in dark mode & nprogress added

2025-12-29 08:01:36 +08:00 · 2022-04-04 18:20:17 +01:00
parent a6e4902653
commit 5959a73406
8 changed files with 820 additions and 731 deletions
@@ -2,7 +2,10 @@
 import Head from "next/head";

 // 🌿 Chakra UI ->
-import { ChakraProvider, Container } from "@chakra-ui/react";
+import { ChakraProvider, Container, useColorModeValue } from "@chakra-ui/react";
+
+// ➡️ Nextjs Progressbar ->
+import NextNProgress from "nextjs-progressbar";

 // 📦 Components ->
 import Sidebar from "components/sidebar";
@@ -20,11 +23,11 @@ import Transitions from "animations/transitions";
 import { Toaster } from "react-hot-toast";

 function MyApp({ Component, pageProps, router }) {
+  const progress = useColorModeValue("#7B7B7B", "#D4D4D4");
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
-
        <title>SVGL - Beautiful SVG vector logos</title>
        <meta property="og:title" content="SVGL - Beautiful SVG vector logos" />
        <meta
@@ -37,7 +40,6 @@ function MyApp({ Component, pageProps, router }) {
          property="og:image"
          content="https://svgl.vercel.app/images/banner.png"
        />
-
        <meta name="twitter:site" content="@pheralb_" />
        <meta
          property="twitter:title"
@@ -60,6 +62,7 @@ function MyApp({ Component, pageProps, router }) {
      </Head>
      <ChakraProvider theme={theme}>
        <Sidebar>
+          <NextNProgress color={progress}/>
          <Layout>
            <Transitions key={router.route}>
              <Component {...pageProps} />
@@ -7,6 +7,7 @@ import {
  Button,
  Image,
  Center,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
@@ -34,6 +35,7 @@ export default function Icon() {
    () => query.id && `/api/search?id=${query.id}`,
    fetcher
  );
+  const bgImage = useColorModeValue("transparent", "#E9E9E9");

  if (error) return <Error />;
  if (!data) return <Loader />;
@@ -74,6 +76,9 @@ export default function Icon() {
                w={{ base: "30%", md: "20%", lg: "30%" }}
                fit="cover"
                loading="lazy"
+                bg={bgImage}
+                borderRadius="15px"
+                p="1"
              />
            </Center>
          </Box>