hide broken donate form and adjust paperColor

web/src/components/App/index.jsx

@@ -22,7 +22,7 @@ import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-component
 import { useQuery } from 'react-query'
 import { getTorrents, isStandaloneApp } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'
-import { lightTheme, THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
+import { /* lightTheme, */ THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
 import getStyledComponentsTheme from 'style/getStyledComponentsTheme'
 import checkIsIOS from 'utils/checkIsIOS'
 
@@ -132,9 +132,9 @@ export default function App() {
                   setIsDonationDialogOpen={setIsDonationDialogOpen}
                 />
 
-                <MuiThemeProvider theme={lightTheme}>
+                {/* <MuiThemeProvider theme={lightTheme}> */}
-                  {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+                {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-                </MuiThemeProvider>
+                {/* </MuiThemeProvider> */}
 
                 {snackbarIsClosed ? checkIsIOS() && !isStandaloneApp && <PWAInstallationGuide /> : <DonateSnackbar />}
               </AppWrapper>

web/src/components/Donate/DonateDialog.jsx

@@ -1,16 +1,15 @@
-import ListItem from '@material-ui/core/ListItem'
+// import ListItem from '@material-ui/core/ListItem'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogActions from '@material-ui/core/DialogActions'
-import List from '@material-ui/core/List'
+// import List from '@material-ui/core/List'
 import ButtonGroup from '@material-ui/core/ButtonGroup'
 import Button from '@material-ui/core/Button'
 import { useTranslation } from 'react-i18next'
 import { StyledDialog } from 'style/CustomMaterialUiStyles'
 import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
-const donateFrame =
+// const donateFrame = '<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="320" height="320" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
-  '<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="320" height="320" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
 
 export default function DonateDialog({ onClose }) {
   const { t } = useTranslation()
@@ -20,20 +19,20 @@ export default function DonateDialog({ onClose }) {
     <StyledDialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='xs' ref={ref}>
       <DialogTitle id='form-dialog-title'>{t('Donate')}</DialogTitle>
       <DialogContent>
-        <List>
+        {/* <List> */}
-          <ListItem key='DonateLinks'>
+        {/* <ListItem key='DonateLinks'> */}
-            <ButtonGroup variant='outlined' color='primary' aria-label='contained primary button group'>
+        <ButtonGroup variant='outlined' color='secondary' aria-label='contained primary button group'>
-              <Button onClick={() => window.open('https://boosty.to/yourok', '_blank')}>Boosty</Button>
+          <Button onClick={() => window.open('https://boosty.to/yourok', '_blank')}>Boosty</Button>
-              <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>IO.Money</Button>
+          <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>IO.Money</Button>
-              <Button onClick={() => window.open('https://qiwi.com/n/YOUROK85', '_blank')}>QIWI</Button>
+          <Button onClick={() => window.open('https://qiwi.com/n/YOUROK85', '_blank')}>QIWI</Button>
-              <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
+          {/* <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button> */}
-            </ButtonGroup>
+        </ButtonGroup>
-          </ListItem>
+        {/* </ListItem> */}
-          <ListItem key='DonateForm'>
+        {/* <ListItem key='DonateForm'> */}
-            {/* eslint-disable-next-line react/no-danger */}
+        {/* eslint-disable-next-line react/no-danger */}
-            <div dangerouslySetInnerHTML={{ __html: donateFrame }} />
+        {/* <div dangerouslySetInnerHTML={{ __html: donateFrame }} /> */}
-          </ListItem>
+        {/* </ListItem> */}
-        </List>
+        {/* </List> */}
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose} color='secondary' variant='contained'>

web/src/style/colors.js

@@ -110,10 +110,12 @@ export const mainColors = {
     primary: '#00a572',
     secondary: '#00a572',
     labels: rgba('#000', 0.9),
+    paperColor: '#eeeeee',
   },
   dark: {
     primary: '#323637',
     secondary: '#dee3e5',
     labels: rgba('#fff', 0.9),
+    paperColor: '#323637',
   },
 }

web/src/style/materialUISetup.js

@@ -58,6 +58,11 @@ export const useMaterialUITheme = () => {
               fontSize: '1.2rem',
             },
           },
+          MuiPaper: {
+            root: {
+              backgroundColor: mainColors[theme].paperColor,
+            },
+          },
           MuiInputBase: {
             input: {
               color: mainColors[theme].labels,