From ee42e5e1b4253200e532f32958128a93394e9098 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 01:20:53 -0400
Subject: [PATCH] alignment fixes

---
 .../common/form-components/form-field.jsx     | 26 +++++++++----------
 src/renderer/component/fileList/view.jsx      |  1 +
 .../component/transactionList/view.jsx        |  1 +
 src/renderer/component/walletSend/view.jsx    |  2 ++
 src/renderer/component/walletSendTip/view.jsx |  7 ++++-
 src/renderer/page/getCredits/view.jsx         |  9 +------
 src/renderer/page/settings/view.jsx           | 26 +++++++++----------
 src/renderer/scss/_gui.scss                   |  4 +++
 src/renderer/scss/component/_form-field.scss  | 10 ++++++-
 9 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 6b0a9b234..dcbaff85f 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
 import classnames from 'classnames';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
-import "simplemde/dist/simplemde.min.css";
+import 'simplemde/dist/simplemde.min.css';
 
 type Props = {
   name: string,
@@ -20,6 +20,7 @@ type Props = {
   placeholder?: string | number,
   children?: React.Node,
   stretch?: boolean,
+  fixClass?: string, // class applied to prefix/postfix label
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -35,6 +36,7 @@ export class FormField extends React.PureComponent<Props> {
       type,
       children,
       stretch,
+      fixClass,
       ...inputProps
     } = this.props;
 
@@ -55,12 +57,12 @@ export class FormField extends React.PureComponent<Props> {
               {...inputProps}
               type="textarea"
               options={{
-                  hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
-                  previewRender(plainText) {
-                    const preview = <MarkdownPreview content={plainText}/>;
-                    return ReactDOMServer.renderToString(preview);
-                  }
-               }}
+                hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
+                previewRender(plainText) {
+                  const preview = <MarkdownPreview content={plainText} />;
+                  return ReactDOMServer.renderToString(preview);
+                },
+              }}
             />
           </div>
         );
@@ -92,22 +94,18 @@ export class FormField extends React.PureComponent<Props> {
           })}
         >
           {prefix && (
-            <label htmlFor={name} className="form-field__prefix">
+            <label htmlFor={name} className={classnames('form-field__prefix', fixClass)}>
               {prefix}
             </label>
           )}
           {input}
           {postfix && (
-            <label htmlFor={name} className="form-field__postfix">
+            <label htmlFor={name} className={classnames('form-field__postfix', fixClass)}>
               {postfix}
             </label>
           )}
         </div>
-        {helper && (
-          <label htmlFor={name} className="form-field__help">
-            {helper}
-          </label>
-        )}
+        {helper && <div className="form-field__help">{helper}</div>}
       </div>
     );
   }
diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx
index 1f649f527..37905f276 100644
--- a/src/renderer/component/fileList/view.jsx
+++ b/src/renderer/component/fileList/view.jsx
@@ -171,6 +171,7 @@ class FileList extends React.PureComponent<Props, State> {
           {!hideFilter && (
             <FormField
               prefix={__('Sort by')}
+              fixClass="form-field--align-center"
               type="select"
               value={sortBy}
               onChange={this.handleSortChanged}
diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx
index c0b84be33..94dfd33b6 100644
--- a/src/renderer/component/transactionList/view.jsx
+++ b/src/renderer/component/transactionList/view.jsx
@@ -96,6 +96,7 @@ class TransactionList extends React.PureComponent<Props, State> {
               type="select"
               value={filter}
               onChange={this.handleFilterChanged}
+              fixClass="form-field--align-center"
               prefix={__('Show')}
               postfix={
                 <Button
diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx
index 340cc483d..1be7976fb 100644
--- a/src/renderer/component/walletSend/view.jsx
+++ b/src/renderer/component/walletSend/view.jsx
@@ -56,8 +56,10 @@ class WalletSend extends React.PureComponent<Props> {
                     label={__('Amount')}
                     postfix={__('LBC')}
                     className="input--price-amount"
+                    fixClass="form-field--fix-no-height"
                     min="0"
                     step="any"
+                    placeholder="5"
                     onChange={handleChange}
                     onBlur={handleBlur}
                     value={values.amount}
diff --git a/src/renderer/component/walletSendTip/view.jsx b/src/renderer/component/walletSendTip/view.jsx
index b8dad4480..477932eab 100644
--- a/src/renderer/component/walletSendTip/view.jsx
+++ b/src/renderer/component/walletSendTip/view.jsx
@@ -87,7 +87,12 @@ class WalletSendTip extends React.PureComponent<Props, State> {
               disabled={isPending || amount <= 0 || amount > balance}
               onClick={this.handleSendButtonClicked}
             />
-            <Button button="alt" label={__('Cancel')} onClick={onCancel} navigateParams={{ uri }} />
+            <Button
+              button="link"
+              label={__('Cancel')}
+              onClick={onCancel}
+              navigateParams={{ uri }}
+            />
           </div>
         </div>
       </div>
diff --git a/src/renderer/page/getCredits/view.jsx b/src/renderer/page/getCredits/view.jsx
index e08e77d6b..e7fec2a4b 100644
--- a/src/renderer/page/getCredits/view.jsx
+++ b/src/renderer/page/getCredits/view.jsx
@@ -3,18 +3,11 @@ import Button from 'component/button';
 import RewardSummary from 'component/rewardSummary';
 import ShapeShift from 'component/shapeShift';
 import Page from 'component/page';
-import * as icons from 'constants/icons';
 
-const GetCreditsPage = props => (
+const GetCreditsPage = () => (
   <Page>
     <RewardSummary />
     <ShapeShift />
-    <section className="card card--section">
-      <div className="card__title">{__('From External Wallet')}</div>
-      <div className="card__actions">
-        <Button button="primary" icon={icons.SEND} navigate="/send" label={__('Send / Receive')} />
-      </div>
-    </section>
     <section className="card card--section">
       <div className="card__title">{__('More ways to get LBRY Credits')}</div>
       <div className="card__content">
diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx
index 766391ce8..544673afa 100644
--- a/src/renderer/page/settings/view.jsx
+++ b/src/renderer/page/settings/view.jsx
@@ -273,20 +273,18 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
             <section className="card card--section">
               <div className="card__title">{__('Share Diagnostic Data')}</div>
-              <div className="card__content">
-                <FormField
-                  type="checkbox"
-                  name="share_usage_data"
-                  onChange={this.onShareDataChange}
-                  checked={daemonSettings.share_usage_data}
-                  postfix={__(
-                    'Help make LBRY better by contributing analytics and diagnostic data about my usage.'
-                  )}
-                  helper={__(
-                    'You will be ineligible to earn rewards while diagnostics are not being shared.'
-                  )}
-                />
-              </div>
+              <FormField
+                type="checkbox"
+                name="share_usage_data"
+                onChange={this.onShareDataChange}
+                checked={daemonSettings.share_usage_data}
+                postfix={__(
+                  'Help make LBRY better by contributing analytics and diagnostic data about my usage.'
+                )}
+                helper={__(
+                  'You will be ineligible to earn rewards while diagnostics are not being shared.'
+                )}
+              />
             </section>
             {
               <section className="card card--section">
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 48f9b54fc..45161152e 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -121,6 +121,10 @@ input::placeholder {
   opacity: 0.5;
 }
 
+label {
+  cursor: pointer;
+}
+
 button + input {
   margin-left: $spacing-vertical * 2/3;
 }
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 9dd03b5d7..d93a1885b 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -84,7 +84,7 @@
 
 .form-field__help {
   color: var(--color-help);
-  padding-top: $spacing-vertical * 1/3;
+  padding-top: $spacing-vertical * 2/3;
 }
 
 .form-field__error {
@@ -94,6 +94,14 @@
 .form-field__prefix,
 .form-field__postfix {
   font-family: 'metropolis-medium';
+
+  &.form-field--fix-no-height {
+    line-height: 1;
+  }
+
+  &.form-field--align-center {
+    align-self: center;
+  }
 }
 
 .form-field__prefix {