added dark mode (#151)

frontend/components/HomeSection/HomeSection.jsx

@@ -167,7 +167,7 @@ function HomeSection(props) {
           </Button></ThemeProvider>
         </motion.div>
 
-        <div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
+        <div className={styles.info} style={{ marginBottom: '40px', color: 'white', fontWeight: 'bold', fontSize: '1rem' }}>
           <motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
             Need more advanced features? |{' '}
             <Link href="/signup">

frontend/components/NavBar/index.js

@@ -13,6 +13,8 @@ import {
   Typography,
   alpha,
 } from '@mui/material'
+import LightModeIcon from '@mui/icons-material/LightMode'
+import DarkModeIcon from '@mui/icons-material/DarkMode'
 import GitHubIcon from '@mui/icons-material/GitHub'
 import MenuIcon from '@mui/icons-material/Menu'
 import NavbarStyle from './Navbar.style'
@@ -21,11 +23,11 @@ import UserAuth, { UserContext } from 'helpers/user/usercontext'
 import Link from 'next/link'
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout']
 import NotFound from '@pages/404'
-
-function Index(props) {
+function Index() {
+  //IMP
+  // const [mode, handleLightMode, handleDarkMode] = useContext(UserAuth)
   const [anchorElNav, setAnchorElNav] = React.useState(null)
   const [anchorElUser, setAnchorElUser] = React.useState(null)
-
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget)
   }
@@ -40,8 +42,7 @@ function Index(props) {
   const handleCloseUserMenu = () => {
     setAnchorElUser(null)
   }
-
-  const { user, login, logout } = useContext(UserAuth)
+  const { user, login, logout, mode, handleLightMode, handleDarkMode } = useContext(UserAuth)
 
   return (
     <NavbarStyle
@@ -132,6 +133,7 @@ function Index(props) {
                   </a>
                 </Link>
               </MenuItem>
+
             </Menu>
           </Box>
 
@@ -187,7 +189,6 @@ function Index(props) {
               </Button>
             </a>
           </Box>
-
           {user ? (
             <Box sx={{ flexGrow: 0 }}>
               <Tooltip title="Open settings">
@@ -240,7 +241,22 @@ function Index(props) {
               <Link href="./login">LOGIN</Link>
             </Typography>
           )}
+        <Box sx={{
+        width: 20,
+        marginLeft: 3,
+        display: 'flex',
+        cursor: 'pointer'
+      }}    
+            >
+              {
+              mode === 'light' ? 
+              <div onClick={handleLightMode}><DarkModeIcon/></div> 
+            : <div onClick={handleDarkMode}><LightModeIcon/></div>
+            }
+
+            </Box>
         </Toolbar>
+        
       </Container>
     </NavbarStyle>
   )

frontend/helpers/user/userState.js

@@ -23,6 +23,13 @@ const fetchJWT = () => {
 }
 
 const UserAuthProvider = ({ children }) => {
+   const handleLightMode = () => {
+    setMode('dark')
+  }
+  const handleDarkMode = () => {
+    setMode('light')
+  }
+  const [mode,setMode] = useState('light')
   const [user, setUser] = useState(null)
   const [jwt, setJwt] = useState(null)
   const login = async ({ email, password }) => {
@@ -87,7 +94,7 @@ const UserAuthProvider = ({ children }) => {
     setJwt(null)
     storeJWT(null)
   }
-  const context = { jwt, user, login, logout, createAcc }
+  const context = { jwt, user, mode, login, logout, createAcc, handleLightMode, handleDarkMode }
   useEffect(() => {
     let jwt = fetchJWT()
     if (jwt) {

frontend/pages/contributors.js

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Navbar from 'components/NavBar'
 import Contributors from 'components/Contributors/Contributors'
 import Footer from 'components/Footer/Footer'
+import UserAuth, { UserContext } from '../helpers/user/usercontext'
 function contributors() {
+  const { mode } = useContext(UserAuth)
   return (
     <>
-      <main className={'main-bg'}>
+      <main className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
         <Navbar />
         <Contributors />
         <Footer />

frontend/pages/index.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import Head from 'next/head'
 import HomeSection from 'components/HomeSection/HomeSection'
 import NavBar from 'components/NavBar'
 import Features from 'components/Features'
 import Footer from 'components/Footer/Footer'
-
+import UserAuth, { UserContext } from '../helpers/user/usercontext'
 export default function Home() {
   const [shortUrl, setShortUrl] = useState(null)
   const [longUrl, setLongUrl] = useState('')
   const [qrData, setQrData] = useState('')
   const [showQrCode, setShowQrCode] = useState(false)
-
+  const { mode } = useContext(UserAuth)
   return (
     <>
       <Head>
@@ -21,8 +21,8 @@ export default function Home() {
         <link href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Cabin+Sketch:wght@700&family=IBM+Plex+Serif:ital@1&family=Monoton&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&family=Poppins&family=Share+Tech+Mono&family=Special+Elite&display=swap" rel="stylesheet" />
       </Head>
 
-      <main className={'main-bg'}>
-        <NavBar />
+      <main className={mode == 'light' ? 'main-bg' : 'dark-bg'}>
+        <NavBar/>
         <HomeSection
           shortUrl={shortUrl}
           setShortUrl={setShortUrl}

frontend/pages/login.js

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import NavBar from 'components/NavBar'
 import Features from 'components/Features'
 import Login from 'components/Login/Login'
 import Footer from 'components/Footer/Footer'
+import UserAuth, { UserContext } from '../helpers/user/usercontext'
 
 export default function signup() {
+  const { mode } = useContext(UserAuth)
   return (
-    <div className="flex-column">
+    <div className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
       <NavBar />
       <Login />
       <Footer />

frontend/pages/signup.js

@@ -1,13 +1,15 @@
-import { useState } from 'react'
+import { useState, useContext } from 'react'
 import Head from 'next/head'
 import NavBar from 'components/NavBar'
 import Features from 'components/Features'
 import Reg from 'components/Reg/Reg'
 import Footer from 'components/Footer/Footer'
+import UserAuth, { UserContext } from '../helpers/user/usercontext'
 
 export default function signup() {
+  const { mode } = useContext(UserAuth)
   return (
-    <div className="flex-column">
+    <div className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
       <NavBar />
       <Reg />
       <Footer />

frontend/styles/globals.css

@@ -33,6 +33,9 @@ section {
   background-position: center;
   background-size: cover;
 }
+.dark-bg{
+  background-color: #27292b;
+}
 .main-bg {
   background-image: url('./../assets/bg/main-bg.png');
   background-repeat: no-repeat;