beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add theme switcher option

Browse source
This commit is contained in:
Abhinav 2023-01-16 14:47:37 +05:30
parent e272c6ce71
commit d4987e6370
2 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/Sidebar/ThemeSwitcher.tsx
View file

@ -2,13 +2,13 @@ import { ToggleButton, ToggleButtonGroup } from '@mui/material';
import React from 'react';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import { THEMES } from 'types/theme';
import { THEME_COLOR } from 'constants/theme';
interface Iprops {
theme: THEMES;
setTheme: (theme: THEMES) => void;
theme: THEME_COLOR;
setTheme: (theme: THEME_COLOR) => void;
}
export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
const handleChange = (event, theme: THEMES) => {
const handleChange = (event, theme: THEME_COLOR) => {
if (theme !== null) {
setTheme(theme);
}
@ -20,10 +20,10 @@ export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
value={theme}
exclusive
onChange={handleChange}>
<ToggleButton value={THEMES.LIGHT}>
<ToggleButton value={THEME_COLOR.LIGHT}>
<LightModeIcon />
</ToggleButton>
<ToggleButton value={THEMES.DARK}>
<ToggleButton value={THEME_COLOR.DARK}>
<DarkModeIcon />
</ToggleButton>
</ToggleButtonGroup>

11
src/components/Sidebar/UtilitySection.tsx
View file

@ -11,6 +11,9 @@ import isElectron from 'is-electron';
import WatchFolder from 'components/WatchFolder';
import { getDownloadAppMessage } from 'utils/ui';
import ThemeSwitcher from './ThemeSwitcher';
import { SpaceBetweenFlex } from 'components/Container';
export default function UtilitySection({ closeSidebar }) {
const router = useRouter();
const {
@ -18,6 +21,8 @@ export default function UtilitySection({ closeSidebar }) {
startLoading,
watchFolderView,
setWatchFolderView,
theme,
setTheme,
} = useContext(AppContext);
const [recoverModalView, setRecoveryModalView] = useState(false);
@ -70,6 +75,10 @@ export default function UtilitySection({ closeSidebar }) {
<SidebarButton onClick={openRecoveryKeyModal}>
{constants.RECOVERY_KEY}
</SidebarButton>
<SpaceBetweenFlex sx={{ px: 1.5 }}>
{constants.CHOSE_THEME}
<ThemeSwitcher theme={theme} setTheme={setTheme} />
</SpaceBetweenFlex>
<SidebarButton onClick={openTwoFactorModal}>
{constants.TWO_FACTOR}
</SidebarButton>
@ -85,7 +94,6 @@ export default function UtilitySection({ closeSidebar }) {
{/* <SidebarButton onClick={openThumbnailCompressModal}>
{constants.COMPRESS_THUMBNAILS}
</SidebarButton> */}
<RecoveryKey
show={recoverModalView}
onHide={closeRecoveryKeyModal}
@ -98,7 +106,6 @@ export default function UtilitySection({ closeSidebar }) {
setLoading={startLoading}
/>
<WatchFolder open={watchFolderView} onClose={closeWatchFolder} />
{/* <FixLargeThumbnails
isOpen={fixLargeThumbsView}
hide={() => setFixLargeThumbsView(false)}