Last minute fixes

lbryio · Nov 12, 2018 · de5a151 · de5a151
1 parent e680378
commit de5a151
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 97 deletions.
diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx
@@ -35,33 +35,33 @@ 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 ? (
                 fileResults.map(uri => <FileTile key={uri} uri={uri} />)
               ) : (
                 <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,16 +9,26 @@ 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>
           {
             'LBRY credits can be purchased on exchanges, earned for contributions, for mining, and more.'
           }
         </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
@@ -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
@@ -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
@@ -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
@@ -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 {