Merge branch 'dark-light-theme'

web/src/components/About.jsx

@@ -12,7 +12,11 @@ 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 { themeColors } from 'style/colors'
+
+import { lightTheme } from '../style/materialUISetup'
+
+const { primary } = themeColors
 
 export default function AboutDialog() {
   const { t } = useTranslation()
@@ -38,7 +42,7 @@ export default function AboutDialog() {
           <DialogContent>
             <center>
               <h2>TorrServer {torrServerVersion}</h2>
-              <a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
+              <a style={{ color: primary }} href='https://github.com/YouROK/TorrServer'>
                 https://github.com/YouROK/TorrServer
               </a>
             </center>
@@ -49,22 +53,22 @@ export default function AboutDialog() {
               <br />
               <h2>{t('SpecialThanks')}</h2>
               <b>anacrolix Matt Joiner</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
+              <a style={{ color: primary }} href='https://github.com/anacrolix/'>
                 github.com/anacrolix
               </a>
               <br />
               <b>nikk</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
+              <a style={{ color: primary }} href='https://github.com/tsynik'>
                 github.com/tsynik
               </a>
               <br />
               <b>dancheskus</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
+              <a style={{ color: primary }} href='https://github.com/dancheskus'>
                 github.com/dancheskus
               </a>
               <br />
               <b>tw1cker Руслан Пахнев</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
+              <a style={{ color: primary }} href='https://github.com/Nemiroff'>
                 github.com/Nemiroff
               </a>
               <br />

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 'style/materialUISetup'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'

web/src/components/Add/style.js

@@ -2,7 +2,8 @@ import { Button } from '@material-ui/core'
 import styled, { css } from 'styled-components'
 
 export const Header = styled.div`
-  background: #00a572;
+  ${({ theme: { primary } }) => css`
+    background: ${primary};
     color: rgba(0, 0, 0, 0.87);
     font-size: 20px;
     color: #fff;
@@ -10,6 +11,7 @@ export const Header = styled.div`
     box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
     padding: 15px 24px;
     position: relative;
+  `}
 `
 
 export const Content = styled.div`

web/src/components/App/index.jsx

@@ -1,7 +1,5 @@
-import useMediaQuery from '@material-ui/core/useMediaQuery'
-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'
@@ -12,50 +10,24 @@ import TorrentList from 'components/TorrentList'
 import DonateSnackbar from 'components/Donate'
 import DonateDialog from 'components/Donate/DonateDialog'
 import useChangeLanguage from 'utils/useChangeLanguage'
-import { ThemeProvider } from '@material-ui/core/styles'
+import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'
+import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components'
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
+import GlobalStyle from 'style/GlobalStyle'
 
 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 '../../style/materialUISetup'
+import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
 
 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 [isDarkMode, muiTheme] = useMaterialUITheme()
   const [currentLang, changeLang] = useChangeLanguage()
   const [isOffline, setIsOffline] = useState(false)
   const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -70,7 +42,11 @@ export default function App() {
   }, [])
 
   return (
-    <MuiThemeProvider theme={baseTheme}>
+    <>
+      <GlobalStyle />
+
+      <MuiThemeProvider theme={muiTheme}>
+        <StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
           <CssBaseline />
 
           {/* Div100vh - iOS WebKit fix  */}
@@ -97,24 +73,26 @@ export default function App() {
                 </div>
               </AppHeader>
 
-          <ThemeProvider theme={darkTheme}>
+              <MuiThemeProvider theme={darkTheme}>
                 <Sidebar
                   isOffline={isOffline}
                   isLoading={isLoading}
                   isDrawerOpen={isDrawerOpen}
                   setIsDonationDialogOpen={setIsDonationDialogOpen}
                 />
-          </ThemeProvider>
+              </MuiThemeProvider>
 
               <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
 
-          <ThemeProvider theme={lightTheme}>
+              <MuiThemeProvider theme={lightTheme}>
                 {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-          </ThemeProvider>
+              </MuiThemeProvider>
 
               {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
             </AppWrapper>
           </Div100vh>
+        </StyledComponentsThemeProvider>
       </MuiThemeProvider>
+    </>
   )
 }

web/src/components/App/style.js

@@ -18,7 +18,8 @@ export const CenteredGrid = styled.div`
 `
 
 export const AppHeader = styled.div`
-  background: #00a572;
+  ${({ theme: { primary } }) => css`
+    background: ${primary};
     color: #fff;
     grid-area: head;
     display: grid;
@@ -28,6 +29,7 @@ export const AppHeader = styled.div`
     box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
     padding: 0 16px;
     z-index: 3;
+  `}
 `
 export const AppSidebarStyle = styled.div`
   ${({ isDrawerOpen }) => css`

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 '../style/materialUISetup'
 
 export default function CloseServer({ isOffline, isLoading }) {
   const { t } = useTranslation()

web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js

@@ -1,10 +1,12 @@
+import { themeColors } from 'style/colors'
+
 export const snakeSettings = {
   default: {
     borderWidth: 1,
     pieceSize: 14,
     gapBetweenPieces: 3,
     borderColor: '#dbf2e8',
-    completeColor: '#00a572',
+    completeColor: themeColors.primary,
     backgroundColor: '#fff',
     progressColor: '#b3dfc9',
     readerColor: '#000',

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 '../style/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 '../style/materialUISetup'
 
 export default function SettingsDialog() {
   const { t } = useTranslation()

web/src/components/TorrentCard/style.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const TorrentCard = styled.div`
+  ${({ theme: { primary } }) => css`
     border-radius: 5px;
     display: grid;
     grid-template-columns: 120px 260px 1fr;
@@ -8,7 +9,7 @@ export const TorrentCard = styled.div`
     grid-template-areas: 'poster description buttons';
     gap: 10px;
     padding: 10px;
-  background: #00a572;
+    background: ${primary};
     box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 
     @media (max-width: 1260px), (max-height: 500px) {
@@ -24,6 +25,7 @@ export const TorrentCard = styled.div`
       grid-template-columns: 60px 1fr;
       grid-template-rows: 90px max-content;
     }
+  `}
 `
 
 export const TorrentCardPoster = styled.div`

web/src/components/TorrentList/AddFirstTorrent.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { themeColors } from 'style/colors'
 
 import AddDialog from '../Add/AddDialog'
 import IconWrapper from './style'
@@ -16,7 +17,7 @@ export default function AddFirstTorrent() {
         <lord-icon
           src='https://cdn.lordicon.com/bbnkwdur.json'
           trigger='loop'
-          colors='primary:#121331,secondary:#00A572'
+          colors={`primary:#121331,secondary:${themeColors.primary}`}
           stroke='26'
           scale='60'
         />

web/src/components/TorrentList/NoServerConnection.jsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { themeColors } from 'style/colors'
 
 import IconWrapper from './style'
 
@@ -10,7 +11,7 @@ export default function NoServerConnection() {
       <lord-icon
         src='https://cdn.lordicon.com/wrprwmwt.json'
         trigger='loop'
-        colors='primary:#121331,secondary:#00A572'
+        colors={`primary:#121331,secondary:${themeColors.primary}`}
         stroke='26'
         scale='60'
       />

web/src/index.css

@@ -1,20 +0,0 @@
-*,
-*::before,
-*::after {  
-  margin: 0;
-  padding: 0;
-  box-sizing: inherit;
-}
-
-body {  
-  font-family: "Open Sans", sans-serif;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  letter-spacing: -0.1px;
-}
-
-button {
-  font-family: "Open Sans", sans-serif;
-  letter-spacing: -0.1px;
-}

web/src/index.jsx

@@ -5,8 +5,6 @@ import { QueryClientProvider, QueryClient } from 'react-query'
 import App from './components/App'
 import 'i18n'
 
-import './index.css'
-
 const queryClient = new QueryClient()
 
 ReactDOM.render(

web/src/style/GlobalStyle.js

@@ -0,0 +1,24 @@
+import { createGlobalStyle } from 'styled-components'
+
+export default createGlobalStyle`
+  *,
+  *::before,
+  *::after {  
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+  }
+
+  body {  
+    font-family: "Open Sans", sans-serif;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    letter-spacing: -0.1px;
+  }
+
+  button {
+    font-family: "Open Sans", sans-serif;
+    letter-spacing: -0.1px;
+  }
+`

web/src/style/colors.js

@@ -0,0 +1,8 @@
+export const themeColors = {
+  light: {},
+  dark: {},
+}
+
+export const mainColors = {
+  primary: '#00a572',
+}

web/src/style/getStyledComponentsTheme.js

@@ -0,0 +1,3 @@
+import { mainColors, themeColors } from './colors'
+
+export default type => ({ ...themeColors[type], ...mainColors })

web/src/style/materialUISetup.js

@@ -0,0 +1,37 @@
+import useMediaQuery from '@material-ui/core/useMediaQuery'
+import { createMuiTheme } from '@material-ui/core'
+import { useMemo } from 'react'
+
+import { mainColors } from './colors'
+
+// 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 isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+
+  const muiTheme = useMemo(
+    () =>
+      createMuiTheme({
+        palette: {
+          type: isDarkMode ? 'dark' : 'light',
+          primary: { main: mainColors.primary },
+        },
+        typography: { fontFamily: 'Open Sans, sans-serif' },
+      }),
+    [isDarkMode],
+  )
+
+  return [isDarkMode, muiTheme]
+}