cleanup css

src/renderer/component/common/form-components/form-field.jsx

@@ -24,7 +24,7 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   useToggle?: boolean,
-  noPadding?: boolean,
+  firstInList?: boolean, // at the top of a list, no padding top
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -42,7 +42,7 @@ export class FormField extends React.PureComponent<Props> {
       stretch,
       affixClass,
       useToggle,
-      noPadding,
+      firstInList,
       ...inputProps
     } = this.props;
 
@@ -110,7 +110,7 @@ export class FormField extends React.PureComponent<Props> {
         <div
           className={classnames('form-field__input', {
             'form-field--auto-height': type === 'markdown',
-            'form-field--no-padding': noPadding,
+            'form-field--first-item': firstInList,
           })}
         >
           {prefix && (

src/renderer/component/fileCard/view.jsx

@@ -92,7 +92,6 @@ class FileCard extends React.PureComponent<Props> {
         onContextMenu={handleContextMenu}
       >
         <CardMedia thumbnail={thumbnail} />
-        <div className="card-media__internal-links" />
         <div className="card__title-identity">
           <div className="card__title--small">
             <TruncatedText lines={3}>{title}</TruncatedText>

src/renderer/component/fileTile/view.jsx

@@ -110,7 +110,12 @@ class FileTile extends React.PureComponent<Props> {
           {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
-              <div className={small ? 'card__title--x-small' : 'card__title--file'}>
+              <div
+                className={classnames({
+                  'card__title--file': !small,
+                  'card__title--x-small': small,
+                })}
+              >
                 <TruncatedText lines={3}>{title || name}</TruncatedText>
               </div>
               <div
@@ -128,11 +133,6 @@ class FileTile extends React.PureComponent<Props> {
                   <TruncatedText lines={3}>{description}</TruncatedText>
                 </div>
               )}
-              {
-                // <div className="card__subtitle-price">
-                //
-                // </div>
-              }
               {!name && (
                 <React.Fragment>
                   {__('This location is unused.')}{' '}

src/renderer/component/recommendedContent/view.jsx

@@ -47,12 +47,12 @@ export default class RecommendedContent extends React.PureComponent<Props> {
     }
 
     return (
-      <div className="card__list--recommended">
+      <section className="card__list--recommended">
         <FormRow>
           <ToolTip onComponent body={__('Automatically download and play free content.')}>
             <FormField
               useToggle
-              noPadding
+              firstInList
               name="autoplay"
               type="checkbox"
               prefix={__('Autoplay')}
@@ -70,7 +70,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
               uri={`lbry://${permanentUrl}`}
             />
           ))}
-      </div>
+      </section>
     );
   }
 }

src/renderer/page/file/view.jsx

@@ -198,7 +198,7 @@ class FilePage extends React.Component<Props> {
                   <Button
                     button="alt"
                     icon={icons.GIFT}
-                    label={__('Enjoy this? Send a tip')}
+                    label={__('Send a tip')}
                     onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                   />
                 )}
@@ -217,9 +217,7 @@ class FilePage extends React.Component<Props> {
             </div>
           </div>
         </section>
-        <section>
-          <RecommendedContent uri={uri} channelUri={`lbry://${subscriptionUri}`} />
-        </section>
+        <RecommendedContent uri={uri} channelUri={`lbry://${subscriptionUri}`} />
       </Page>
     );
   }

src/renderer/scss/_gui.scss

@@ -206,6 +206,7 @@ p {
 .main--for-content {
   padding: $spacing-width * 2/3;
   display: flex;
+  justify-content: center;
 }
 
 .page__header {
@@ -255,11 +256,10 @@ p {
 }
 
 .credit-amount {
-  border-radius: 5px;
   font-family: 'metropolis-bold';
   font-size: 10px;
-  padding: 5px;
   white-space: nowrap;
+  padding: $spacing-vertical * 1/6 0;
 }
 
 .credit-amount--large {
@@ -267,6 +267,11 @@ p {
   font-size: 36px;
 }
 
+.credit-amount--file-page {
+  border-radius: 5px;
+  padding: 5px;
+}
+
 .credit-amount--free {
   color: var(--color-secondary);
 
@@ -294,22 +299,6 @@ p {
   padding: 0;
 }
 
-// .credit-amount--plain {
-//   background-color: inherit;
-//   color: inherit;
-//   font-weight: inherit;
-//   font-size: inherit;
-// }
-
-// .credit-amount.credit-amount--no-style {
-//   padding: 0;
-//   font-size: inherit;
-//   font-weight: inherit;
-//   color: inherit;
-//   background-color: transparent;
-//   font-family: 'metropolis-medium';
-// }
-
 .divider__horizontal {
   border-top: var(--color-divider);
   margin: 16px 0;

src/renderer/scss/_vars.scss

@@ -153,9 +153,14 @@ $large-breakpoint: 1921px;
   --success-msg-border: var(--color-green-blue);
   --success-msg-bg: var(--color-green-light);
 
-  /* File Tile Card */
-  --file-tile--media-height: 125px;
-  --file-tile--media-width: calc(125px * (16 / 9));
+  /* File */
+  --file-tile-media-height: 125px;
+  --file-tile-media-width: calc(125px * (16 / 9));
+  --file-tile-media-height-small: 60px;
+  --file-tile-media-width-small: calc(60px * (16 / 9));
+  --file-page-min-width: 400px;
+  --recommended-content-width: 300px;
+  --recommended-content-width-medium: 400px;
 
   /* Modal */
   --modal-width: 440px;

src/renderer/scss/component/_card.scss

@@ -200,11 +200,6 @@
   margin-top: $spacing-vertical * 2/3;
 }
 
-.card__content--columns {
-  display: flex;
-  padding: 0;
-}
-
 .card__content--extra-padding {
   margin-top: $spacing-vertical * 3/2;
 }
@@ -422,13 +417,11 @@
 }
 
 .card__list--recommended {
-  min-width: 300px;
-  flex-basis: auto; /* default value */
-  flex-grow: 1;
+  flex: 0 0 var(--recommended-content-width);
   padding-left: $spacing-width;
 
-  .card {
-    display: block;
+  @media (min-width: $medium-breakpoint) {
+    flex: 0 0 var(--recommended-content-width-medium);
   }
 }
 

src/renderer/scss/component/_content.scss

@@ -1,15 +1,12 @@
 .content__wrapper {
-  min-width: 400px;
-  flex-basis: auto; /* default value */
-  flex-grow: 1;
+  max-width: var(--card-max-width);
+  flex: 1 0 var(--file-page-min-width);
 }
 
 .content__embedded {
   background-color: var(--color-black);
   width: 100%;
   padding-top: var(--video-aspect-ratio);
-  padding-left: 36px;
-  padding-right: 36px;
   position: relative;
   display: flex;
   align-items: center;
@@ -127,8 +124,3 @@ img {
   max-height: 100%;
   max-width: 100%;
 }
-
-.content__info {
-  padding-left: 24px;
-  width: 920px;
-}

src/renderer/scss/component/_file-list.scss

@@ -22,13 +22,11 @@
 
 .file-tile {
   display: flex;
-  margin-top: $spacing-vertical * 1/3;
+  padding-top: $spacing-vertical;
 
   .card__media {
-    // height: var(--file-tile--media-height);
-    // flex: 0 0 var(--file-tile--media-width);
-    height: 60px;
-    flex: 0 0 100px;
+    height: var(--file-tile-media-height);
+    flex: 0 0 var(--file-tile-media-width);
   }
 
   .card__subtitle {
@@ -36,7 +34,13 @@
   }
 }
 
-.file-tile--small {
+.file-tile.file-tile--small {
+  padding-top: $spacing-vertical * 2/3;
+
+  .card__media {
+    height: var(--file-tile-media-height-small);
+    flex: 0 0 var(--file-tile-media-width-small);
+  }
 }
 
 .file-tile__info {

src/renderer/scss/component/_form-field.scss

@@ -51,7 +51,7 @@
   width: 100%;
 }
 
-.form-field__input.form-field--no-padding {
+.form-field__input.form-field--first-item {
   padding: 0;
 }
 
@@ -75,10 +75,6 @@
     width: 400px;
   }
 
-  input.input--toggle {
-    padding: 0;
-  }
-
   &.form-field--auto-height {
     height: auto;
   }