From 0a812dc2c30425d4fa0917fc070d945240eb71c3 Mon Sep 17 00:00:00 2001
From: Oscar Dominguez <oscardom80@hotmail.com>
Date: Sun, 18 Aug 2019 15:24:04 -0300
Subject: [PATCH] fix css and darck mode const

---
 src/ui/page/settings/view.jsx        | 132 +++++++++++++--------------
 src/ui/redux/actions/settings.js     |   3 +-
 src/ui/scss/all.scss                 |   1 -
 src/ui/scss/component/_settings.scss |   9 --
 4 files changed, 68 insertions(+), 77 deletions(-)
 delete mode 100644 src/ui/scss/component/_settings.scss

diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx
index 9d85ddea3..b85abe2d9 100644
--- a/src/ui/page/settings/view.jsx
+++ b/src/ui/page/settings/view.jsx
@@ -454,73 +454,73 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     label={__('Automatic dark mode')}
                   />
 
-                  <h3>{__('From: ')}</h3>
-                  <div className="time-section">
-                    <FormField
-                      className="select-hours"
-                      type="select"
-                      name="automatic_dark_mode_range"
-                      disabled={!automaticDarkModeEnabled}
-                      onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
-                      value={darkModeTimes.from.hour}
-                      label={__('Hours:')}
-                    >
-                      {startHours.map(time => (
-                        <option key={time} value={time}>
-                          {this.to12Hour(time)}
-                        </option>
-                      ))}
-                    </FormField>
-                    <FormField
-                      className="select-hours"
-                      label={__('minutes')}
-                      type="select"
-                      name="automatic_dark_mode_range"
-                      disabled={!automaticDarkModeEnabled}
-                      onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'min' })}
-                      value={darkModeTimes.from.min}
-                    >
-                      {enabledMinutes.map(time => (
-                        <option key={time} value={time}>
-                          {time}
-                        </option>
-                      ))}
-                    </FormField>
-                  </div>
+                  <Form>
+                    <h3>{__('From: ')}</h3>
+                    <fieldset-group class="fieldset-group--smushed">
+                      <FormField
+                        type="select"
+                        name="automatic_dark_mode_range"
+                        disabled={!automaticDarkModeEnabled}
+                        onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
+                        value={darkModeTimes.from.hour}
+                        label={__('Hours:')}
+                      >
+                        {startHours.map(time => (
+                          <option key={time} value={time}>
+                            {this.to12Hour(time)}
+                          </option>
+                        ))}
+                      </FormField>
+                      <FormField
+                        label={__('minutes')}
+                        type="select"
+                        name="automatic_dark_mode_range"
+                        disabled={!automaticDarkModeEnabled}
+                        onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'min' })}
+                        value={darkModeTimes.from.min}
+                      >
+                        {enabledMinutes.map(time => (
+                          <option key={time} value={time}>
+                            {time}
+                          </option>
+                        ))}
+                      </FormField>
+                    </fieldset-group>
+                  </Form>
 
-                  <h3>{__('To: ')}</h3>
-                  <div className="time-section">
-                    <FormField
-                      className="select-hours"
-                      type="select"
-                      name="automatic_dark_mode_range"
-                      disabled={!automaticDarkModeEnabled}
-                      label={__('Hours:')}
-                      onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
-                      value={darkModeTimes.to.hour}
-                    >
-                      {endHours.map(time => (
-                        <option key={time} value={time}>
-                          {this.to12Hour(time)}
-                        </option>
-                      ))}
-                    </FormField>
-                    <FormField
-                      className="select-hours"
-                      label={__('minutes')}
-                      type="select"
-                      name="automatic_dark_mode_range"
-                      disabled={!automaticDarkModeEnabled}
-                      onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'min' })}
-                      value={darkModeTimes.to.min}
-                    >
-                      {enabledMinutes.map(time => (
-                        <option key={time} value={time}>
-                          {time}
-                        </option>
-                      ))}
-                    </FormField>
-                  </div>
+                  <Form>
+                    <h3>{__('To: ')}</h3>
+                    <fieldset-group class="fieldset-group--smushed">
+                      <FormField
+                        type="select"
+                        name="automatic_dark_mode_range"
+                        disabled={!automaticDarkModeEnabled}
+                        label={__('Hours:')}
+                        onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
+                        value={darkModeTimes.to.hour}
+                      >
+                        {endHours.map(time => (
+                          <option key={time} value={time}>
+                            {this.to12Hour(time)}
+                          </option>
+                        ))}
+                      </FormField>
+                      <FormField
+                        label={__('minutes')}
+                        type="select"
+                        name="automatic_dark_mode_range"
+                        disabled={!automaticDarkModeEnabled}
+                        onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'min' })}
+                        value={darkModeTimes.to.min}
+                      >
+                        {enabledMinutes.map(time => (
+                          <option key={time} value={time}>
+                            {time}
+                          </option>
+                        ))}
+                      </FormField>
+                    </fieldset-group>
+                  </Form>
                 </fieldset-section>
               </Form>
             </section>
diff --git a/src/ui/redux/actions/settings.js b/src/ui/redux/actions/settings.js
index a5727f3d4..2de70846f 100644
--- a/src/ui/redux/actions/settings.js
+++ b/src/ui/redux/actions/settings.js
@@ -3,6 +3,7 @@ import fs from 'fs';
 import http from 'http';
 // @endif
 import { Lbry, ACTIONS, SETTINGS } from 'lbry-redux';
+import * as DESKTOP_SETTINGS from 'constants/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import analytics from 'analytics';
 
@@ -156,7 +157,7 @@ export function doSetDarkTime(value, options) {
     };
     const mergedTimes = { ...darkModeTimes, ...modifiedTimes };
 
-    dispatch(doSetClientSetting(SETTINGS.DARK_MODE_TIMES, mergedTimes));
+    dispatch(doSetClientSetting(DESKTOP_SETTINGS.DARK_MODE_TIMES, mergedTimes));
     dispatch(doUpdateIsNight());
   };
 }
diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index fdac30cad..87dda2301 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -34,7 +34,6 @@
 @import 'component/pagination';
 @import 'component/placeholder';
 @import 'component/search';
-@import 'component/settings';
 @import 'component/snack-bar';
 @import 'component/spinner';
 @import 'component/splash';
diff --git a/src/ui/scss/component/_settings.scss b/src/ui/scss/component/_settings.scss
deleted file mode 100644
index 913d8f211..000000000
--- a/src/ui/scss/component/_settings.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.select-hours {
-  display: block;
-  float: left;
-  width: auto;
-}
-
-.time-section {
-  display: flex;
-}