From 354d8be3a0f4d61e331974ecaf12d3c1e027626c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 19 Aug 2019 12:10:48 -0400
Subject: [PATCH] cleanup

---
 .../form-components/form-field-price.jsx      | 54 +++++++++----------
 src/ui/page/settings/view.jsx                 | 47 ++--------------
 src/ui/scss/component/_form-field.scss        |  5 +-
 3 files changed, 32 insertions(+), 74 deletions(-)

diff --git a/src/ui/component/common/form-components/form-field-price.jsx b/src/ui/component/common/form-components/form-field-price.jsx
index 0ba7a842a..fb13aa8b3 100644
--- a/src/ui/component/common/form-components/form-field-price.jsx
+++ b/src/ui/component/common/form-components/form-field-price.jsx
@@ -47,35 +47,31 @@ export class FormFieldPrice extends React.PureComponent<Props> {
 
     return (
       <fieldset-group class="fieldset-group--smushed">
-        <fieldset-section>
-          <FormField
-            name={`${name}_amount`}
-            label={__('Price')}
-            type="number"
-            className="form-field--price-amount"
-            min={min}
-            value={price.amount}
-            onChange={this.handleAmountChange}
-            placeholder={placeholder || 5}
-            disabled={disabled}
-            step={step || 'any'}
-          />
-        </fieldset-section>
-        <fieldset-section>
-          <FormField
-            label={__('Currency')}
-            name={`${name}_currency`}
-            type="select"
-            id={`${name}_currency`}
-            className="input--currency-select"
-            disabled={disabled}
-            onChange={this.handleCurrencyChange}
-            value={price.currency}
-          >
-            <option value="LBC">{__('LBRY Credits (LBC)')}</option>
-            <option value="USD">{__('US Dollars')}</option>
-          </FormField>
-        </fieldset-section>
+        <FormField
+          name={`${name}_amount`}
+          label={__('Price')}
+          type="number"
+          className="form-field--price-amount"
+          min={min}
+          value={price.amount}
+          onChange={this.handleAmountChange}
+          placeholder={placeholder || 5}
+          disabled={disabled}
+          step={step || 'any'}
+        />
+        <FormField
+          label={__('Currency')}
+          name={`${name}_currency`}
+          type="select"
+          id={`${name}_currency`}
+          className="input--currency-select"
+          disabled={disabled}
+          onChange={this.handleCurrencyChange}
+          value={price.currency}
+        >
+          <option value="LBC">{__('LBRY Credits (LBC)')}</option>
+          <option value="USD">{__('US Dollars')}</option>
+        </FormField>
       </fieldset-group>
     );
   }
diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx
index b85abe2d9..9378824ab 100644
--- a/src/ui/page/settings/view.jsx
+++ b/src/ui/page/settings/view.jsx
@@ -207,7 +207,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     const connectionOptions = [1, 2, 4, 6, 10, 20];
     const startHours = ['18', '19', '20', '21'];
     const endHours = ['5', '6', '7', '8'];
-    const enabledMinutes = ['00', '15', '30', '45'];
 
     return (
       <Page>
@@ -453,17 +452,14 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     checked={automaticDarkModeEnabled}
                     label={__('Automatic dark mode')}
                   />
-
-                  <Form>
-                    <h3>{__('From: ')}</h3>
+                  {automaticDarkModeEnabled && (
                     <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:')}
+                        label={__('From')}
                       >
                         {startHours.map(time => (
                           <option key={time} value={time}>
@@ -472,30 +468,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
                         ))}
                       </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>
-
-                  <Form>
-                    <h3>{__('To: ')}</h3>
-                    <fieldset-group class="fieldset-group--smushed">
-                      <FormField
-                        type="select"
-                        name="automatic_dark_mode_range"
-                        disabled={!automaticDarkModeEnabled}
-                        label={__('Hours:')}
+                        label={__('To')}
                         onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
                         value={darkModeTimes.to.hour}
                       >
@@ -505,22 +480,8 @@ class SettingsPage extends React.PureComponent<Props, State> {
                           </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/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss
index a70ffa46c..b75324386 100644
--- a/src/ui/scss/component/_form-field.scss
+++ b/src/ui/scss/component/_form-field.scss
@@ -118,8 +118,9 @@ fieldset-group {
       width: auto;
       margin-bottom: 0;
 
-      &:first-of-type {
-        input {
+      &:first-child {
+        input,
+        select {
           border-right: none;
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;