use dark bar with light dialogs

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,8 @@ export default function AboutDialog() {
         <ListItemText primary={t('About')} />
       </ListItem>
 
-      <Dialog
+      <ThemeProvider theme={lightTheme}>
-        open={open}
+        <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='sm'>
-        onClose={() => setOpen(false)}
-        aria-labelledby='form-dialog-title'
-        fullWidth
-        maxWidth='sm'
-      >
           <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
 
           <DialogContent>
@@ -82,6 +79,7 @@ export default function AboutDialog() {
             </Button>
           </DialogActions>
         </Dialog>
+      </ThemeProvider>
     </div>
   )
 }

web/src/components/Add/AddDialog.jsx

@@ -270,7 +270,11 @@ 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>

web/src/components/App/index.jsx

@@ -30,7 +30,7 @@ export const lightTheme = createMuiTheme({
   palette: {
     type: 'light',
     primary: { main: '#00a572' },
-    background: { paper: '#cbe8d9' },
+    background: { paper: '#f1f1f1' },
   },
   typography: { fontFamily: 'Open Sans, sans-serif' },
 })
@@ -92,7 +92,7 @@ export default function App() {
             <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
           </ThemeProvider>
           <TorrentList />
-          <ThemeProvider theme={darkTheme}>
+          <ThemeProvider theme={lightTheme}>
             {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
           </ThemeProvider>
           {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}

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() {
   const { t } = useTranslation()
@@ -20,6 +22,7 @@ export default function CloseServer() {
         <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() {
             </Button>
           </DialogActions>
         </Dialog>
+      </ThemeProvider>
     </>
   )
 }

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(), {
@@ -46,6 +48,7 @@ export default function RemoveAll() {
         <ListItemText primary={t('RemoveAll')} />
       </ListItem>
 
+      <ThemeProvider theme={lightTheme}>
         <Dialog open={open} onClose={closeDialog}>
           <DialogTitle>{t('DeleteTorrents?')}</DialogTitle>
           <DialogActions>
@@ -66,6 +69,7 @@ export default function RemoveAll() {
             </Button>
           </DialogActions>
         </Dialog>
+      </ThemeProvider>
     </>
   )
 }

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