dark sidebar and dialogs

web/src/components/About.jsx

@@ -9,20 +9,11 @@ import InfoIcon from '@material-ui/icons/Info'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
 import { useTranslation } from 'react-i18next'
 import { echoHost } from 'utils/Hosts'
 
 export default function AboutDialog() {
   const { t } = useTranslation()
-  // https://material-ui.com/ru/customization/default-theme/
-  const darkTheme = createMuiTheme({
-    palette: {
-      type: 'dark',
-      primary: { main: '#00a572' },
-      background: { paper: '#575757' },
-    },
-  })
   const [open, setOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
   useEffect(() => {
@@ -38,61 +29,59 @@ export default function AboutDialog() {
         <ListItemText primary={t('About')} />
       </ListItem>
 
-      <ThemeProvider theme={darkTheme}>
-        <Dialog
-          open={open}
-          onClose={() => setOpen(false)}
-          aria-labelledby='form-dialog-title'
-          fullWidth='true'
-          maxWidth='sm'
-        >
-          <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby='form-dialog-title'
+        fullWidth='true'
+        maxWidth='sm'
+      >
+        <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
 
+        <DialogContent>
+          <center>
+            <h2>TorrServer {torrServerVersion}</h2>
+            <a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
+              https://github.com/YouROK/TorrServer
+            </a>
+          </center>
           <DialogContent>
             <center>
-              <h2>TorrServer {torrServerVersion}</h2>
-              <a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
-                https://github.com/YouROK/TorrServer
-              </a>
+              <h2>{t('ThanksToEveryone')}</h2>
             </center>
-            <DialogContent>
-              <center>
-                <h2>{t('ThanksToEveryone')}</h2>
-              </center>
-              <br />
-              <h2>{t('SpecialThanks')}</h2>
-              <b>anacrolix Matt Joiner</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
-                github.com/anacrolix
-              </a>
-              <br />
-              <b>nikk</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
-                github.com/tsynik
-              </a>
-              <br />
-              <b>dancheskus</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
-                github.com/dancheskus
-              </a>
-              <br />
-              <b>tw1cker Руслан Пахнев</b>&nbsp;
-              <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
-                github.com/Nemiroff
-              </a>
-              <br />
-              <b>SpAwN_LMG</b>
-              <br />
-            </DialogContent>
+            <br />
+            <h2>{t('SpecialThanks')}</h2>
+            <b>anacrolix Matt Joiner</b>&nbsp;
+            <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
+              github.com/anacrolix
+            </a>
+            <br />
+            <b>nikk</b>&nbsp;
+            <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
+              github.com/tsynik
+            </a>
+            <br />
+            <b>dancheskus</b>&nbsp;
+            <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
+              github.com/dancheskus
+            </a>
+            <br />
+            <b>tw1cker Руслан Пахнев</b>&nbsp;
+            <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
+              github.com/Nemiroff
+            </a>
+            <br />
+            <b>SpAwN_LMG</b>
+            <br />
           </DialogContent>
+        </DialogContent>
 
-          <DialogActions>
-            <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
-              {t('Close')}
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </ThemeProvider>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
+            {t('Close')}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   )
 }

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'
@@ -207,69 +209,71 @@ export default function AddDialog({
   }
 
   return (
-    <Dialog
-      open
-      onClose={handleClose}
-      aria-labelledby='form-dialog-title'
-      fullScreen={fullScreen}
-      fullWidth
-      maxWidth='md'
-    >
-      <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
+    <ThemeProvider theme={lightTheme}>
+      <Dialog
+        open
+        onClose={handleClose}
+        aria-labelledby='form-dialog-title'
+        fullScreen={fullScreen}
+        fullWidth
+        maxWidth='md'
+      >
+        <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
 
-      <Content isEditMode={isEditMode}>
-        {!isEditMode && (
-          <LeftSideComponent
+        <Content isEditMode={isEditMode}>
+          {!isEditMode && (
+            <LeftSideComponent
+              setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
+              setSelectedFile={setSelectedFile}
+              torrentSource={torrentSource}
+              setTorrentSource={setTorrentSource}
+              selectedFile={selectedFile}
+            />
+          )}
+
+          <RightSideComponent
+            originalTorrentTitle={originalTorrentTitle}
+            setTitle={setTitle}
+            setPosterUrl={setPosterUrl}
+            setIsPosterUrlCorrect={setIsPosterUrlCorrect}
             setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-            setSelectedFile={setSelectedFile}
+            setPosterList={setPosterList}
+            isTorrentSourceCorrect={isTorrentSourceCorrect}
+            isHashAlreadyExists={isHashAlreadyExists}
+            title={title}
+            parsedTitle={parsedTitle}
+            posterUrl={posterUrl}
+            isPosterUrlCorrect={isPosterUrlCorrect}
+            posterList={posterList}
+            currentLang={currentLang}
+            posterSearchLanguage={posterSearchLanguage}
+            setPosterSearchLanguage={setPosterSearchLanguage}
+            posterSearch={posterSearch}
+            removePoster={removePoster}
+            updateTitleFromSource={updateTitleFromSource}
             torrentSource={torrentSource}
-            setTorrentSource={setTorrentSource}
-            selectedFile={selectedFile}
+            isCustomTitleEnabled={isCustomTitleEnabled}
+            setIsCustomTitleEnabled={setIsCustomTitleEnabled}
+            isEditMode={isEditMode}
           />
-        )}
+        </Content>
 
-        <RightSideComponent
-          originalTorrentTitle={originalTorrentTitle}
-          setTitle={setTitle}
-          setPosterUrl={setPosterUrl}
-          setIsPosterUrlCorrect={setIsPosterUrlCorrect}
-          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-          setPosterList={setPosterList}
-          isTorrentSourceCorrect={isTorrentSourceCorrect}
-          isHashAlreadyExists={isHashAlreadyExists}
-          title={title}
-          parsedTitle={parsedTitle}
-          posterUrl={posterUrl}
-          isPosterUrlCorrect={isPosterUrlCorrect}
-          posterList={posterList}
-          currentLang={currentLang}
-          posterSearchLanguage={posterSearchLanguage}
-          setPosterSearchLanguage={setPosterSearchLanguage}
-          posterSearch={posterSearch}
-          removePoster={removePoster}
-          updateTitleFromSource={updateTitleFromSource}
-          torrentSource={torrentSource}
-          isCustomTitleEnabled={isCustomTitleEnabled}
-          setIsCustomTitleEnabled={setIsCustomTitleEnabled}
-          isEditMode={isEditMode}
-        />
-      </Content>
+        <ButtonWrapper>
+          <Button onClick={handleClose} color='primary' variant='outlined'>
+            {t('Cancel')}
+          </Button>
 
-      <ButtonWrapper>
-        <Button onClick={handleClose} color='primary' variant='outlined'>
-          {t('Cancel')}
-        </Button>
-
-        <Button
-          variant='contained'
-          style={{ minWidth: '110px' }}
-          disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
-          onClick={handleSave}
-          color='primary'
-        >
-          {isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
-        </Button>
-      </ButtonWrapper>
-    </Dialog>
+          <Button
+            variant='contained'
+            style={{ minWidth: '110px' }}
+            disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
+            onClick={handleSave}
+            color='primary'
+          >
+            {isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
+          </Button>
+        </ButtonWrapper>
+      </Dialog>
+    </ThemeProvider>
   )
 }

web/src/components/App/Sidebar.jsx

@@ -27,7 +27,6 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
 
       <List>
         <SettingsDialog />
-
         <CloseServer />
       </List>
 

web/src/components/App/index.jsx

@@ -12,10 +12,27 @@ 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 { 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' },
+  },
+})
+export const lightTheme = createMuiTheme({
+  palette: {
+    type: 'light',
+    primary: { main: '#00a572' },
+    background: { paper: '#cbe8d9' },
+  },
+})
+
 export default function App() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -68,12 +85,13 @@ export default function App() {
               </LanguageSwitch>
             </div>
           </AppHeader>
-
-          <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
-
+          <ThemeProvider theme={darkTheme}>
+            <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
+          </ThemeProvider>
           <TorrentList />
-
-          {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+          <ThemeProvider theme={darkTheme}>
+            {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+          </ThemeProvider>
           {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
         </AppWrapper>
       </Div100vh>

web/src/components/App/style.js

@@ -19,7 +19,7 @@ export const CenteredGrid = styled.div`
 
 export const AppHeader = styled.div`
   background: #00a572;
-  color: rgba(0, 0, 0, 0.87);
+  color: #1a1a1a;
   grid-area: head;
   display: grid;
   grid-auto-flow: column;
@@ -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;
   `}
 `