sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 21:46:11 +05:00
Code Issues Packages Projects Releases Wiki Activity

added dark theme

Browse Source
This commit is contained in:
Daniel Shleifman
2021-06-26 21:31:43 +03:00
parent d5458a112e
commit 72ff729ee8
24 changed files with 950 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
web/src/components/App/index.jsx
View File

@@ -1,8 +1,14 @@
import CssBaseline from '@material-ui/core/CssBaseline'
import { useEffect, useState } from 'react'
import { createContext, useEffect, useState } from 'react'
import Typography from '@material-ui/core/Typography'
import IconButton from '@material-ui/core/IconButton'
import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons'
import {
Menu as MenuIcon,
Close as CloseIcon,
Brightness4 as Brightness4Icon,
Brightness5 as Brightness5Icon,
BrightnessAuto as BrightnessAutoIcon,
} from '@material-ui/icons'
import { echoHost } from 'utils/Hosts'
import Div100vh from 'react-div-100vh'
import axios from 'axios'
@@ -16,18 +22,20 @@ import { useQuery } from 'react-query'
import { getTorrents } from 'utils/Utils'
import GlobalStyle from 'style/GlobalStyle'
import { AppWrapper, AppHeader, LanguageSwitch } from './style'
import { AppWrapper, AppHeader, HeaderToggle } from './style'
import Sidebar from './Sidebar'
import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup'
import { lightTheme, THEME_MODES, useMaterialUITheme } from '../../style/materialUISetup'
import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
export const DarkModeContext = createContext()
export default function App() {
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
const [torrServerVersion, setTorrServerVersion] = useState('')
// https://material-ui.com/ru/customization/palette/
const [isDarkMode, muiTheme] = useMaterialUITheme()
const [isDarkMode, currentThemeMode, setCurrentThemeMode, muiTheme] = useMaterialUITheme()
const [currentLang, changeLang] = useChangeLanguage()
const [isOffline, setIsOffline] = useState(false)
const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -45,54 +53,74 @@ export default function App() {
<>
<GlobalStyle />
<MuiThemeProvider theme={muiTheme}>
<StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
<CssBaseline />
<DarkModeContext.Provider value={{ isDarkMode }}>
<MuiThemeProvider theme={muiTheme}>
<StyledComponentsThemeProvider
theme={getStyledComponentsTheme(isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT)}
>
<CssBaseline />
{/* Div100vh - iOS WebKit fix */}
<Div100vh>
<AppWrapper>
<AppHeader>
<IconButton
style={{ marginRight: '20px' }}
color='inherit'
onClick={() => setIsDrawerOpen(!isDrawerOpen)}
edge='start'
>
{isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
</IconButton>
{/* Div100vh - iOS WebKit fix */}
<Div100vh>
<AppWrapper>
<AppHeader>
<IconButton
style={{ marginRight: '20px' }}
color='inherit'
onClick={() => setIsDrawerOpen(!isDrawerOpen)}
edge='start'
>
{isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
</IconButton>
<Typography variant='h6' noWrap>
TorrServer {torrServerVersion}
</Typography>
<Typography variant='h6' noWrap>
TorrServer {torrServerVersion}
</Typography>
<div style={{ justifySelf: 'end' }}>
<LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
{currentLang === 'en' ? 'RU' : 'EN'}
</LanguageSwitch>
</div>
</AppHeader>
<div
style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}
>
<HeaderToggle
onClick={() => {
currentThemeMode === THEME_MODES.LIGHT && setCurrentThemeMode(THEME_MODES.DARK)
currentThemeMode === THEME_MODES.DARK && setCurrentThemeMode(THEME_MODES.AUTO)
currentThemeMode === THEME_MODES.AUTO && setCurrentThemeMode(THEME_MODES.LIGHT)
}}
>
{currentThemeMode === THEME_MODES.LIGHT ? (
<Brightness5Icon />
) : currentThemeMode === THEME_MODES.DARK ? (
<Brightness4Icon />
) : (
<BrightnessAutoIcon />
)}
</HeaderToggle>
<HeaderToggle onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
{currentLang === 'en' ? 'RU' : 'EN'}
</HeaderToggle>
</div>
</AppHeader>
<MuiThemeProvider theme={darkTheme}>
<Sidebar
isOffline={isOffline}
isLoading={isLoading}
isDrawerOpen={isDrawerOpen}
setIsDonationDialogOpen={setIsDonationDialogOpen}
/>
</MuiThemeProvider>
<TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
<TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
<MuiThemeProvider theme={lightTheme}>
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
</MuiThemeProvider>
<MuiThemeProvider theme={lightTheme}>
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
</MuiThemeProvider>
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
</AppWrapper>
</Div100vh>
</StyledComponentsThemeProvider>
</MuiThemeProvider>
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
</AppWrapper>
</Div100vh>
</StyledComponentsThemeProvider>
</MuiThemeProvider>
</DarkModeContext.Provider>
</>
)
}