Change styling on settings

3 files changed, 79 insertions, 13 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 309be1315..3d46fd376 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -107,6 +107,22 @@ const messages = defineMessages({
     id: 'settings.app.sectionSidebarSettings',
     defaultMessage: 'Sidebar Settings',
   },
+  sectionPrivacy: {
+    id: 'settings.app.sectionPrivacy',
+    defaultMessage: 'Privacy Settings',
+  },
+  sectionLanguage: {
+    id: 'settings.app.sectionLanguage',
+    defaultMessage: 'Language Settings',
+  },
+  sectionAdvanced: {
+    id: 'settings.app.sectionAdvanced',
+    defaultMessage: 'Advanced Settings',
+  },
+  sectionUpdates: {
+    id: 'settings.app.sectionUpdates',
+    defaultMessage: 'App Updates Settings',
+  },
   sectionServiceIconsSettings: {
     id: 'settings.app.sectionServiceIconsSettings',
     defaultMessage: 'Service Icons Settings',
@@ -220,7 +236,8 @@ const messages = defineMessages({
   },
 });
 
-const Hr = () => <hr style={{ marginBottom: 20 }} />;
+const Hr = () => <hr className='settings__hr' style={{ marginBottom: 20, borderStyle: "dashed" }} />;
+const HrSections = () => <hr className='settings__hr-sections' style={{ marginTop: 20, marginBottom: 40, borderStyle: "solid" }} />;
 
 class EditSettingsForm extends Component {
   static propTypes = {
@@ -438,10 +455,12 @@ class EditSettingsForm extends Component {
                 <Toggle field={form.$('runInBackground')} />
                 <Toggle field={form.$('confirmOnQuit')} />
                 <Toggle field={form.$('enableSystemTray')} />
+                {reloadAfterResume && <Hr />}
                 <Toggle field={form.$('reloadAfterResume')} />
                 {reloadAfterResume && (
                   <div>
                     <Input field={form.$('reloadAfterResumeTime')} />
+                    <Hr />
                   </div>
                 )}
                 <Toggle field={form.$('startMinimized')} />
@@ -452,6 +471,7 @@ class EditSettingsForm extends Component {
 
                 {!hasAddedTodosAsService && (
                   <>
+                    {isTodosActivated && <Hr />}
                     <Toggle field={form.$('enableTodos')} />
                     {isTodosActivated && (
                       <div>
@@ -479,10 +499,10 @@ class EditSettingsForm extends Component {
                         )}
                       </div>
                     )}
-                    <Hr />
                   </>
                 )}
 
+                {scheduledDNDEnabled && <Hr />}
                 <Toggle field={form.$('scheduledDNDEnabled')} />
 
                 {scheduledDNDEnabled && (
@@ -539,7 +559,7 @@ class EditSettingsForm extends Component {
 
                 <Select field={form.$('navigationBarBehaviour')} />
 
-                <Hr />
+                <HrSections />
 
                 <H2 className='settings__section_header'>
                   {intl.formatMessage(messages.sectionHibernation)}
@@ -595,6 +615,7 @@ class EditSettingsForm extends Component {
                   </>
                 )}
 
+                {isSplitModeEnabled && <Hr />}
                 <Toggle field={form.$('splitMode')} />
                 {isSplitModeEnabled && (
                   <Input
@@ -607,7 +628,7 @@ class EditSettingsForm extends Component {
                   />
                 )}
 
-                <Hr />
+                <HrSections />
                 <H2 className='settings__section_header'>
                   {intl.formatMessage(messages.sectionAccentColorSettings)}
                 </H2>
@@ -646,7 +667,7 @@ class EditSettingsForm extends Component {
                   />
                 </div>
                 </p>
-                <Hr />
+                <HrSections />
 
                 <H2 className='settings__section_header'>
                   {intl.formatMessage(messages.sectionSidebarSettings)}
@@ -668,7 +689,7 @@ class EditSettingsForm extends Component {
 
                 <Toggle field={form.$('alwaysShowWorkspaces')} />
 
-                <Hr />
+                <HrSections />
 
                 <H2 className='settings__section_header'>
                   {intl.formatMessage(messages.sectionServiceIconsSettings)}
@@ -676,14 +697,20 @@ class EditSettingsForm extends Component {
 
                 <Toggle field={form.$('showDisabledServices')} />
                 <Toggle field={form.$('showServiceName')} />
+
+                {isUseGrayscaleServicesEnabled && <Hr />}
+
                 <Toggle field={form.$('useGrayscaleServices')} />
 
                 {isUseGrayscaleServicesEnabled && (
-                  <Slider
-                      type="number"
-                      onChange={e => this.submit(e)}
-                      field={form.$('grayscaleServicesDim')}
-                  />
+                  <>
+                    <Slider
+                        type="number"
+                        onChange={e => this.submit(e)}
+                        field={form.$('grayscaleServicesDim')}
+                    />
+                    <Hr />
+                  </>
                 )}
 
                 <Toggle field={form.$('showMessageBadgeWhenMuted')} />
@@ -695,6 +722,10 @@ class EditSettingsForm extends Component {
             {/* Privacy */}
             {this.state.activeSetttingsTab === 'privacy' && (
               <div>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionPrivacy)}
+                </H2>
+
                 <Toggle field={form.$('privateNotifications')} />
                 <Toggle field={form.$('clipboardNotifications')} />
                 {(isWindows || isMac) && (
@@ -705,8 +736,6 @@ class EditSettingsForm extends Component {
 
                 <Select field={form.$('searchEngine')} />
 
-                <Hr />
-
                 <p className="settings__help">
                   {intl.formatMessage(messages.appRestartRequired)}
                 </p>
@@ -760,6 +789,11 @@ class EditSettingsForm extends Component {
             {/* Language */}
             {this.state.activeSetttingsTab === 'language' && (
               <div>
+
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionLanguage)}
+                </H2>
+
                 <Select field={form.$('locale')} showLabel={false} />
 
                 <Hr />
@@ -794,6 +828,11 @@ class EditSettingsForm extends Component {
             {/* Advanced */}
             {this.state.activeSetttingsTab === 'advanced' && (
               <div>
+
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionAdvanced)}
+                </H2>
+
                 <Toggle field={form.$('enableGPUAcceleration')} />
                 <Toggle field={form.$('enableGlobalHideShortcut')} />
                 <p className="settings__help indented__help">
@@ -883,6 +922,10 @@ class EditSettingsForm extends Component {
             {/* Updates */}
             {this.state.activeSetttingsTab === 'updates' && (
               <div>
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionUpdates)}
+                </H2>
+
                 <Toggle field={form.$('automaticUpdates')} />
                 {automaticUpdates && (
                   <>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index be6d68f3a..a08cf7bea 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -277,6 +277,10 @@
   "settings.app.sectionMain": "Main",
   "settings.app.sectionServiceIconsSettings": "Service Icons Settings",
   "settings.app.sectionSidebarSettings": "Sidebar Settings",
+  "settings.app.sectionPrivacy": "Privacy Settings",
+  "settings.app.sectionLanguage": "Language Settings",
+  "settings.app.sectionAdvanced": "Advanced Settings",
+  "settings.app.sectionUpdates": "App Updates Settings",
   "settings.app.spellCheckerLanguageInfo": "Ferdium uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
   "settings.app.subheadlineCache": "Cache",
   "settings.app.subheadlineFerdiumProfile": "Ferdium Profile",
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 236bda860..e0b7d39dd 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -23,6 +23,15 @@
 }
 
 .theme__dark {
+
+  .settings__hr {
+    color: rgba($dark-theme-gray, 0.8);
+  }
+  
+  .settings__hr-sections {
+    color: rgba($dark-theme-text-color, 0.5);
+  }
+
   .settings-wrapper {
     background: rgba($dark-theme-black, 0.8);
   }
@@ -36,6 +45,7 @@
 
     .settings__section_header {
       text-align: center;
+      margin-bottom: 40px;
     }
 
     .settings__main {
@@ -176,9 +186,18 @@
     overflow: hidden;
     background: #fff;
   }
+
+  .settings__hr {
+    color: rgba($theme-gray, 0.2);
+  }
   
+  .settings__hr-sections {
+    color: rgba($theme-gray, 0.4);
+  }
+
   .settings__section_header {
     text-align: center;
+    margin-bottom: 40px;
   }
 
   .settings__settings-group__apply-color {