cool bg added

src/components/BgGlow.tsx

@@ -0,0 +1,36 @@
+import { Flex, useMediaQuery  } from "@chakra-ui/react";
+
+export default function BgGlow () {
+
+    const [isUnder100] = useMediaQuery("(max-width: 100px");
+
+    if (isUnder100) return <></>
+
+    return <>
+
+        {/*eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/images/gradient-left-dark.svg" alt="gradient_img_left" 
+            style={{
+                position: 'fixed',
+                top: "0%",
+                left: "-10%",
+                right: "-50%",
+                bottom: '0%',
+                zIndex: -10,
+                opacity: '80%'
+            }}
+        />
+
+        {/*eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/images/gradient-right-dark.svg" alt="gradient_img_right" 
+            style={{
+                position: 'fixed',
+                top: "-50%",
+                right: "-50%",
+                zIndex: -10,
+                opacity: '60%'
+            }}
+        />
+    </>
+}
+

src/pages/_app.tsx

@@ -17,6 +17,7 @@ import { UserCredentialsContext } from '~/hooks/UserCredentialsContext';
 import { useUserCredentials } from '~/hooks/hooks';
 import { AppStyleProvider, appTheme } from '~/styles/Style';
 import { useRouter } from 'next/router';
+import BgGlow from '~/components/BgGlow';
 
 const footerPages = ['/', '/contribute', '/developer', '/notifications', '/freeclassrooms'];
 
@@ -34,6 +35,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <>
          <TimeTableInputContext.Provider value={{ timeTableInput, setTimeTableInput }}>
             <UserCredentialsContext.Provider value={{ user, setUser }}>
+               <BgGlow />
                <NextNProgress color="var(--loader-color)" />
                <AppStyleProvider theme={appTheme}>
                   <DarkTheme />

src/styles/globals.css

@@ -40,7 +40,7 @@
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
 
-   --bg-color: rgb(20, 20, 20);
+   --bg-color: rgba(20, 20, 20, 0);
 
    --card-color: rgb(255, 255, 255, 0.02);
    --card-color-dark: rgb(255, 255, 255, 0.09);