added dark mode (#151)
This commit is contained in:
parent
a33fa6e83c
commit
995ef2564a
|
@ -167,7 +167,7 @@ function HomeSection(props) {
|
||||||
</Button></ThemeProvider>
|
</Button></ThemeProvider>
|
||||||
</motion.div>
|
</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 } }}>
|
<motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
|
||||||
Need more advanced features? |{' '}
|
Need more advanced features? |{' '}
|
||||||
<Link href="/signup">
|
<Link href="/signup">
|
||||||
|
|
|
@ -13,6 +13,8 @@ import {
|
||||||
Typography,
|
Typography,
|
||||||
alpha,
|
alpha,
|
||||||
} from '@mui/material'
|
} 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 GitHubIcon from '@mui/icons-material/GitHub'
|
||||||
import MenuIcon from '@mui/icons-material/Menu'
|
import MenuIcon from '@mui/icons-material/Menu'
|
||||||
import NavbarStyle from './Navbar.style'
|
import NavbarStyle from './Navbar.style'
|
||||||
|
@ -21,11 +23,11 @@ import UserAuth, { UserContext } from 'helpers/user/usercontext'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout']
|
const settings = ['Profile', 'Account', 'Dashboard', 'Logout']
|
||||||
import NotFound from '@pages/404'
|
import NotFound from '@pages/404'
|
||||||
|
function Index() {
|
||||||
function Index(props) {
|
//IMP
|
||||||
|
// const [mode, handleLightMode, handleDarkMode] = useContext(UserAuth)
|
||||||
const [anchorElNav, setAnchorElNav] = React.useState(null)
|
const [anchorElNav, setAnchorElNav] = React.useState(null)
|
||||||
const [anchorElUser, setAnchorElUser] = React.useState(null)
|
const [anchorElUser, setAnchorElUser] = React.useState(null)
|
||||||
|
|
||||||
const handleOpenNavMenu = (event) => {
|
const handleOpenNavMenu = (event) => {
|
||||||
setAnchorElNav(event.currentTarget)
|
setAnchorElNav(event.currentTarget)
|
||||||
}
|
}
|
||||||
|
@ -40,8 +42,7 @@ function Index(props) {
|
||||||
const handleCloseUserMenu = () => {
|
const handleCloseUserMenu = () => {
|
||||||
setAnchorElUser(null)
|
setAnchorElUser(null)
|
||||||
}
|
}
|
||||||
|
const { user, login, logout, mode, handleLightMode, handleDarkMode } = useContext(UserAuth)
|
||||||
const { user, login, logout } = useContext(UserAuth)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavbarStyle
|
<NavbarStyle
|
||||||
|
@ -132,6 +133,7 @@ function Index(props) {
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|
||||||
</Menu>
|
</Menu>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
@ -187,7 +189,6 @@ function Index(props) {
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{user ? (
|
{user ? (
|
||||||
<Box sx={{ flexGrow: 0 }}>
|
<Box sx={{ flexGrow: 0 }}>
|
||||||
<Tooltip title="Open settings">
|
<Tooltip title="Open settings">
|
||||||
|
@ -240,7 +241,22 @@ function Index(props) {
|
||||||
<Link href="./login">LOGIN</Link>
|
<Link href="./login">LOGIN</Link>
|
||||||
</Typography>
|
</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>
|
</Toolbar>
|
||||||
|
|
||||||
</Container>
|
</Container>
|
||||||
</NavbarStyle>
|
</NavbarStyle>
|
||||||
)
|
)
|
||||||
|
|
|
@ -23,6 +23,13 @@ const fetchJWT = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const UserAuthProvider = ({ children }) => {
|
const UserAuthProvider = ({ children }) => {
|
||||||
|
const handleLightMode = () => {
|
||||||
|
setMode('dark')
|
||||||
|
}
|
||||||
|
const handleDarkMode = () => {
|
||||||
|
setMode('light')
|
||||||
|
}
|
||||||
|
const [mode,setMode] = useState('light')
|
||||||
const [user, setUser] = useState(null)
|
const [user, setUser] = useState(null)
|
||||||
const [jwt, setJwt] = useState(null)
|
const [jwt, setJwt] = useState(null)
|
||||||
const login = async ({ email, password }) => {
|
const login = async ({ email, password }) => {
|
||||||
|
@ -87,7 +94,7 @@ const UserAuthProvider = ({ children }) => {
|
||||||
setJwt(null)
|
setJwt(null)
|
||||||
storeJWT(null)
|
storeJWT(null)
|
||||||
}
|
}
|
||||||
const context = { jwt, user, login, logout, createAcc }
|
const context = { jwt, user, mode, login, logout, createAcc, handleLightMode, handleDarkMode }
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let jwt = fetchJWT()
|
let jwt = fetchJWT()
|
||||||
if (jwt) {
|
if (jwt) {
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
import React from 'react'
|
import React, { useContext } from 'react'
|
||||||
import Navbar from 'components/NavBar'
|
import Navbar from 'components/NavBar'
|
||||||
import Contributors from 'components/Contributors/Contributors'
|
import Contributors from 'components/Contributors/Contributors'
|
||||||
import Footer from 'components/Footer/Footer'
|
import Footer from 'components/Footer/Footer'
|
||||||
|
import UserAuth, { UserContext } from '../helpers/user/usercontext'
|
||||||
function contributors() {
|
function contributors() {
|
||||||
|
const { mode } = useContext(UserAuth)
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main className={'main-bg'}>
|
<main className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Contributors />
|
<Contributors />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
import React, { useState } from 'react'
|
import React, { useState, useContext } from 'react'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import HomeSection from 'components/HomeSection/HomeSection'
|
import HomeSection from 'components/HomeSection/HomeSection'
|
||||||
import NavBar from 'components/NavBar'
|
import NavBar from 'components/NavBar'
|
||||||
import Features from 'components/Features'
|
import Features from 'components/Features'
|
||||||
import Footer from 'components/Footer/Footer'
|
import Footer from 'components/Footer/Footer'
|
||||||
|
import UserAuth, { UserContext } from '../helpers/user/usercontext'
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [shortUrl, setShortUrl] = useState(null)
|
const [shortUrl, setShortUrl] = useState(null)
|
||||||
const [longUrl, setLongUrl] = useState('')
|
const [longUrl, setLongUrl] = useState('')
|
||||||
const [qrData, setQrData] = useState('')
|
const [qrData, setQrData] = useState('')
|
||||||
const [showQrCode, setShowQrCode] = useState(false)
|
const [showQrCode, setShowQrCode] = useState(false)
|
||||||
|
const { mode } = useContext(UserAuth)
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<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" />
|
<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>
|
</Head>
|
||||||
|
|
||||||
<main className={'main-bg'}>
|
<main className={mode == 'light' ? 'main-bg' : 'dark-bg'}>
|
||||||
<NavBar />
|
<NavBar/>
|
||||||
<HomeSection
|
<HomeSection
|
||||||
shortUrl={shortUrl}
|
shortUrl={shortUrl}
|
||||||
setShortUrl={setShortUrl}
|
setShortUrl={setShortUrl}
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import React from 'react'
|
import React, { useContext } from 'react'
|
||||||
import NavBar from 'components/NavBar'
|
import NavBar from 'components/NavBar'
|
||||||
import Features from 'components/Features'
|
import Features from 'components/Features'
|
||||||
import Login from 'components/Login/Login'
|
import Login from 'components/Login/Login'
|
||||||
import Footer from 'components/Footer/Footer'
|
import Footer from 'components/Footer/Footer'
|
||||||
|
import UserAuth, { UserContext } from '../helpers/user/usercontext'
|
||||||
|
|
||||||
export default function signup() {
|
export default function signup() {
|
||||||
|
const { mode } = useContext(UserAuth)
|
||||||
return (
|
return (
|
||||||
<div className="flex-column">
|
<div className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<Login />
|
<Login />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
@ -1,13 +1,15 @@
|
||||||
import { useState } from 'react'
|
import { useState, useContext } from 'react'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import NavBar from 'components/NavBar'
|
import NavBar from 'components/NavBar'
|
||||||
import Features from 'components/Features'
|
import Features from 'components/Features'
|
||||||
import Reg from 'components/Reg/Reg'
|
import Reg from 'components/Reg/Reg'
|
||||||
import Footer from 'components/Footer/Footer'
|
import Footer from 'components/Footer/Footer'
|
||||||
|
import UserAuth, { UserContext } from '../helpers/user/usercontext'
|
||||||
|
|
||||||
export default function signup() {
|
export default function signup() {
|
||||||
|
const { mode } = useContext(UserAuth)
|
||||||
return (
|
return (
|
||||||
<div className="flex-column">
|
<div className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<Reg />
|
<Reg />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
@ -33,6 +33,9 @@ section {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
.dark-bg{
|
||||||
|
background-color: #27292b;
|
||||||
|
}
|
||||||
.main-bg {
|
.main-bg {
|
||||||
background-image: url('./../assets/bg/main-bg.png');
|
background-image: url('./../assets/bg/main-bg.png');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
Loading…
Reference in New Issue