From de5a151a6262e14d72fa07b6edaaa8ccfbb4d0a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Sun, 11 Nov 2018 23:02:37 -0600
Subject: [PATCH] Last minute fixes

---
 .../component/fileListSearch/view.jsx         | 12 +--
 src/renderer/component/inviteNew/view.jsx     | 31 ++++----
 .../component/shapeShift/internal/form.jsx    | 11 +--
 .../component/transactionList/view.jsx        | 79 ++++++++++---------
 src/renderer/component/walletAddress/view.jsx | 26 +++---
 src/renderer/page/getCredits/view.jsx         | 16 +++-
 src/renderer/page/search/view.jsx             |  6 +-
 src/renderer/scss/component/_card.scss        | 17 ++++
 src/renderer/scss/component/_form-field.scss  |  1 +
 src/renderer/scss/component/_media.scss       | 13 +++
 src/renderer/scss/component/_search.scss      | 48 +++++++----
 11 files changed, 163 insertions(+), 97 deletions(-)

diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx
index b68ebb4dee5..4061987045d 100644
--- a/src/renderer/component/fileListSearch/view.jsx
+++ b/src/renderer/component/fileListSearch/view.jsx
@@ -35,7 +35,7 @@ class FileListSearch extends React.PureComponent<Props> {
       query && (
         <React.Fragment>
           <div className="search__results">
-            <div className="search-result__row">
+            <section className="search__results__row">
               <div className="file-list__header">{__('Search Results')}</div>
               <HiddenNsfwClaims uris={uris} />
               {!isSearching && fileResults.length ? (
@@ -43,25 +43,25 @@ class FileListSearch extends React.PureComponent<Props> {
               ) : (
                 <NoResults />
               )}
-            </div>
+            </section>
 
-            <div className="search-result__row">
+            <section className="search__results__row">
               <div className="file-list__header">{__('Channels')}</div>
               {!isSearching && channelResults.length ? (
                 channelResults.map(uri => <ChannelTile key={uri} uri={uri} />)
               ) : (
                 <NoResults />
               )}
-            </div>
+            </section>
 
-            <div className="search-result__row">
+            <section className="search__results__row">
               <div className="file-list__header">{__('Your downloads')}</div>
               {downloadUris && downloadUris.length ? (
                 downloadUris.map(uri => <FileTile hideNoResult key={uri} uri={uri} />)
               ) : (
                 <NoResults />
               )}
-            </div>
+            </section>
           </div>
         </React.Fragment>
       )
diff --git a/src/renderer/component/inviteNew/view.jsx b/src/renderer/component/inviteNew/view.jsx
index 29f90c51b14..893e097cd8a 100644
--- a/src/renderer/component/inviteNew/view.jsx
+++ b/src/renderer/component/inviteNew/view.jsx
@@ -47,8 +47,11 @@ class FormInviteNew extends React.PureComponent {
             }}
           />
         </FormRow>
-        <div className="card__actions">
-          <Submit label="Invite" disabled={isPending} />
+
+        <div className="card__content">
+          <div className="card__actions">
+            <Submit label="Invite" disabled={isPending} />
+          </div>
         </div>
       </Form>
     );
@@ -84,20 +87,18 @@ class InviteNew extends React.PureComponent {
             <p className="empty">{__("You have no invites.")}</p>}
         </div> */}
 
-        <div className="card__content">
-          <FormInviteNew
-            errorMessage={errorMessage}
-            inviteNew={inviteNew}
-            isPending={isPending}
-            rewardAmount={rewardAmount}
-          />
+        <FormInviteNew
+          errorMessage={errorMessage}
+          inviteNew={inviteNew}
+          isPending={isPending}
+          rewardAmount={rewardAmount}
+        />
 
-          <p className="help">
-            {__('Read our')}{' '}
-            <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/referrals" />{' '}
-            {__('to learn more about referrals')}.
-          </p>
-        </div>
+        <p className="help">
+          {__('Read our')}{' '}
+          <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/referrals" />{' '}
+          {__('to learn more about referrals')}.
+        </p>
       </section>
     );
   }
diff --git a/src/renderer/component/shapeShift/internal/form.jsx b/src/renderer/component/shapeShift/internal/form.jsx
index f4d057527fc..5d1129c8cad 100644
--- a/src/renderer/component/shapeShift/internal/form.jsx
+++ b/src/renderer/component/shapeShift/internal/form.jsx
@@ -82,13 +82,14 @@ export default (props: Props) => {
           value={values.returnAddress}
         />
       </FormRow>
+
       <span className="help">
-        <span>
-          ({__('optional but recommended')})<br />
-          {__('We will return your')} {originCoin}{' '}
-          {__("to this address if the transaction doesn't go through.")}
-        </span>
+        ({__('optional but recommended')})<br />
+        {__('We will return your')} {originCoin}{' '}
+        {__("to this address if the transaction doesn't go through.")}
       </span>
+      <br />
+
       <div className="card__actions">
         <Submit
           button="primary"
diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx
index 4aaf9ae2721..f25877d8263 100644
--- a/src/renderer/component/transactionList/view.jsx
+++ b/src/renderer/component/transactionList/view.jsx
@@ -74,46 +74,49 @@ class TransactionList extends React.PureComponent<Props> {
 
     return (
       <React.Fragment>
-        {!transactionList.length && (
-          <p className="card__content">{emptyMessage || __('No transactions to list.')}</p>
-        )}
-        {!slim &&
-          !!transactionList.length && (
-            <div className="card__actions">
-              <FileExporter
-                data={transactionList}
-                label={__('Export')}
-                title={__('Export Transactions')}
-                filters={['nout']}
-                defaultPath={__('lbry-transactions-history')}
-              />
-            </div>
+        <header className="card__header">
+          {!transactionList.length && (
+            <p className="card__content">{emptyMessage || __('No transactions to list.')}</p>
           )}
-        {!slim && (
-          <div className="card__actions-top-corner">
-            <FormField
-              type="select"
-              value={filterSetting || TRANSACTIONS.ALL}
-              onChange={this.handleFilterChanged}
-              affixClass="form-field--align-center"
-              prefix={__('Show')}
-              postfix={
-                <Button
-                  button="link"
-                  icon={icons.HELP}
-                  href="https://lbry.io/faq/transaction-types"
-                  title={__('Help')}
+          {!slim &&
+            !!transactionList.length && (
+              <div className="card__actions">
+                <FileExporter
+                  data={transactionList}
+                  label={__('Export')}
+                  title={__('Export Transactions')}
+                  filters={['nout']}
+                  defaultPath={__('lbry-transactions-history')}
                 />
-              }
-            >
-              {transactionTypes.map(tt => (
-                <option key={tt} value={tt}>
-                  {__(`${this.capitalize(tt)}`)}
-                </option>
-              ))}
-            </FormField>
-          </div>
-        )}
+              </div>
+            )}
+          {!slim && (
+            <div className="card__actions--top-corner">
+              <FormField
+                type="select"
+                value={filterSetting || TRANSACTIONS.ALL}
+                onChange={this.handleFilterChanged}
+                affixClass="form-field--align-center"
+                prefix={__('Show')}
+                postfix={
+                  <Button
+                    button="link"
+                    icon={icons.HELP}
+                    href="https://lbry.io/faq/transaction-types"
+                    title={__('Help')}
+                  />
+                }
+              >
+                {transactionTypes.map(tt => (
+                  <option key={tt} value={tt}>
+                    {__(`${this.capitalize(tt)}`)}
+                  </option>
+                ))}
+              </FormField>
+            </div>
+          )}
+        </header>
+
         {!!transactionList.length && (
           <table className="card__content table table--transactions table--stretch">
             <thead>
diff --git a/src/renderer/component/walletAddress/view.jsx b/src/renderer/component/walletAddress/view.jsx
index 433cd0b7b88..972cce58676 100644
--- a/src/renderer/component/walletAddress/view.jsx
+++ b/src/renderer/component/walletAddress/view.jsx
@@ -55,21 +55,19 @@ class WalletAddress extends React.PureComponent<Props> {
 
         <div className="card__content">
           <div className="card__actions">
-            <div className="card__actions__group">
-              <Button
-                button="primary"
-                label={__('Get New Address')}
-                icon={icons.REFRESH}
-                onClick={getNewAddress}
-                disabled={gettingNewAddress}
-              />
+            <Button
+              button="primary"
+              label={__('Get New Address')}
+              icon={icons.REFRESH}
+              onClick={getNewAddress}
+              disabled={gettingNewAddress}
+            />
 
-              <Button
-                button="link"
-                label={showQR ? __('Hide QR code') : __('Show QR code')}
-                onClick={this.toggleQR.bind(this)}
-              />
-            </div>
+            <Button
+              button="link"
+              label={showQR ? __('Hide QR code') : __('Show QR code')}
+              onClick={this.toggleQR.bind(this)}
+            />
           </div>
         </div>
 
diff --git a/src/renderer/page/getCredits/view.jsx b/src/renderer/page/getCredits/view.jsx
index e7fec2a4be6..68085efa222 100644
--- a/src/renderer/page/getCredits/view.jsx
+++ b/src/renderer/page/getCredits/view.jsx
@@ -9,7 +9,10 @@ const GetCreditsPage = () => (
     <RewardSummary />
     <ShapeShift />
     <section className="card card--section">
-      <div className="card__title">{__('More ways to get LBRY Credits')}</div>
+      <header className="card__header">
+        <h2 className="card__title">{__('More ways to get LBRY Credits')}</h2>
+      </header>
+
       <div className="card__content">
         <p>
           {
@@ -17,8 +20,15 @@ const GetCreditsPage = () => (
           }
         </p>
       </div>
-      <div className="card__actions">
-        <Button button="primary" href="https://lbry.io/faq/earn-credits" label={__('Read More')} />
+
+      <div className="card__content">
+        <div className="card__actions">
+          <Button
+            button="primary"
+            href="https://lbry.io/faq/earn-credits"
+            label={__('Read More')}
+          />
+        </div>
       </div>
     </section>
   </Page>
diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx
index 9446a7a0b7d..4f33b455e29 100644
--- a/src/renderer/page/search/view.jsx
+++ b/src/renderer/page/search/view.jsx
@@ -56,7 +56,9 @@ class SearchPage extends React.PureComponent<Props> {
                   {`lbry://${query}`}
                   <ToolTip
                     icon
-                    body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
+                    body={__(
+                      'This is the resolution of a LBRY URL and not controlled by LBRY Inc.'
+                    )}
                   >
                     <Icon icon={icons.HELP} />
                   </ToolTip>
@@ -68,7 +70,7 @@ class SearchPage extends React.PureComponent<Props> {
                 )}
               </header>
             )}
-          <div className="search-results__content">
+          <div className="search-results-wrapper">
             <FormRow alignRight>
               <FormField
                 type="number"
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 23dfc51bf06..fb2e114e4eb 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -42,6 +42,23 @@
   > *:not(:last-child) {
     margin-right: 1.5rem;
   }
+
+  &--bottom-corner {
+    right: 2rem; bottom: 2rem;
+    position: absolute;
+  }
+
+  &--center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--top-corner {
+    top: 2rem; right: 2rem;
+
+    padding-top: 1rem;
+    position: absolute;
+  }
 }
 
 .card__content {
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 6fd75c9fece..826da27b4eb 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -121,6 +121,7 @@
 .form-field__prefix,
 .form-field__postfix {
   font-weight: 500;
+  line-height: 2;
 
   &.form-field--align-center {
     align-self: center;
diff --git a/src/renderer/scss/component/_media.scss b/src/renderer/scss/component/_media.scss
index 22abab2768d..01442d9b5b4 100644
--- a/src/renderer/scss/component/_media.scss
+++ b/src/renderer/scss/component/_media.scss
@@ -254,6 +254,10 @@
   vertical-align: top;
   white-space: nowrap;
 
+  .table--transactions & {
+    background-color: transparent; // override when inside table
+  }
+
   &:not(&--amount-file-page) {
     display: inline-block;
   }
@@ -514,6 +518,15 @@
 
   .media__thumb {
     margin-bottom: 1rem;
+
+    &:not(&--no-img) {
+      padding-top: var(--video-aspect-ratio);
+    }
+
+    &--no-img {
+      height: 10rem;
+      padding: initial; // hack for now, should replace with an image
+    }
   }
 
   .media__title {
diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
index 23d1e9536bd..cd5125f5537 100644
--- a/src/renderer/scss/component/_search.scss
+++ b/src/renderer/scss/component/_search.scss
@@ -1,10 +1,23 @@
 .search-results {
 }
 
-.search-results__content {
+.search-results-wrapper {
+  padding: 2rem;
+  // flex-flow: wrap column;
+  // margin-top: -$spacing-width;
+  // padding-bottom: $spacing-vertical;
+
+  .media__thumb--no-img {
+    width: 20rem; height: 10rem;
+  }
 }
 
 .search-results__content__row {
+  padding-bottom: 1rem;
+
+  &:not(:first-of-type) {
+    padding-top: 1rem;
+  }
 }
 
 .search-results__header {
@@ -44,22 +57,29 @@
 
 
 
-.search__content {
-  padding: $spacing-width;
-}
+// .search__content {
+//   padding: $spacing-width;
+// }
 
-.search__results {
-  margin-top: -$spacing-width;
-  padding-bottom: $spacing-vertical;
-  flex-flow: wrap column;
+// .search__results {
+//   margin-top: -$spacing-width;
+//   padding-bottom: $spacing-vertical;
+//   flex-flow: wrap column;
 
-  .search-result__row {
-    padding: $spacing-vertical 0;
+//   .search-result__row {
+//     padding: $spacing-vertical 0;
 
-    &:first-of-type {
-      padding-top: 0;
-    }
-  }
+//     &:first-of-type {
+//       padding-top: 0;
+//     }
+//   }
+// }
+
+.search__results {
+  @extend .media-group--list;
+}
+
+.search__results__row {
 }
 
 .search__top {