primary color replaced to theme primary color

2025-12-19 21:46:11 +05:00 · 2021-06-20 22:43:21 +03:00
parent a026f05205
commit 033aa3153f
18 changed files with 158 additions and 122 deletions
--- a/web/src/components/About.jsx
+++ b/web/src/components/About.jsx
@@ -12,8 +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 { themeColors } from 'style/colors'

-import { lightTheme } from './App/materialUISetup'
+import { lightTheme } from '../style/materialUISetup'
+
+const { primary } = themeColors

 export default function AboutDialog() {
  const { t } = useTranslation()
@@ -39,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>
@@ -50,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 />
--- 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/materialUISetup'
+import { lightTheme } from 'style/materialUISetup'

 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
--- a/web/src/components/Add/style.js
+++ b/web/src/components/Add/style.js
@@ -2,14 +2,16 @@ import { Button } from '@material-ui/core'
 import styled, { css } from 'styled-components'

 export const Header = styled.div`
-  background: #00a572;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 20px;
-  color: #fff;
-  font-weight: 600;
-  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;
+  ${({ theme: { primary } }) => css`
+    background: ${primary};
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 20px;
+    color: #fff;
+    font-weight: 600;
+    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`
--- a/web/src/components/App/index.jsx
+++ b/web/src/components/App/index.jsx
@@ -1,4 +1,3 @@
-import { MuiThemeProvider } from '@material-ui/core'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { useEffect, useState } from 'react'
 import Typography from '@material-ui/core/Typography'
@@ -11,13 +10,16 @@ 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'
-import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup'
+import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup'
+import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'

 export default function App() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -25,7 +27,7 @@ export default function App() {
  const [torrServerVersion, setTorrServerVersion] = useState('')

  // https://material-ui.com/ru/customization/palette/
-  const materialUITheme = useMaterialUITheme()
+  const [isDarkMode, muiTheme] = useMaterialUITheme()
  const [currentLang, changeLang] = useChangeLanguage()
  const [isOffline, setIsOffline] = useState(false)
  const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -40,51 +42,57 @@ export default function App() {
  }, [])

  return (
-    <MuiThemeProvider theme={materialUITheme}>
-      <CssBaseline />
+    <>
+      <GlobalStyle />

-      {/* Div100vh - iOS WebKit fix  */}
-      <Div100vh>
-        <AppWrapper>
-          <AppHeader>
-            <IconButton
-              style={{ marginRight: '20px' }}
-              color='inherit'
-              onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-              edge='start'
-            >
-              {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
-            </IconButton>
+      <MuiThemeProvider theme={muiTheme}>
+        <StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
+          <CssBaseline />

-            <Typography variant='h6' noWrap>
-              TorrServer {torrServerVersion}
-            </Typography>
+          {/* Div100vh - iOS WebKit fix  */}
+          <Div100vh>
+            <AppWrapper>
+              <AppHeader>
+                <IconButton
+                  style={{ marginRight: '20px' }}
+                  color='inherit'
+                  onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+                  edge='start'
+                >
+                  {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+                </IconButton>

-            <div style={{ justifySelf: 'end' }}>
-              <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
-                {currentLang === 'en' ? 'RU' : 'EN'}
-              </LanguageSwitch>
-            </div>
-          </AppHeader>
+                <Typography variant='h6' noWrap>
+                  TorrServer {torrServerVersion}
+                </Typography>

-          <ThemeProvider theme={darkTheme}>
-            <Sidebar
-              isOffline={isOffline}
-              isLoading={isLoading}
-              isDrawerOpen={isDrawerOpen}
-              setIsDonationDialogOpen={setIsDonationDialogOpen}
-            />
-          </ThemeProvider>
+                <div style={{ justifySelf: 'end' }}>
+                  <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+                    {currentLang === 'en' ? 'RU' : 'EN'}
+                  </LanguageSwitch>
+                </div>
+              </AppHeader>

-          <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
+              <MuiThemeProvider theme={darkTheme}>
+                <Sidebar
+                  isOffline={isOffline}
+                  isLoading={isLoading}
+                  isDrawerOpen={isDrawerOpen}
+                  setIsDonationDialogOpen={setIsDonationDialogOpen}
+                />
+              </MuiThemeProvider>

-          <ThemeProvider theme={lightTheme}>
-            {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-          </ThemeProvider>
+              <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />

-          {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
-        </AppWrapper>
-      </Div100vh>
-    </MuiThemeProvider>
+              <MuiThemeProvider theme={lightTheme}>
+                {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+              </MuiThemeProvider>
+
+              {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
+            </AppWrapper>
+          </Div100vh>
+        </StyledComponentsThemeProvider>
+      </MuiThemeProvider>
+    </>
  )
 }
--- a/web/src/components/App/materialUISetup.js
+++ b/web/src/components/App/materialUISetup.js
@@ -1,35 +0,0 @@
-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
-}
--- a/web/src/components/App/style.js
+++ b/web/src/components/App/style.js
@@ -18,16 +18,18 @@ export const CenteredGrid = styled.div`
 `

 export const AppHeader = styled.div`
-  background: #00a572;
-  color: #fff;
-  grid-area: head;
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  grid-template-columns: repeat(2, max-content) 1fr;
-  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;
+  ${({ theme: { primary } }) => css`
+    background: ${primary};
+    color: #fff;
+    grid-area: head;
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+    grid-template-columns: repeat(2, max-content) 1fr;
+    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`
--- a/web/src/components/CloseServer.jsx
+++ b/web/src/components/CloseServer.jsx
@@ -5,7 +5,7 @@ import { shutdownHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
 import { ThemeProvider } from '@material-ui/core/styles'

-import { lightTheme } from './App/materialUISetup'
+import { lightTheme } from '../style/materialUISetup'

 export default function CloseServer({ isOffline, isLoading }) {
  const { t } = useTranslation()
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
+++ b/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',
--- a/web/src/components/RemoveAll.jsx
+++ b/web/src/components/RemoveAll.jsx
@@ -8,7 +8,7 @@ import { torrentsHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
 import { ThemeProvider } from '@material-ui/core/styles'

-import { lightTheme } from './App/materialUISetup'
+import { lightTheme } from '../style/materialUISetup'

 const fnRemoveAll = () => {
  fetch(torrentsHost(), {
--- a/web/src/components/Settings.jsx
+++ b/web/src/components/Settings.jsx
@@ -15,7 +15,7 @@ import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
 import { ThemeProvider } from '@material-ui/core/styles'

-import { lightTheme } from './App/materialUISetup'
+import { lightTheme } from '../style/materialUISetup'

 export default function SettingsDialog() {
  const { t } = useTranslation()
--- a/web/src/components/TorrentCard/style.js
+++ b/web/src/components/TorrentCard/style.js
@@ -1,29 +1,31 @@
 import styled, { css } from 'styled-components'

 export const TorrentCard = styled.div`
-  border-radius: 5px;
-  display: grid;
-  grid-template-columns: 120px 260px 1fr;
-  grid-template-rows: 180px;
-  grid-template-areas: 'poster description buttons';
-  gap: 10px;
-  padding: 10px;
-  background: #00a572;
-  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%);
+  ${({ theme: { primary } }) => css`
+    border-radius: 5px;
+    display: grid;
+    grid-template-columns: 120px 260px 1fr;
+    grid-template-rows: 180px;
+    grid-template-areas: 'poster description buttons';
+    gap: 10px;
+    padding: 10px;
+    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) {
-    grid-template-areas:
-      'poster description'
-      'buttons buttons';
+    @media (max-width: 1260px), (max-height: 500px) {
+      grid-template-areas:
+        'poster description'
+        'buttons buttons';

-    grid-template-columns: 70px 1fr;
-    grid-template-rows: 110px max-content;
-  }
+      grid-template-columns: 70px 1fr;
+      grid-template-rows: 110px max-content;
+    }

-  @media (max-width: 770px) {
-    grid-template-columns: 60px 1fr;
-    grid-template-rows: 90px max-content;
-  }
+    @media (max-width: 770px) {
+      grid-template-columns: 60px 1fr;
+      grid-template-rows: 90px max-content;
+    }
+  `}
 `

 export const TorrentCardPoster = styled.div`
--- a/web/src/components/TorrentList/AddFirstTorrent.jsx
+++ b/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'
        />
--- a/web/src/components/TorrentList/NoServerConnection.jsx
+++ b/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'
      />