From a026f05205d601607a60066799d0e447c388db9c Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Sun, 20 Jun 2021 21:52:38 +0300 Subject: [PATCH] refactor --- web/src/components/About.jsx | 3 +- web/src/components/Add/AddDialog.jsx | 2 +- web/src/components/App/index.jsx | 42 ++++------------------- web/src/components/App/materialUISetup.js | 35 +++++++++++++++++++ web/src/components/CloseServer.jsx | 3 +- web/src/components/RemoveAll.jsx | 3 +- web/src/components/Settings.jsx | 3 +- 7 files changed, 50 insertions(+), 41 deletions(-) create mode 100644 web/src/components/App/materialUISetup.js diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx index 2b6b0aa..5b2ca47 100644 --- a/web/src/components/About.jsx +++ b/web/src/components/About.jsx @@ -12,7 +12,8 @@ import ListItemText from '@material-ui/core/ListItemText' import { useTranslation } from 'react-i18next' import { echoHost } from 'utils/Hosts' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' export default function AboutDialog() { const { t } = useTranslation() diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index ad6ba9a..5bcd83c 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -13,7 +13,7 @@ import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' import parseTorrent from 'parse-torrent' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' +import { lightTheme } from 'components/App/materialUISetup' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { ButtonWrapper, Content, Header } from './style' diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx index 8cb3f56..a7ffab5 100644 --- a/web/src/components/App/index.jsx +++ b/web/src/components/App/index.jsx @@ -1,7 +1,6 @@ -import useMediaQuery from '@material-ui/core/useMediaQuery' -import { createMuiTheme, MuiThemeProvider } from '@material-ui/core' +import { MuiThemeProvider } from '@material-ui/core' import CssBaseline from '@material-ui/core/CssBaseline' -import { useEffect, useMemo, useState } from 'react' +import { 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' @@ -18,44 +17,15 @@ import { getTorrents } from 'utils/Utils' import { AppWrapper, AppHeader, LanguageSwitch } from './style' import Sidebar from './Sidebar' - -// https://material-ui.com/ru/customization/default-theme/ -export const darkTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { main: '#00a572' }, - background: { paper: '#575757' }, - }, - typography: { fontFamily: 'Open Sans, sans-serif' }, -}) -export const lightTheme = createMuiTheme({ - palette: { - type: 'light', - primary: { main: '#00a572' }, - background: { paper: '#f1f1f1' }, - }, - typography: { fontFamily: 'Open Sans, sans-serif' }, -}) +import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup' export default function App() { - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false) const [torrServerVersion, setTorrServerVersion] = useState('') + // https://material-ui.com/ru/customization/palette/ - const baseTheme = useMemo( - () => - createMuiTheme({ - palette: { - type: prefersDarkMode ? 'dark' : 'light', - primary: { main: '#00a572' }, - secondary: { main: '#ffa724' }, - tonalOffset: 0.2, - }, - typography: { fontFamily: 'Open Sans, sans-serif' }, - }), - [prefersDarkMode], - ) + const materialUITheme = useMaterialUITheme() const [currentLang, changeLang] = useChangeLanguage() const [isOffline, setIsOffline] = useState(false) const { data: torrents, isLoading } = useQuery('torrents', getTorrents, { @@ -70,7 +40,7 @@ export default function App() { }, []) return ( - + {/* Div100vh - iOS WebKit fix */} diff --git a/web/src/components/App/materialUISetup.js b/web/src/components/App/materialUISetup.js new file mode 100644 index 0000000..230d942 --- /dev/null +++ b/web/src/components/App/materialUISetup.js @@ -0,0 +1,35 @@ +import useMediaQuery from '@material-ui/core/useMediaQuery' +import { createMuiTheme } from '@material-ui/core' +import { useMemo } from 'react' + +// https://material-ui.com/ru/customization/default-theme/ +export const darkTheme = createMuiTheme({ + palette: { + type: 'dark', + background: { paper: '#575757' }, + }, +}) +export const lightTheme = createMuiTheme({ + palette: { + type: 'light', + background: { paper: '#f1f1f1' }, + }, +}) + +export const useMaterialUITheme = () => { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') + + const materialUITheme = useMemo( + () => + createMuiTheme({ + palette: { + type: prefersDarkMode ? 'dark' : 'light', + primary: { main: '#00a572' }, + }, + typography: { fontFamily: 'Open Sans, sans-serif' }, + }), + [prefersDarkMode], + ) + + return materialUITheme +} diff --git a/web/src/components/CloseServer.jsx b/web/src/components/CloseServer.jsx index f68541b..4704188 100644 --- a/web/src/components/CloseServer.jsx +++ b/web/src/components/CloseServer.jsx @@ -4,7 +4,8 @@ import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons' import { shutdownHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' export default function CloseServer({ isOffline, isLoading }) { const { t } = useTranslation() diff --git a/web/src/components/RemoveAll.jsx b/web/src/components/RemoveAll.jsx index eab4dc4..b14f006 100644 --- a/web/src/components/RemoveAll.jsx +++ b/web/src/components/RemoveAll.jsx @@ -7,7 +7,8 @@ import { useState } from 'react' import { torrentsHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' const fnRemoveAll = () => { fetch(torrentsHost(), { diff --git a/web/src/components/Settings.jsx b/web/src/components/Settings.jsx index d84a0aa..e0f8507 100644 --- a/web/src/components/Settings.jsx +++ b/web/src/components/Settings.jsx @@ -14,7 +14,8 @@ import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core' import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' export default function SettingsDialog() { const { t } = useTranslation()