Skip to content

added dark mode toggle feature and logedIn authentication . #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vimmishra wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added dark mode toggle feature and logedIn authentication . #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions client/src/context/themeContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { createContext, useContext, useMemo, useState } from "react";
import { ThemeProvider as MuiThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
const [mode, setMode] = useState(localStorage.getItem("theme") || "light");

const toggleTheme = () => {
const newMode = mode === "light" ? "dark" : "light";
setMode(newMode);
localStorage.setItem("theme", newMode);
};

const theme = useMemo(
() =>
createTheme({
palette: {
mode,
},
}),
[mode]
);

return (
<ThemeContext.Provider value={{ mode, toggleTheme }}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
{children}
</MuiThemeProvider>
</ThemeContext.Provider>
);
};

export const useThemeContext = () => useContext(ThemeContext);
176 changes: 134 additions & 42 deletions client/src/layouts/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,136 @@
import { AppBar, Toolbar, Box, Typography, Button, ButtonGroup } from '@mui/material';
import { Link } from 'react-router-dom'
import Cookies from 'js-cookie'
import {
AppBar,
Toolbar,
Box,
Typography,
Button,
ButtonGroup,
IconButton
} from '@mui/material';
import { Link } from 'react-router-dom';
import Cookies from 'js-cookie';
import AlertBox from '../../components/common/AlertBox';
import { Brightness4, Brightness7 } from '@mui/icons-material';
import { useThemeContext } from '../context/themeContext';
import { useTheme } from '@mui/material/styles';

export default function NavBar() {
const cookie = Cookies.get(import.meta.env.VITE_COOKIE_KEY)
return (
<Box>
<AppBar position="static" sx={{ backgroundColor: "transparent", borderBottom: "1px solid #59e3a7", padding: "5px 0" }} elevation={0} >
<Toolbar>
<Box sx={{ maxWidth: "1280px", width: "100%", marginLeft: "auto", marginRight: "auto" }}>
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<Link to="/" style={{ textDecoration: 'none', color: 'inherit' }} >
<Box sx={{ display: "flex", justifyContent: "space-between", gap: "10px" }}>
<img src="./images/favicon.ico" width="55" alt="Thinkify" />
<Typography
sx={{
fontFamily: "Platypi",
color: "#1b2e35"
}}
variant="h3"
component="h3"
>Thinkify</Typography>
</Box>
</Link>
<Box >
{
!cookie && <>
<ButtonGroup >
<Link to="/registration"><Button sx={{ backgroundColor: "#1b2e35", color: "white", "&:hover": { backgroundColor: "#1b2e35" } }}>Join</Button></Link>
<Link to="/login"><Button sx={{ backgroundColor: "#1b2e35", color: "white", "&:hover": { backgroundColor: "#1b2e35" } }}>Login</Button></Link>
</ButtonGroup>
</>
}
</Box>
</Box>
</Box>
</Toolbar>
</AppBar>
<AlertBox />
</Box>
);
}
export default function NavBar({ forceLoginText = false }) {
const cookie = Cookies.get("thinkify");
const { toggleTheme } = useThemeContext();
const theme = useTheme();


const isLoggedIn = cookie && !forceLoginText;

return (
<Box
sx={{
bgcolor: "background.paper",
color: "text.primary",
p: 2,
borderRadius: 2,
boxShadow: 3,
}}
>
<AppBar
position="static"
sx={{
backgroundColor: "transparent",
borderBottom: "1px solid #59e3a7",
padding: "5px 0"
}}
elevation={0}
>
<Toolbar>
<Box
sx={{
maxWidth: "1280px",
width: "100%",
marginLeft: "auto",
marginRight: "auto"
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center"
}}
>
{/* Left: Logo and Brand */}
<Link
to="/"
style={{ textDecoration: 'none', color: 'inherit' }}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<img src="./images/favicon.ico" width="55" alt="Thinkify" />
<Typography
sx={{
fontFamily: "Platypi",
color: "#1b2e35"
}}
variant="h3"
component="h3"
>
Thinkify
</Typography>
</Box>
</Link>

{/* Right: Auth Buttons and Toggle */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
{!isLoggedIn ?(
<ButtonGroup>
<Link to="/registration">
<Button
sx={{
backgroundColor: "#1b2e35",
color: "white",
"&:hover": { backgroundColor: "#1b2e35" }
}}
>
Join
</Button>
</Link>
<Link to="/login">
<Button
sx={{
backgroundColor: "#1b2e35",
color: "white",
"&:hover": { backgroundColor: "#1b2e35" }
}}
>
Login
</Button>
</Link>
</ButtonGroup>
) : (
<ButtonGroup>
<Link to="/login">
<Button
sx={{
backgroundColor: "#1b2e35",
color: "white",
"&:hover": { backgroundColor: "#1b2e35" }
}}
>
LoggedIn
</Button>
</Link>
</ButtonGroup>
)}

<IconButton onClick={toggleTheme} color="inherit" sx={{
color: theme.palette.mode === "light" ? "#000" : "#fff"
}}>
{theme.palette.mode === "dark" ? <Brightness7 /> : <Brightness4/>}
</IconButton>
</Box>
</Box>
</Box>
</Toolbar>
</AppBar>
<AlertBox />
</Box>
);
}
6 changes: 6 additions & 0 deletions client/src/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,18 @@ import './index.css'
import { RouterProvider } from 'react-router-dom';
import router from './routes/router.jsx';
import Provider from '../provider/Provider.jsx';
import { ThemeProvider } from './context/themeContext.jsx';


ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<CssBaseline>
<Provider>
<ThemeProvider>
<div className="min-h-screen bg-white text-black dark:bg-gray-900 dark:text-white transition-colors duration-300">
<RouterProvider router={router} />
</div>
</ThemeProvider>
</Provider>
</CssBaseline>
</React.StrictMode>,
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Home = () => {
}, []);
return (
<>
<NavBar />
<NavBar forceLoginText={true} />
<Banner />
<Features />
<Newsletter />
Expand Down
25 changes: 21 additions & 4 deletions client/src/pages/Profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@ import TaskIcon from "@mui/icons-material/Task";

import ProfileCardDetails from "../../components/profile/profile/ProfileCardDetails";
import ActivityGrid from "../../components/profile/profile/ActivityGrid";

import { useTheme } from '@mui/material/styles';
const Profile = () => {

const theme = useTheme();


return (
<>
<Grid container spacing={2}>
Expand Down Expand Up @@ -47,10 +51,15 @@ const Profile = () => {
padding: "15px",
fontSize: "20px",
fontWeight: "semibold",
backgroundColor: "white",
backgroundColor: (theme) =>
theme.palette.mode === 'light' ? 'white' : '#333',
color: (theme) =>
theme.palette.mode === 'light' ? 'black' : 'white',

borderRadius: "50%",
textAlign: "center",
margin: "10px auto 0 auto",

}}
>
<Typography variant="span">45</Typography>
Expand Down Expand Up @@ -84,7 +93,11 @@ const Profile = () => {
padding: "15px",
fontSize: "20px",
fontWeight: "semibold",
backgroundColor: "white",
backgroundColor: (theme) =>
theme.palette.mode === 'light' ? 'white' : '#333',
color: (theme) =>
theme.palette.mode === 'light' ? 'black' : 'white',

borderRadius: "50%",
textAlign: "center",
margin: "10px auto 0 auto",
Expand Down Expand Up @@ -121,7 +134,11 @@ const Profile = () => {
padding: "15px",
fontSize: "20px",
fontWeight: "semibold",
backgroundColor: "white",
backgroundColor: (theme) =>
theme.palette.mode === 'light' ? 'white' : '#333',
color: (theme) =>
theme.palette.mode === 'light' ? 'black' : 'white',

borderRadius: "50%",
textAlign: "center",
margin: "10px auto 0 auto",
Expand Down
Loading