adaptive design added

web/src/components/Settings/SettingsDialog.jsx

@@ -6,14 +6,13 @@ import { FormControlLabel, useMediaQuery, useTheme } from '@material-ui/core'
 import { settingsHost } from 'utils/Hosts'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Header } from 'style/DialogStyles'
 import AppBar from '@material-ui/core/AppBar'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
 import SwipeableViews from 'react-swipeable-views'
 import CircularProgress from '@material-ui/core/CircularProgress'
 
-import { FooterSection, Content } from './style'
+import { SettingsHeader, FooterSection, Content } from './style'
 import defaultSettings from './defaultSettings'
 import { a11yProps, TabPanel } from './tabComponents'
 import PrimarySettingsComponent from './PrimarySettingsComponent'
@@ -81,7 +80,23 @@ export default function SettingsDialog({ handleClose }) {
 
   return (
     <Dialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md'>
-      <Header>{t('SettingsDialog.Settings')}</Header>
+      <SettingsHeader>
+        <div>{t('SettingsDialog.Settings')}</div>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={isProMode}
+              onChange={({ target: { checked } }) => {
+                setIsProMode(checked)
+                localStorage.setItem('isProMode', checked)
+                if (!checked) setSelectedTab(0)
+              }}
+              style={{ color: 'white' }}
+            />
+          }
+          label={t('SettingsDialog.ProMode')}
+        />
+      </SettingsHeader>
 
       <AppBar position='static' color='default'>
         <Tabs
@@ -133,42 +148,25 @@ export default function SettingsDialog({ handleClose }) {
       </Content>
 
       <FooterSection>
-        <FormControlLabel
+        <Button onClick={handleClose} color='secondary' variant='outlined'>
-          control={
+          {t('Cancel')}
-            <Checkbox
+        </Button>
-              checked={isProMode}
-              onChange={({ target: { checked } }) => {
-                setIsProMode(checked)
-                localStorage.setItem('isProMode', checked)
-                if (!checked) setSelectedTab(0)
-              }}
-              color='primary'
-            />
-          }
-          label={t('SettingsDialog.ProMode')}
-        />
 
-        <div>
+        <Button
-          <Button onClick={handleClose} color='secondary' variant='outlined'>
+          onClick={() => {
-            {t('Cancel')}
+            setCacheSize(defaultSettings.CacheSize)
-          </Button>
+            setCachePercentage(defaultSettings.ReaderReadAHead)
+            updateSettings(defaultSettings)
+          }}
+          color='secondary'
+          variant='outlined'
+        >
+          {t('SettingsDialog.ResetToDefault')}
+        </Button>
 
-          <Button
+        <Button variant='contained' onClick={handleSave} color='primary'>
-            onClick={() => {
+          {t('Save')}
-              setCacheSize(defaultSettings.CacheSize)
+        </Button>
-              setCachePercentage(defaultSettings.ReaderReadAHead)
-              updateSettings(defaultSettings)
-            }}
-            color='secondary'
-            variant='outlined'
-          >
-            Reset to default
-          </Button>
-
-          <Button variant='contained' onClick={handleSave} color='primary'>
-            {t('Save')}
-          </Button>
-        </div>
       </FooterSection>
     </Dialog>
   )

web/src/components/Settings/style.js

@@ -1,18 +1,33 @@
 import styled, { css } from 'styled-components'
 import { mainColors } from 'style/colors'
+import { Header } from 'style/DialogStyles'
 
 export const cacheBeforeReaderColor = '#b3dfc9'
 export const cacheAfterReaderColor = mainColors.light.primary
 
-export const FooterSection = styled.div`
+export const SettingsHeader = styled(Header)`
-  padding: 20px;
+  display: grid;
-  display: flex;
+  grid-auto-flow: column;
   align-items: center;
   justify-content: space-between;
+
+  @media (max-width: 340px) {
+    grid-auto-flow: row;
+  }
+`
+
+export const FooterSection = styled.div`
+  padding: 20px;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: end;
+  gap: 10px;
+  align-items: center;
   background: #e8e5eb;
 
-  > :last-child > :not(:last-child) {
+  @media (max-width: 500px) {
-    margin-right: 10px;
+    grid-auto-flow: row;
+    justify-content: stretch;
   }
 `
 export const Divider = styled.div`
@@ -24,11 +39,12 @@ export const Divider = styled.div`
 export const Content = styled.div`
   ${({ isLoading }) => css`
     background: #f1eff3;
-    min-height: 500px;
     overflow: auto;
+    flex: 1;
 
     ${isLoading &&
     css`
+      min-height: 500px;
       display: grid;
       place-items: center;
     `}
@@ -74,6 +90,7 @@ export const StorageButton = styled.div`
   ${({ small, selected }) => css`
     transition: 0.2s;
     cursor: default;
+    text-align: center;
 
     ${!selected &&
     css`
@@ -110,18 +127,22 @@ export const StorageIconWrapper = styled.div`
     svg {
       transform: rotate(-45deg) scale(0.75);
     }
+
+    @media (max-width: 930px) {
+      width: ${small ? '50px' : '90px'};
+      height: ${small ? '50px' : '90px'};
+    }
   `}
 `
 
 export const CacheStorageSelector = styled.div`
   display: grid;
   grid-template-rows: max-content 1fr;
-  grid-template-columns: 1fr 1fr;
   grid-template-areas: 'label label';
   place-items: center;
 
   @media (max-width: 930px) {
-    grid-template-columns: repeat(2, max-content);
+    justify-content: start;
     column-gap: 30px;
   }
 `

web/src/locales/en/translation.json

@@ -97,6 +97,7 @@
     "RemoveRetrackers": "Remove retrackers",
     "ReplaceRetrackers": "Replace retrackers",
     "RetrackersMode": "Retrackers Mode",
+    "ResetToDefault": "Reset to default",
     "Settings": "Settings",
     "TorrentDisconnectTimeout": "Torrent Disconnect Timeout",
     "TorrentsSavePath": "Torrents Save Path",

web/src/locales/ru/translation.json

@@ -97,6 +97,7 @@
     "RemoveRetrackers": "Удалять",
     "ReplaceRetrackers": "Заменять",
     "RetrackersMode": "Ретрекеры",
+    "ResetToDefault": "Сбросить по умолчанию",
     "Settings": "Настройки",
     "TorrentDisconnectTimeout": "Тайм-аут отключения торрента (секунды)",
     "TorrentsSavePath": "Путь хранения кеша",