Merge pull request #74 from YouROK/use-auto-dark-palette-and-About

Use auto dark palette and about
2025-12-19 13:36:09 +05:00 · 2021-06-18 13:40:55 +03:00
parent 91fc0a3579 ba0e121b5d
commit 2a46b3df66
10 changed files with 399 additions and 339 deletions
--- a/build-all.sh
+++ b/build-all.sh
@@ -56,7 +56,7 @@ for PLATFORM in "${PLATFORMS[@]}"; do
  set_goarm "$GOARCH"
  BIN_FILENAME="${OUTPUT}-${GOOS}-${GOARCH}${GOARM}"
  if [[ "${GOOS}" == "windows" ]]; then BIN_FILENAME="${BIN_FILENAME}.exe"; fi
-  CMD="GOOS=${GOOS} GOARCH=${GOARCH} ${GO_ARM} CGO_ENABLED=1 ${GOBIN} build ${BUILD_FLAGS} -o ${BIN_FILENAME} ./cmd"
+  CMD="GOOS=${GOOS} GOARCH=${GOARCH} ${GO_ARM} ${GOBIN} build ${BUILD_FLAGS} -o ${BIN_FILENAME} ./cmd"
  echo "${CMD}"
  eval "$CMD" || FAILURES="${FAILURES} ${GOOS}/${GOARCH}${GOARM}"
 done
--- a/web/src/components/About.jsx
+++ b/web/src/components/About.jsx
@@ -11,6 +11,8 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'
 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'

 export default function AboutDialog() {
  const { t } = useTranslation()
@@ -29,13 +31,16 @@ export default function AboutDialog() {
        <ListItemText primary={t('About')} />
      </ListItem>

-      <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='lg'>
+      <ThemeProvider theme={lightTheme}>
+        <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='sm'>
          <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>

          <DialogContent>
            <center>
              <h2>TorrServer {torrServerVersion}</h2>
-            <a href='https://github.com/YouROK/TorrServer'>https://github.com/YouROK/TorrServer</a>
+              <a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
+                https://github.com/YouROK/TorrServer
+              </a>
            </center>
            <DialogContent>
              <center>
@@ -43,13 +48,25 @@ export default function AboutDialog() {
              </center>
              <br />
              <h2>{t('SpecialThanks')}</h2>
-            <b>anacrolix Matt Joiner</b> <a href='https://github.com/anacrolix/'>github.com/anacrolix</a>
+              <b>anacrolix Matt Joiner</b>&nbsp;
+              <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
+                github.com/anacrolix
+              </a>
              <br />
-            <b>nikk</b> <a href='https://github.com/tsynik'>github.com/tsynik</a>
+              <b>nikk</b>&nbsp;
+              <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
+                github.com/tsynik
+              </a>
              <br />
-            <b>dancheskus</b> <a href='https://github.com/dancheskus'>github.com/dancheskus</a>
+              <b>dancheskus</b>&nbsp;
+              <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
+                github.com/dancheskus
+              </a>
              <br />
-            <b>tw1cker Руслан Пахнев</b> <a href='https://github.com/Nemiroff'>github.com/Nemiroff</a>
+              <b>tw1cker Руслан Пахнев</b>&nbsp;
+              <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
+                github.com/Nemiroff
+              </a>
              <br />
              <b>SpAwN_LMG</b>
              <br />
@@ -62,6 +79,7 @@ export default function AboutDialog() {
            </Button>
          </DialogActions>
        </Dialog>
+      </ThemeProvider>
    </div>
  )
 }
--- a/web/src/components/Add/AddDialog.jsx
+++ b/web/src/components/Add/AddDialog.jsx
@@ -12,6 +12,8 @@ import usePreviousState from 'utils/usePreviousState'
 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 { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -204,6 +206,7 @@ export default function AddDialog({
  }

  return (
+    <ThemeProvider theme={lightTheme}>
      <Dialog
        open
        onClose={handleClose}
@@ -264,9 +267,14 @@ export default function AddDialog({
            onClick={handleSave}
            color='primary'
          >
-          {isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
+            {isLoadingButton ? (
+              <CircularProgress style={{ color: 'white' }} size={20} />
+            ) : (
+              t(isEditMode ? 'Save' : 'Add')
+            )}
          </Button>
        </ButtonWrapper>
      </Dialog>
+    </ThemeProvider>
  )
 }
--- a/web/src/components/App/Sidebar.jsx
+++ b/web/src/components/App/Sidebar.jsx
@@ -21,29 +21,19 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
    <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
      <List>
        <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
-
        <RemoveAll isOffline={isOffline} isLoading={isLoading} />
      </List>
-
      <Divider />
-
      <List>
        <SettingsDialog />
-
-        <CloseServer isOffline={isOffline} isLoading={isLoading} />
-      </List>
-
-      <Divider />
-
-      <List>
        <AboutDialog />
-
        <ListItem button onClick={() => setIsDonationDialogOpen(true)}>
          <ListItemIcon>
            <CreditCardIcon />
          </ListItemIcon>
          <ListItemText primary={t('Donate')} />
        </ListItem>
+        <CloseServer isOffline={isOffline} isLoading={isLoading} />
      </List>
    </AppSidebarStyle>
  )
--- a/web/src/components/App/index.jsx
+++ b/web/src/components/App/index.jsx
@@ -1,6 +1,7 @@
-import CssBaseline from '@material-ui/core/CssBaseline'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'
-import { useEffect, useState } from 'react'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { useEffect, useMemo, 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'
@@ -11,21 +12,50 @@ 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 { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'

 import { AppWrapper, AppHeader, LanguageSwitch } from './style'
 import Sidebar from './Sidebar'

-const baseTheme = createMuiTheme({
-  palette: { primary: { main: '#00a572' }, secondary: { main: '#ffa724' }, tonalOffset: 0.2 },
+// 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(
+    () =>
+      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, {
@@ -66,17 +96,18 @@ export default function App() {
              </LanguageSwitch>
            </div>
          </AppHeader>
-
+          <ThemeProvider theme={darkTheme}>
            <Sidebar
              isOffline={isOffline}
              isLoading={isLoading}
              isDrawerOpen={isDrawerOpen}
              setIsDonationDialogOpen={setIsDonationDialogOpen}
            />
-
+          </ThemeProvider>
          <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
-
+          <ThemeProvider theme={lightTheme}>
            {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+          </ThemeProvider>
          {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
        </AppWrapper>
      </Div100vh>
--- a/web/src/components/App/style.js
+++ b/web/src/components/App/style.js
@@ -19,14 +19,14 @@ export const CenteredGrid = styled.div`

 export const AppHeader = styled.div`
  background: #00a572;
-  color: rgba(0, 0, 0, 0.87);
+  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 24px;
+  padding: 0 16px;
  z-index: 3;
 `
 export const AppSidebarStyle = styled.div`
@@ -37,7 +37,8 @@ export const AppSidebarStyle = styled.div`
    overflow-x: hidden;
    transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
-    background: #eee;
+    background: #575757;
+    color: #eee;
    white-space: nowrap;
  `}
 `
@@ -76,7 +77,7 @@ export const LanguageSwitch = styled.div`
  font-weight: 600;
  display: grid;
  place-items: center;
-  color: #44795e;
+  color: #fff;

  :hover {
    background: #7ec9a3;
--- a/web/src/components/CloseServer.jsx
+++ b/web/src/components/CloseServer.jsx
@@ -3,6 +3,8 @@ import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, Lis
 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'

 export default function CloseServer({ isOffline, isLoading }) {
  const { t } = useTranslation()
@@ -20,6 +22,7 @@ export default function CloseServer({ isOffline, isLoading }) {
        <ListItemText primary={t('CloseServer')} />
      </ListItem>

+      <ThemeProvider theme={lightTheme}>
        <Dialog open={open} onClose={closeDialog}>
          <DialogTitle>{t('CloseServer?')}</DialogTitle>
          <DialogActions>
@@ -40,6 +43,7 @@ export default function CloseServer({ isOffline, isLoading }) {
            </Button>
          </DialogActions>
        </Dialog>
+      </ThemeProvider>
    </>
  )
 }
--- a/web/src/components/Donate/DonateDialog.jsx
+++ b/web/src/components/Donate/DonateDialog.jsx
@@ -15,7 +15,7 @@ export default function DonateDialog({ onClose }) {
  const { t } = useTranslation()

  return (
-    <Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth>
+    <Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='xs'>
      <DialogTitle id='form-dialog-title'>{t('Donate')}</DialogTitle>
      <DialogContent>
        <List>
--- a/web/src/components/RemoveAll.jsx
+++ b/web/src/components/RemoveAll.jsx
@@ -6,6 +6,8 @@ import DeleteIcon from '@material-ui/icons/Delete'
 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'

 const fnRemoveAll = () => {
  fetch(torrentsHost(), {
@@ -47,6 +49,7 @@ export default function RemoveAll({ isOffline, isLoading }) {
        <ListItemText primary={t('RemoveAll')} />
      </ListItem>

+      <ThemeProvider theme={lightTheme}>
        <Dialog open={open} onClose={closeDialog}>
          <DialogTitle>{t('DeleteTorrents?')}</DialogTitle>
          <DialogActions>
@@ -67,6 +70,7 @@ export default function RemoveAll({ isOffline, isLoading }) {
            </Button>
          </DialogActions>
        </Dialog>
+      </ThemeProvider>
    </>
  )
 }
--- a/web/src/components/Settings.jsx
+++ b/web/src/components/Settings.jsx
@@ -13,6 +13,8 @@ import Button from '@material-ui/core/Button'
 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'

 export default function SettingsDialog() {
  const { t } = useTranslation()
@@ -100,6 +102,7 @@ export default function SettingsDialog() {
        <ListItemText primary={t('Settings')} />
      </ListItem>

+      <ThemeProvider theme={lightTheme}>
        <Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
          <DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
          <DialogContent>
@@ -287,6 +290,7 @@ export default function SettingsDialog() {
            </Button>
          </DialogActions>
        </Dialog>
+      </ThemeProvider>
    </div>
  )
 }