refactor

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()

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'

web/src/components/App/index.jsx

@@ -1,7 +1,6 @@
-import useMediaQuery from '@material-ui/core/useMediaQuery'
+import { MuiThemeProvider } from '@material-ui/core'
-import { createMuiTheme, 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'
-
+import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup'
-// 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' },
-})
 
 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(
+  const materialUITheme = useMaterialUITheme()
-    () =>
-      createMuiTheme({
-        palette: {
-          type: prefersDarkMode ? 'dark' : 'light',
-          primary: { main: '#00a572' },
-          secondary: { main: '#ffa724' },
-          tonalOffset: 0.2,
-        },
-        typography: { fontFamily: 'Open Sans, sans-serif' },
-      }),
-    [prefersDarkMode],
-  )
   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 (
-    <MuiThemeProvider theme={baseTheme}>
+    <MuiThemeProvider theme={materialUITheme}>
       <CssBaseline />
 
       {/* Div100vh - iOS WebKit fix  */}

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
+}

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()

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(), {

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()