update web

web/src/components/Settings/PrimarySettingsComponent.jsx

@@ -147,6 +147,7 @@ export default function PrimarySettingsComponent({
             label={t('SettingsDialog.TorrentsSavePath')}
             value={TorrentsSavePath}
             type='url'
+            variant='outlined'
             fullWidth
           />
         </div>

web/src/components/Settings/SecondarySettingsComponent.jsx

@@ -61,6 +61,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         label={t('SettingsDialog.TorrentDisconnectTimeout')}
         value={TorrentDisconnectTimeout}
         type='number'
+        variant='outlined'
         fullWidth
       />
       <br />
@@ -71,6 +72,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         label={t('SettingsDialog.ConnectionsLimit')}
         value={ConnectionsLimit}
         type='number'
+        variant='outlined'
         fullWidth
       />
       <br />
@@ -86,6 +88,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         label={t('SettingsDialog.DhtConnectionLimit')}
         value={DhtConnectionLimit}
         type='number'
+        variant='outlined'
         fullWidth
       />
       <br />
@@ -96,6 +99,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         label={t('SettingsDialog.DownloadRateLimit')}
         value={DownloadRateLimit}
         type='number'
+        variant='outlined'
         fullWidth
       />
       <br />
@@ -111,6 +115,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         label={t('SettingsDialog.UploadRateLimit')}
         value={UploadRateLimit}
         type='number'
+        variant='outlined'
         fullWidth
       />
       <br />
@@ -121,6 +126,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         label={t('SettingsDialog.PeersListenPort')}
         value={PeersListenPort}
         type='number'
+        variant='outlined'
         fullWidth
       />
       <br />
@@ -130,7 +136,15 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       />
       <br />
       <InputLabel htmlFor='RetrackersMode'>{t('SettingsDialog.RetrackersMode')}</InputLabel>
-      <Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}>
+      <Select
+        onChange={inputForm}
+        margin='dense'
+        type='number'
+        native
+        id='RetrackersMode'
+        value={RetrackersMode}
+        variant='outlined'
+      >
         <option value={0}>{t('SettingsDialog.DontAddRetrackers')}</option>
         <option value={1}>{t('SettingsDialog.AddRetrackers')}</option>
         <option value={2}>{t('SettingsDialog.RemoveRetrackers')}</option>

web/src/components/Settings/style.js

@@ -67,7 +67,7 @@ export const PreloadCacheValue = styled.div`
     display: grid;
     grid-template-columns: max-content 100px 1fr;
     gap: 10px;
-    align-items: center;
+    align-items: flex-start;
 
     :not(:last-child) {
       margin-bottom: 5px;
@@ -76,9 +76,10 @@ export const PreloadCacheValue = styled.div`
     :before {
       content: '';
       background: ${color};
-      width: 15px;
-      height: 15px;
+      width: 16px;
+      height: 16px;
       border-radius: 50%;
+      margin-top: 2px;
     }
   `}
 `

web/src/style/colors.js

@@ -109,9 +109,11 @@ export const mainColors = {
   light: {
     primary: '#00a572',
     secondary: '#00a572',
+    labels: rgba('#000', 0.9),
   },
   dark: {
     primary: '#323637',
     secondary: '#dee3e5',
+    labels: rgba('#fff', 0.9),
   },
 }

web/src/style/materialUISetup.js

@@ -52,6 +52,23 @@ export const useMaterialUITheme = () => {
           primary: { main: mainColors[theme].primary },
           secondary: { main: mainColors[theme].secondary },
         },
+        overrides: {
+          MuiInputBase: {
+            input: {
+              color: mainColors[theme].labels,
+            },
+          },
+          MuiInputLabel: { // MuiFormLabel
+            root: {
+              color: mainColors[theme].labels,
+              // fontSize: '22px',
+              marginBottom: '10px',
+              '&$focused': {
+                color: mainColors[theme].labels,
+              },
+            },
+          },
+        },
       }),
     [theme],
   )