alignment fixes

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;
 
@@ -59,7 +61,7 @@ export class FormField extends React.PureComponent<Props> {
                 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 && (
+        {helper && <div className="form-field__help">{helper}</div>}
-          <label htmlFor={name} className="form-field__help">
-            {helper}
-          </label>
-        )}
       </div>
     );
   }

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}

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

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}

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>

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">

src/renderer/page/settings/view.jsx

@@ -273,7 +273,6 @@ 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"
@@ -286,7 +285,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   'You will be ineligible to earn rewards while diagnostics are not being shared.'
                 )}
               />
-              </div>
             </section>
             {
               <section className="card card--section">

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;
 }

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 {