vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add toggle dark theme button

Browse Source
This commit is contained in:
RohitR311
2025-01-08 13:09:00 +05:30
parent 0d5ac2b8a1
commit 3f9afc1427
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/molecules/NavBar.tsx
View File

@@ -4,8 +4,8 @@ import axios from 'axios';
import styled from "styled-components"; import styled from "styled-components";
import { stopRecording } from "../../api/recording"; import { stopRecording } from "../../api/recording";
import { useGlobalInfoStore } from "../../context/globalInfo"; import { useGlobalInfoStore } from "../../context/globalInfo";
import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar } from "@mui/material"; import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar, Tooltip } from "@mui/material";
import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language } from "@mui/icons-material"; import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language, Brightness7, Brightness4 } from "@mui/icons-material";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../../context/auth'; import { AuthContext } from '../../context/auth';
import { SaveRecording } from '../molecules/SaveRecording'; import { SaveRecording } from '../molecules/SaveRecording';
@@ -176,21 +176,21 @@ export const NavBar: React.FC<NavBarProps> = ({
// </> // </>
// ); // );
// const renderThemeToggle = () => ( const renderThemeToggle = () => (
// <Tooltip title="Toggle light/dark theme"> <Tooltip title="Toggle light/dark theme">
// <IconButton <IconButton
// onClick={toggleTheme} onClick={toggleTheme}
// sx={{ sx={{
// color: darkMode ? '#ffffff' : '#333333', color: darkMode ? '#ffffff' : '#333333',
// '&:hover': { '&:hover': {
// color: '#ff00c3' color: '#ff00c3'
// } }
// }} }}
// > >
// {darkMode ? <Brightness7 /> : <Brightness4 />} {darkMode ? <Brightness7 /> : <Brightness4 />}
// </IconButton> </IconButton>
// </Tooltip> </Tooltip>
// ); );
// const renderRecordingControls = () => ( // const renderRecordingControls = () => (
// <> // <>
@@ -502,6 +502,7 @@ export const NavBar: React.FC<NavBarProps> = ({
</MenuItem> </MenuItem>
</Menu> </Menu>
</Menu> </Menu>
{renderThemeToggle()}
</> </>
) : ( ) : (
<> <>
@@ -587,7 +588,7 @@ export const NavBar: React.FC<NavBarProps> = ({
Deutsch Deutsch
</MenuItem> </MenuItem>
</Menu></> </Menu></>
)} )}
</NavBarWrapper> </NavBarWrapper>
</> </>
); );