Merge pull request #1587 from lbryio/css-fixes

CSS fixes

src/renderer/component/app/view.jsx

@@ -84,8 +84,8 @@ class App extends React.PureComponent<Props> {
         <Theme />
         <main className="page">
           <SideBar />
-          <Header />
           <div className="content" id="content">
+            <Header />
             <Router />
             <ModalRouter />
           </div>

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,
+  affixClass?: 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,
+      affixClass,
       ...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', affixClass)}>
               {prefix}
             </label>
           )}
           {input}
           {postfix && (
-            <label htmlFor={name} className="form-field__postfix">
+            <label htmlFor={name} className={classnames('form-field__postfix', affixClass)}>
               {postfix}
             </label>
           )}
         </div>
-        {helper && (
-          <label htmlFor={name} className="form-field__help">
-            {helper}
-          </label>
-        )}
+        {helper && <div className="form-field__help">{helper}</div>}
       </div>
     );
   }

src/renderer/component/fileList/view.jsx

@@ -171,6 +171,7 @@ class FileList extends React.PureComponent<Props, State> {
           {!hideFilter && (
             <FormField
               prefix={__('Sort by')}
+              affixClass="form-field--align-center"
               type="select"
               value={sortBy}
               onChange={this.handleSortChanged}

src/renderer/component/splash/internal/load-screen.jsx

@@ -19,7 +19,10 @@ class LoadScreen extends React.PureComponent<Props> {
 
     return (
       <div className="load-screen">
-        <h1 className="load-screen__title">{__('LBRY')}</h1>
+        <div className="load-screen__header">
+          <h1 className="load-screen__title">{__('LBRY')}</h1>
+          <sup className="load-screen__beta">beta</sup>
+        </div>
         {isWarning ? (
           <span className="load-screen__message">
             <Icon size={20} icon={icons.ALERT} />

src/renderer/component/transactionList/view.jsx

@@ -96,6 +96,7 @@ class TransactionList extends React.PureComponent<Props, State> {
               type="select"
               value={filter}
               onChange={this.handleFilterChanged}
+              affixClass="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"
+                    affixClass="form-field--fix-no-height"
                     min="0"
                     step="any"
+                    placeholder="12.34"
                     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/modal/modalDownloading/view.jsx

@@ -34,7 +34,7 @@ class ModalDownloading extends React.PureComponent {
             />
           ) : null}
           <Button
-            button="alt"
+            button="link"
             label={__('Cancel')}
             className="modal__button"
             onClick={cancelUpgrade}

src/renderer/modal/modalUpgrade/index.js

@@ -1,13 +1,19 @@
-import React from 'react';
 import { connect } from 'react-redux';
+import { doHideNotification } from 'lbry-redux';
 import { doDownloadUpgrade, doSkipUpgrade } from 'redux/actions/app';
 import ModalUpgrade from './view';
 
-const select = state => ({});
+const select = () => ({});
 
 const perform = dispatch => ({
   downloadUpgrade: () => dispatch(doDownloadUpgrade()),
-  skipUpgrade: () => dispatch(doSkipUpgrade()),
+  skipUpgrade: () => {
+    dispatch(doHideNotification());
+    dispatch(doSkipUpgrade());
+  },
 });
 
-export default connect(select, perform)(ModalUpgrade);
+export default connect(
+  select,
+  perform
+)(ModalUpgrade);

src/renderer/modal/modalUpgrade/view.jsx

@@ -24,7 +24,11 @@ class ModalUpgrade extends React.PureComponent {
         </p>
         <p className="meta text-center">
           {__('Want to know what has changed?')} See the{' '}
-          <Button label={__('release notes')} href="https://github.com/lbryio/lbry-app/releases" />.
+          <Button
+            button="link"
+            label={__('release notes')}
+            href="https://github.com/lbryio/lbry-app/releases"
+          />.
         </p>
       </Modal>
     );

src/renderer/page/file/view.jsx

@@ -20,6 +20,7 @@ import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
+import classnames from 'classnames';
 
 type Props = {
   claim: Claim,
@@ -114,8 +115,7 @@ class FilePage extends React.Component<Props> {
     const shouldObscureThumbnail = obscureNsfw && metadata.nsfw;
     const { height, channel_name: channelName, value } = claim;
     const mediaType = Lbry.getMediaType(contentType);
-    const isPlayable =
-      Object.values(player.mime).indexOf(contentType) !== -1 || mediaType === 'audio';
+    const isPlayable = Object.values(player.mime).includes(contentType) || mediaType === 'audio';
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
     let subscriptionUri;
@@ -149,11 +149,19 @@ class FilePage extends React.Component<Props> {
           </section>
         ) : (
           <section className="card">
-            {isPlayable ? (
-              <Video className="content__embedded" uri={uri} />
-            ) : (
-              <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
-            )}
+            {isPlayable && <Video className="content__embedded" uri={uri} />}
+            {!isPlayable &&
+              (thumbnail ? (
+                <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
+              ) : (
+                <div
+                  className={classnames('content__empty', {
+                    'content__empty--nsfw': shouldObscureThumbnail,
+                  })}
+                >
+                  <div className="card__media-text">{__('This content is not playable.')}</div>
+                </div>
+              ))}
             <div className="card__content">
               <div className="card__title-identity--file">
                 <h1 className="card__title card__title--file">{title}</h1>
@@ -171,7 +179,6 @@ class FilePage extends React.Component<Props> {
               {metadata.nsfw && <div>NSFW</div>}
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
-
                 <div className="card__actions card__actions--no-margin">
                   {claimIsMine ? (
                     <Button
@@ -184,21 +191,26 @@ class FilePage extends React.Component<Props> {
                       }}
                     />
                   ) : (
-                    <React.Fragment>
+                    <SubscribeButton uri={subscriptionUri} channelName={channelName} />
+                  )}
+                </div>
+              </div>
+              {!claimIsMine ||
+                (speechSharable && (
+                  <div className="card__actions card__actions--end">
+                    {!claimIsMine && (
                       <Button
                         button="alt"
                         icon="Send"
                         label={__('Enjoy this? Send a tip')}
                         onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                       />
-                      <SubscribeButton uri={subscriptionUri} channelName={channelName} />
-                    </React.Fragment>
-                  )}
-                  {speechSharable && (
-                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
-                  )}
-                </div>
-              </div>
+                    )}
+                    {speechSharable && (
+                      <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                    )}
+                  </div>
+                ))}
               <FormRow alignRight>
                 <FormField
                   type="checkbox"

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,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">
@@ -317,7 +315,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <section className="card card--section">
               <div className="card__title">{__('Application Cache')}</div>
               <span className="card__subtitle">
-                {__("This will delete your subscriptions, and clear the app's cache")}
+                {__('This will clear the application cache. Your wallet will not be affected.')}
               </span>
               <div className="card__content">
                 <Button

src/renderer/redux/actions/app.js

@@ -10,6 +10,7 @@ import {
   doNotify,
   selectNotification,
   MODALS,
+  doHideNotification,
 } from 'lbry-redux';
 import Native from 'native';
 import { doFetchRewardedContent } from 'redux/actions/content';
@@ -89,6 +90,7 @@ export function doDownloadUpgrade() {
     dispatch({
       type: ACTIONS.UPGRADE_DOWNLOAD_STARTED,
     });
+    dispatch(doHideNotification());
     dispatch(
       doNotify({
         id: MODALS.DOWNLOADING,

src/renderer/redux/actions/publish.js

@@ -278,7 +278,7 @@ export const doCheckPendingPublishes = () => (dispatch: Dispatch, getState: GetS
 
       dispatch(batchActions(...actions));
 
-      if (!pendingPublishes.length) {
+      if (!Object.keys(pendingPublishes).length) {
         clearInterval(publishCheckInterval);
       }
     });

src/renderer/redux/reducers/app.js

@@ -114,7 +114,6 @@ reducers[ACTIONS.SKIP_UPGRADE] = state => {
 
   return Object.assign({}, state, {
     isUpgradeSkipped: true,
-    modal: null,
   });
 };
 

src/renderer/scss/_gui.scss

@@ -121,6 +121,10 @@ input::placeholder {
   opacity: 0.5;
 }
 
+label[for] {
+  cursor: pointer;
+}
+
 button + input {
   margin-left: $spacing-vertical * 2/3;
 }
@@ -157,7 +161,7 @@ p {
   grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
   grid-template-columns: var(--side-nav-width) auto;
   grid-template-areas:
-    'nav header'
+    'nav content'
     'nav content';
   background-color: var(--color-bg);
   height: 100vh;
@@ -176,7 +180,7 @@ p {
 */
 .content {
   grid-area: content;
-  overflow: auto;
+  overflow-y: auto;
 }
 
 .main {

src/renderer/scss/_vars.scss

@@ -42,6 +42,7 @@ $large-breakpoint: 1760px;
   --color-divider: #e3e3e3;
   --color-help: rgba(0, 0, 0, 0.54);
   --color-error: #a94442;
+  --color-nsfw: #bf4440;
   --color-download: var(--color-white);
   --color-download-overlay: var(--color-black);
   --color-bg: #fafafa;

src/renderer/scss/component/_card.scss

@@ -27,17 +27,17 @@
     padding-top: var(--video-aspect-ratio);
   }
 
-  .card__media-text {
-    // for the weird padding required for dynamic height
-    // this lets the text sit in the middle instead of the bottom
-    margin-top: calc(var(--video-aspect-ratio) * -1);
-  }
-
   .channel-name {
     font-size: 12px;
   }
 }
 
+.card__media-text {
+  // for the weird padding required for dynamic height
+  // this lets the text sit in the middle instead of the bottom
+  margin-top: calc(var(--video-aspect-ratio) * -1);
+}
+
 .card--link {
   cursor: pointer;
 }
@@ -244,6 +244,10 @@
   right: $spacing-vertical;
 }
 
+.card__actions--end {
+  justify-content: flex-end;
+}
+
 /*
  .card-row is used on the discover page
  It is a list of cards that extend past the right edge of the screen

src/renderer/scss/component/_content.scss

@@ -78,6 +78,20 @@
   color: var(--color-white);
 }
 
+.content__empty {
+  background-color: black;
+  width: 100%;
+  padding-top: var(--video-aspect-ratio);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-white);
+
+  &.content__empty--nsfw {
+    background-color: var(--color-nsfw);
+  }
+}
+
 img {
   max-height: 100%;
   max-width: 100%;

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 {

src/renderer/scss/component/_header.scss

@@ -1,11 +1,9 @@
 .header {
-  grid-area: header;
   display: flex;
   z-index: 1;
   justify-content: space-between;
   padding: $spacing-width $spacing-width 0 $spacing-width;
   background-color: var(--color-bg);
-  // height: 100px;
 }
 
 .header__actions-right {

src/renderer/scss/component/_load-screen.scss

@@ -10,10 +10,20 @@
   justify-content: center;
 }
 
+.load-screen__header {
+  display: flex;
+}
+
 .load-screen__title {
   font-family: 'metropolis-bold';
   font-size: 60px;
   line-height: 100px;
+  margin-left: 40px; // width of "beta" superscript
+}
+
+.load-screen__beta {
+  padding-top: 23px;
+  padding-left: 10px;
 }
 
 .load-screen__message {