From 06a4175f1c2cda81af5f4c07fd504964486f686e Mon Sep 17 00:00:00 2001
From: nikk gitanes <tsynik@gmail.com>
Date: Fri, 16 Jul 2021 09:46:34 +0300
Subject: [PATCH] use full-width right switches

---
 .../Settings/PrimarySettingsComponent.jsx       |  1 +
 .../Settings/SecondarySettingsComponent.jsx     | 17 ++++++++---------
 web/src/style/materialUISetup.js                | 13 +++++++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/components/Settings/PrimarySettingsComponent.jsx b/web/src/components/Settings/PrimarySettingsComponent.jsx
index bdc1592..e73cbcd 100644
--- a/web/src/components/Settings/PrimarySettingsComponent.jsx
+++ b/web/src/components/Settings/PrimarySettingsComponent.jsx
@@ -135,6 +135,7 @@ export default function PrimarySettingsComponent({
               <Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='secondary' />
             }
             label={t('SettingsDialog.RemoveCacheOnDrop')}
+            labelPlacement='start'
           />
           <div>
             <small>{t('SettingsDialog.RemoveCacheOnDropDesc')}</small>
diff --git a/web/src/components/Settings/SecondarySettingsComponent.jsx b/web/src/components/Settings/SecondarySettingsComponent.jsx
index 025e687..f6257c7 100644
--- a/web/src/components/Settings/SecondarySettingsComponent.jsx
+++ b/web/src/components/Settings/SecondarySettingsComponent.jsx
@@ -32,28 +32,28 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       <FormControlLabel
         control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='secondary' />}
         label='IPv6'
+        labelPlacement='start'
       />
-      <br />
       <FormControlLabel
         control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='secondary' />}
         label='TCP (Transmission Control Protocol)'
+        labelPlacement='start'
       />
-      <br />
       <FormControlLabel
         control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='secondary' />}
         label='μTP (Micro Transport Protocol)'
+        labelPlacement='start'
       />
-      <br />
       <FormControlLabel
         control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='secondary' />}
         label='PEX (Peer Exchange)'
+        labelPlacement='start'
       />
-      <br />
       <FormControlLabel
         control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='secondary' />}
         label={t('SettingsDialog.ForceEncrypt')}
+        labelPlacement='start'
       />
-      <br />
       <TextField
         onChange={inputForm}
         margin='normal'
@@ -79,8 +79,8 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       <FormControlLabel
         control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='secondary' />}
         label={t('SettingsDialog.DHT')}
+        labelPlacement='start'
       />
-      <br />
       <TextField
         onChange={inputForm}
         margin='normal'
@@ -106,8 +106,8 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       <FormControlLabel
         control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='secondary' />}
         label={t('SettingsDialog.Upload')}
+        labelPlacement='start'
       />
-      <br />
       <TextField
         onChange={inputForm}
         margin='normal'
@@ -129,13 +129,12 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         variant='outlined'
         fullWidth
       />
-      <br />
       <FormControlLabel
         control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='secondary' />}
         label='UPnP (Universal Plug and Play)'
+        labelPlacement='start'
       />
       <br />
-      <br />
       <InputLabel htmlFor='RetrackersMode'>{t('SettingsDialog.RetrackersMode')}</InputLabel>
       <Select
         onChange={inputForm}
diff --git a/web/src/style/materialUISetup.js b/web/src/style/materialUISetup.js
index 60ba155..f30d2e4 100644
--- a/web/src/style/materialUISetup.js
+++ b/web/src/style/materialUISetup.js
@@ -58,11 +58,20 @@ export const useMaterialUITheme = () => {
               color: mainColors[theme].labels,
             },
           },
+          // https://material-ui.com/ru/api/form-control-label/
+          MuiFormControlLabel: {
+            labelPlacementStart: {
+              display: 'flex',
+              justifyContent: 'space-between',
+              marginStart: 0,
+              marginTop: 6,
+              marginBottom: 2,
+            },
+          },
           MuiInputLabel: {
             root: {
               color: mainColors[theme].labels,
-              // fontSize: '22px',
-              marginBottom: '10px',
+              marginBottom: 8,
               '&$focused': {
                 color: mainColors[theme].labels,
               },