From 9658cefa55380da2593a4eb04636cdf8b9a8cde8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 8 Jan 2019 23:29:06 -0500
Subject: [PATCH] fix: input + label alignment

---
 .../component/common/file-selector.jsx        |  2 +-
 src/renderer/component/userPhoneNew/view.jsx  |  2 +-
 src/renderer/component/walletSend/view.jsx    |  2 +-
 src/renderer/page/settings/view.jsx           | 84 ++++++++++---------
 src/renderer/scss/component/_card.scss        |  2 +-
 src/renderer/scss/component/_form-field.scss  | 10 ++-
 src/renderer/scss/component/_form-row.scss    | 10 ++-
 7 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/renderer/component/common/file-selector.jsx b/src/renderer/component/common/file-selector.jsx
index 476a1e42f..dc75fd33a 100644
--- a/src/renderer/component/common/file-selector.jsx
+++ b/src/renderer/component/common/file-selector.jsx
@@ -63,7 +63,7 @@ class FileSelector extends React.PureComponent<Props> {
       type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
 
     return (
-      <FormRow verticallyCentered padded>
+      <FormRow>
         <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
         <input
           webkitdirectory="true"
diff --git a/src/renderer/component/userPhoneNew/view.jsx b/src/renderer/component/userPhoneNew/view.jsx
index 2bc7edc3c..000210607 100644
--- a/src/renderer/component/userPhoneNew/view.jsx
+++ b/src/renderer/component/userPhoneNew/view.jsx
@@ -95,7 +95,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
           </p>
         </header>
         <Form onSubmit={this.handleSubmit}>
-          <FormRow padded verticallyCentered>
+          <FormRow padded>
             <FormField type="select" name="country-codes" onChange={this.handleSelect}>
               {countryCodes.map(country => (
                 <option key={country.countryCallingCode} value={country.countryCallingCode}>
diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx
index 279e95742..5babfb7cb 100644
--- a/src/renderer/component/walletSend/view.jsx
+++ b/src/renderer/component/walletSend/view.jsx
@@ -73,7 +73,7 @@ class WalletSend extends React.PureComponent<Props> {
                     }
                   />
                 </FormRow>
-                <FormRow padded>
+                <FormRow>
                   <FormField
                     type="text"
                     name="address"
diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx
index 3da62ce3c..8cb6b9109 100644
--- a/src/renderer/page/settings/view.jsx
+++ b/src/renderer/page/settings/view.jsx
@@ -2,7 +2,7 @@
 import * as ICONS from 'constants/icons';
 import * as SETTINGS from 'constants/settings';
 import * as React from 'react';
-import { FormField, FormFieldPrice } from 'component/common/form';
+import { FormField, FormFieldPrice, FormRow } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
 import FileSelector from 'component/common/file-selector';
@@ -287,32 +287,38 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </header>
 
               <div className="card__content">
-                <FormField
-                  type="checkbox"
-                  name="autoplay"
-                  onChange={this.onAutoplayChange}
-                  checked={autoplay}
-                  postfix={__('Autoplay media files')}
-                />
+                <FormRow>
+                  <FormField
+                    type="checkbox"
+                    name="autoplay"
+                    onChange={this.onAutoplayChange}
+                    checked={autoplay}
+                    postfix={__('Autoplay media files')}
+                  />
+                </FormRow>
 
-                <FormField
-                  type="checkbox"
-                  name="auto_download"
-                  onChange={this.onAutoDownloadChange}
-                  checked={autoDownload}
-                  postfix={__('Automatically download new content from your subscriptions')}
-                />
+                <FormRow>
+                  <FormField
+                    type="checkbox"
+                    name="auto_download"
+                    onChange={this.onAutoDownloadChange}
+                    checked={autoDownload}
+                    postfix={__('Automatically download new content from your subscriptions')}
+                  />
+                </FormRow>
 
-                <FormField
-                  type="checkbox"
-                  name="show_nsfw"
-                  onChange={this.onShowNsfwChange}
-                  checked={showNsfw}
-                  postfix={__('Show NSFW content')}
-                  helper={__(
-                    'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  '
-                  )}
-                />
+                <FormRow>
+                  <FormField
+                    type="checkbox"
+                    name="show_nsfw"
+                    onChange={this.onShowNsfwChange}
+                    checked={showNsfw}
+                    postfix={__('Show NSFW content')}
+                    helper={__(
+                      'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  '
+                    )}
+                  />
+                </FormRow>
               </div>
             </section>
 
@@ -359,19 +365,21 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </header>
 
               <div className="card__content">
-                <FormField
-                  name="theme_select"
-                  type="select"
-                  onChange={this.onThemeChange}
-                  value={currentTheme}
-                  disabled={automaticDarkModeEnabled}
-                >
-                  {themes.map(theme => (
-                    <option key={theme} value={theme}>
-                      {theme}
-                    </option>
-                  ))}
-                </FormField>
+                <FormRow>
+                  <FormField
+                    name="theme_select"
+                    type="select"
+                    onChange={this.onThemeChange}
+                    value={currentTheme}
+                    disabled={automaticDarkModeEnabled}
+                  >
+                    {themes.map(theme => (
+                      <option key={theme} value={theme}>
+                        {theme}
+                      </option>
+                    ))}
+                  </FormField>
+                </FormRow>
 
                 <FormField
                   type="checkbox"
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 8818cc736..2bf20f9e8 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -93,7 +93,7 @@
   position: relative;
 
   + .card__content {
-    padding-top: var(--spacing-vertical-medium);
+    margin-top: var(--spacing-vertical-medium);
   }
 
   &:not(.card__header--flat) {
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index fd0491b2d..092c4e347 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -1,8 +1,4 @@
 .form-field {
-  &:not(:last-of-type) {
-    margin-bottom: var(--spacing-vertical-small);
-  }
-
   &.form-field--disabled {
     opacity: 0.4;
     pointer-events: none;
@@ -91,6 +87,12 @@
   padding-left: var(--spacing-vertical-small);
 }
 
+// Keeps radio buttons aligned with the labels
+// This can probably be done in a better way, but after setting align-items: center on the parent, the label is still off a bit.
+input[type='radio'] + .form-field__postfix {
+  padding-top: 3px;
+}
+
 .form-field__select-wrapper {
   position: relative;
   width: 20rem;
diff --git a/src/renderer/scss/component/_form-row.scss b/src/renderer/scss/component/_form-row.scss
index 426375e12..ddac864aa 100644
--- a/src/renderer/scss/component/_form-row.scss
+++ b/src/renderer/scss/component/_form-row.scss
@@ -1,9 +1,10 @@
 .form-row {
   display: flex;
   flex-direction: row;
+  align-items: flex-end;
 
-  &:not(&--vertically-centered) {
-    align-items: flex-end;
+  &:not(.form-row--padded):not(:last-of-type) {
+    margin-bottom: var(--spacing-vertical-medium);
   }
 
   .form-field {
@@ -32,8 +33,9 @@
 }
 
 .form-row--padded {
-  padding-top: var(--spacing-vertical-medium);
-  padding-bottom: var(--spacing-vertical-medium);
+  // Ignore the class name, margin allows these to collapse with other items
+  margin-top: var(--spacing-vertical-large);
+  margin-bottom: var(--spacing-vertical-large);
 }
 
 .form-row--right {