Merge pull request #2466 from lbryio/fixes

General fixes
2019-05-09 17:20:41 -04:00 · 2019-05-09 17:20:41 -04:00 · aa9ef09a9d
commit aa9ef09a9d
parent 0b80e4993c 4619039312
26 changed files with 145 additions and 140 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "LBRY",
-  "version": "0.31.1",
+  "version": "0.32.0-rc.1",
  "description": "A browser for the LBRY network, a digital marketplace controlled by its users.",
  "keywords": [
    "lbry"
--- a/src/ui/component/channelContent/view.jsx
+++ b/src/ui/component/channelContent/view.jsx
@ -14,7 +14,6 @@ type Props = {
  claimsInChannel: Array<StreamClaim>,
  channelIsMine: boolean,
  fetchClaims: (string, number) => void,
-  location: UrlLocation,
 };

 function ChannelContent(props: Props) {
--- a/src/ui/component/common/form-components/form-field.jsx
+++ b/src/ui/component/common/form-components/form-field.jsx
@ -1,16 +1,12 @@
 // @flow
 import type { ElementRef } from 'react';
-import React, { Suspense } from 'react';
+import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import MarkdownPreview from 'component/common/markdown-preview';
 import 'easymde/dist/easymde.min.css';
 import Toggle from 'react-toggle';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
-
-const SimpleMDE = React.lazy(() =>
-  import(/* webpackChunkName: "SimpleMDE" */
-  'react-simplemde-editor')
-);
+import SimpleMDE from 'react-simplemde-editor';
+import MarkdownPreview from 'component/common/markdown-preview-internal';

 type Props = {
  name: string,
@ -137,21 +133,20 @@ export class FormField extends React.PureComponent<Props> {
          <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
            <fieldset-section>
              <label htmlFor={name}>{label}</label>
-              <Suspense fallback={<div />}>
-                <SimpleMDE
-                  {...inputProps}
-                  id={name}
-                  type="textarea"
-                  events={handleEvents}
-                  options={{
-                    hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
-                    previewRender(plainText) {
-                      const preview = <MarkdownPreview content={plainText} />;
-                      return ReactDOMServer.renderToString(preview);
-                    },
-                  }}
-                />
-              </Suspense>
+              <SimpleMDE
+                {...inputProps}
+                id={name}
+                type="textarea"
+                events={handleEvents}
+                options={{
+                  spellChecker: false,
+                  hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
+                  previewRender(plainText) {
+                    const preview = <MarkdownPreview content={plainText} />;
+                    return ReactDOMServer.renderToString(preview);
+                  },
+                }}
+              />
            </fieldset-section>
          </div>
        );
--- a/src/ui/component/common/paginate.jsx
+++ b/src/ui/component/common/paginate.jsx
@ -40,12 +40,10 @@ function Paginate(props: Props) {
    }
  }

-  if (totalPages <= 1 || loading) {
-    return null;
-  }
-
  return (
-    <Form>
+    // Hide the paginate controls if we are loading or there is only one page
+    // It should still be rendered to trigger the onPageChange callback
+    <Form style={totalPages <= 1 || loading ? { display: 'none' } : null}>
      <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
        <fieldset-section>
          <ReactPaginate
--- a/src/ui/component/fileViewer/internal/player.jsx
+++ b/src/ui/component/fileViewer/internal/player.jsx
@ -34,12 +34,25 @@ type State = {
    contentType?: string,
    downloadPath?: string,
    fileType?: string,
+    // Just using `any` because flow isn't working with `fs.createReadStream`
+    stream?: ({}) => any,
  },
 };

 class MediaPlayer extends React.PureComponent<Props, State> {
  static SANDBOX_TYPES = ['application/x-lbry', 'application/x-ext-lbry'];
-  static FILE_MEDIA_TYPES = ['text', 'script', 'e-book', 'comic-book', 'document', '3D-file', 'video', 'audio'];
+  static FILE_MEDIA_TYPES = [
+    'text',
+    'script',
+    'e-book',
+    'comic-book',
+    'document',
+    '3D-file',
+    // @if TARGET='web'
+    'video',
+    'audio',
+    // @endif
+  ];
  static SANDBOX_SET_BASE_URL = 'http://localhost:5278/set/';
  static SANDBOX_CONTENT_BASE_URL = 'http://localhost:5278';

@ -276,6 +289,10 @@ class MediaPlayer extends React.PureComponent<Props, State> {
      contentType,
      downloadPath,
      fileType: path.extname(fileName).substring(1),
+      // Readable stream from file
+      // @if TARGET='app'
+      stream: opts => fs.createReadStream(downloadPath, opts),
+      // @endif
    };

    // Update state
--- a/src/ui/component/navigationHistory/view.jsx
+++ b/src/ui/component/navigationHistory/view.jsx
@ -87,7 +87,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
          <Button button="link" label={allSelected ? __('Cancel') : __('Select All')} onClick={selectHandler} />
        </div>
        {!!historyItems.length && (
-          <section className="card__content item-list">
+          <section className="card card__content item-list">
            {historyItems.map(item => (
              <NavigationHistoryItem
                key={item.uri}
@ -107,9 +107,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
      <div className="main--empty">
        <section className="card card--section">
          <header className="card__header">
-            <h2 className="card__title">
-              {__("You don't have anything saved in history yet, go check out some content on LBRY!")}
-            </h2>
+            <h2 className="card__title">{__('Your history is empty, what are you doing here?')}</h2>
          </header>

          <div className="card__content">
--- a/src/ui/component/navigationHistoryRecent/view.jsx
+++ b/src/ui/component/navigationHistoryRecent/view.jsx
@ -16,7 +16,7 @@ export default function NavigationHistoryRecent(props: Props) {
  const { history = [] } = props;

  return history.length ? (
-    <div className="item-list">
+    <div className="card item-list">
      <section className="card__content">
        {history.map(({ lastViewed, uri }) => (
          <NavigationHistoryItem slim key={uri} uri={uri} lastViewed={lastViewed} />
--- a/src/ui/component/publishForm/view.jsx
+++ b/src/ui/component/publishForm/view.jsx
@ -70,7 +70,7 @@ class PublishForm extends React.PureComponent<Props> {
    (this: any).getNewUri = this.getNewUri.bind(this);
  }

-  componentWillMount() {
+  componentDidMount() {
    const { thumbnail } = this.props;
    if (!thumbnail) {
      this.props.resetThumbnailStatus();
@ -190,7 +190,7 @@ class PublishForm extends React.PureComponent<Props> {
  }

  handlePublish() {
-    const { filePath, licenseType, licenseUrl, otherLicenseDescription, myClaimForUri, publish } = this.props;
+    const { filePath, licenseType, licenseUrl, otherLicenseDescription, publish } = this.props;

    let publishingLicense;
    switch (licenseType) {
@ -264,7 +264,7 @@ class PublishForm extends React.PureComponent<Props> {
    // If there is an error it will be presented as an inline error as well
    return (
      !isFormValid && (
-        <div className="card__content card__subtitle error-text">
+        <div className="card__content error-text">
          {!title && <div>{__('A title is required')}</div>}
          {!name && <div>{__('A URL is required')}</div>}
          {name && nameError && <div>{__('The URL you created is not valid')}</div>}
@ -581,22 +581,17 @@ class PublishForm extends React.PureComponent<Props> {
            </section>

            <section className="card card--section">
-              <div className="card__content">
+              <div className="card__actions">
+                <Submit
+                  label={submitLabel}
+                  disabled={formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS}
+                />
+                <Button button="link" onClick={this.handleCancelPublish} label={__('Cancel')} />
+              </div>
+              <p className="help">
                {__('By continuing, you accept the')}{' '}
                <Button button="link" href="https://www.lbry.com/termsofservice" label={__('LBRY Terms of Service')} />.
-              </div>
-            </section>
-
-            <section className="card card--section">
-              <div className="card__content">
-                <div className="card__actions">
-                  <Submit
-                    label={submitLabel}
-                    disabled={formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS}
-                  />
-                  <Button button="link" onClick={this.handleCancelPublish} label={__('Cancel')} />
-                </div>
-              </div>
+              </p>
            </section>
          </div>

--- a/src/ui/component/transactionList/internal/transaction-list-item.jsx
+++ b/src/ui/component/transactionList/internal/transaction-list-item.jsx
@ -7,7 +7,6 @@ import CreditAmount from 'component/common/credit-amount';
 import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
-import { formatLbryUriForWeb } from 'util/uri';

 type Props = {
  transaction: Transaction,
@ -67,7 +66,7 @@ class TransactionListItem extends React.PureComponent<Props> {
        <td className="table__item--actionable">
          {reward && <span>{reward.reward_title}</span>}
          {name && claimId && (
-            <Button constrict button="link" navigate={buildURI({ claimName: name, claimId })}>
+            <Button button="link" navigate={buildURI({ claimName: name, claimId })}>
              {name}
            </Button>
          )}
--- a/src/ui/component/transactionList/view.jsx
+++ b/src/ui/component/transactionList/view.jsx
@ -2,7 +2,6 @@
 import * as icons from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import * as React from 'react';
-import { List } from 'react-virtualized';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import FileExporter from 'component/common/file-exporter';
@ -103,7 +102,7 @@ class TransactionList extends React.PureComponent<Props> {
            </div>
          )}
        </header>
-        {!transactionList.length && <p>{emptyMessage || __('No transactions to list.')}</p>}
+        {!transactionList.length && <p className="card__subtitle">{emptyMessage || __('No transactions to list.')}</p>}

        {!!transactionList.length && (
          <React.Fragment>
--- a/src/ui/component/transactionListRecent/view.jsx
+++ b/src/ui/component/transactionListRecent/view.jsx
@ -31,11 +31,6 @@ class TransactionListRecent extends React.PureComponent<Props> {
            {__('Recent Transactions')}
            <RefreshTransactionButton />
          </h2>
-
-          <p className="card__subtitle">
-            {__('To view all of your transactions, navigate to the')}{' '}
-            <Button button="link" navigate="/$/transactions" label={__('transactions page')} />.
-          </p>
        </header>

        {fetchingTransactions && !hasTransactions && (
--- a/src/ui/component/userVerify/view.jsx
+++ b/src/ui/component/userVerify/view.jsx
@ -28,7 +28,7 @@ class UserVerify extends React.PureComponent<Props> {
    return (
      <React.Fragment>
        <section className="card card--section">
-          <header className="card__header">
+          <header className="card__header--flat">
            <h1 className="card__title">{__('Final Human Proof')}</h1>
            <p className="card__subtitle">
              Finally, please complete <strong>one and only one</strong> of the options below.
--- a/src/ui/component/walletBalance/view.jsx
+++ b/src/ui/component/walletBalance/view.jsx
@ -16,9 +16,9 @@ const WalletBalance = (props: Props) => {
    >
      <header className="card__header">
        <h2 className="card__title">{__('Balance')}</h2>
-        <p className="card__subtitle">{__('You currently have')}</p>
      </header>
      <div className="card__content">
+        <h3>{__('You currently have')}</h3>
        {(balance || balance === 0) && <CreditAmount large badge={false} amount={balance} precision={8} />}
      </div>
    </section>
--- a/src/ui/page/settings/view.jsx
+++ b/src/ui/page/settings/view.jsx
@ -159,7 +159,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
            <section className="card card--section">
              <header className="card__header">
                <h2 className="card__title">{__('Download Directory')}</h2>
-                <p className="card__subtitle">{__('LBRY downloads will be saved here.')}</p>
              </header>

              <div className="card__content">
@ -171,6 +170,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                      setDaemonSetting('download_dir', newDirectory);
                    }}
                  />
+                  <p className="help">{__('LBRY downloads will be saved here.')}</p>
                </Form>
              </div>
            </section>
@ -178,9 +178,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
            <section className="card card--section">
              <header className="card__header">
                <h2 className="card__title">{__('Max Purchase Price')}</h2>
-                <p className="card__subtitle">
-                  {__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
-                </p>
              </header>

              <Form className="card__content">
@ -212,15 +209,16 @@ class SettingsPage extends React.PureComponent<Props, State> {
                    price={daemonSettings.max_key_fee ? daemonSettings.max_key_fee : defaultMaxKeyFee}
                  />
                )}
+
+                <p className="help">
+                  {__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
+                </p>
              </Form>
            </section>

            <section className="card card--section">
              <header className="card__header">
                <h2 className="card__title">{__('Purchase Confirmations')}</h2>
-                <p className="card__subtitle">
-                  {__("When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price.")}
-                </p>
              </header>

              <Form className="card__content">
@ -251,6 +249,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
                    price={instantPurchaseMax}
                  />
                )}
+
+                <p className="help">
+                  {__("When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price.")}
+                </p>
              </Form>
            </section>

@ -397,11 +399,12 @@ class SettingsPage extends React.PureComponent<Props, State> {
            <section className="card card--section">
              <header className="card__header">
                <h2 className="card__title">{__('Application Cache')}</h2>
-                <p className="card__subtitle">
-                  {__('This will clear the application cache. Your wallet will not be affected.')}
-                </p>
              </header>

+              <p className="help--warning">
+                {__('This will clear the application cache. Your wallet will not be affected.')}
+              </p>
+
              <div className="card__content">
                <Button
                  button="primary"
--- a/src/ui/page/show/view.jsx
+++ b/src/ui/page/show/view.jsx
@ -26,8 +26,8 @@ class ShowPage extends React.PureComponent<Props> {
    if (!isResolvingUri) resolveUri(uri);
  }

-  componentWillReceiveProps(nextProps: Props) {
-    const { isResolvingUri, resolveUri, claim, uri, totalPages } = nextProps;
+  componentDidUpdate() {
+    const { isResolvingUri, resolveUri, claim, uri, totalPages } = this.props;
    if (
      !isResolvingUri &&
      uri &&
--- a/src/ui/scss/component/_button.scss
+++ b/src/ui/scss/component/_button.scss
@ -56,19 +56,6 @@
  box-sizing: border-box;
 }

-// We need the :disabled to override the default disabled button styles
-// This is a little different because we still want to keep the button styled
-// since it acts as an "active" state
-.button--subscription-view-selected:disabled {
-  color: $lbry-teal-5;
-  border-bottom: 1px solid $lbry-teal-5;
-  opacity: 1;
-
-  html[data-mode='dark'] & {
-    color: $lbry-teal-3;
-  }
-}
-
 .button--uri-indicator {
  max-width: 100%;
  height: 1.2em;
--- a/src/ui/scss/component/_card.scss
+++ b/src/ui/scss/component/_card.scss
@ -4,12 +4,12 @@
  margin-bottom: var(--spacing-vertical-xlarge);
  position: relative;
  border-radius: var(--card-radius);
-  box-shadow: var(--box-shadow) $lbry-gray-1;
+  box-shadow: var(--card-box-shadow) $lbry-gray-1;

  html[data-mode='dark'] & {
    background-color: rgba($lbry-white, 0.1);
    border-color: rgba($lbry-white, 0.1);
-    box-shadow: var(--box-shadow) darken($lbry-gray-1, 80%);
+    box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
  }
 }

@ -199,6 +199,9 @@
 //  S U B T I T L E

 .card__subtitle {
+  @extend .help;
+  background-color: lighten($lbry-gray-1, 7%);
+  color: darken($lbry-gray-5, 30%);
  font-size: 1.15rem;
  margin-bottom: var(--spacing-vertical-small);

@ -210,6 +213,10 @@
    bottom: -0.12rem;
    position: relative;
  }
+
+  [data-mode='dark'] & {
+    background-color: darken($lbry-gray-5, 20%);
+  }
 }

 //  C A R D
@ -218,7 +225,7 @@
 .card__title {
  font-size: 2rem;
  font-weight: 600;
-  padding-bottom: var(--spacing-vertical-medium);
+  margin-bottom: var(--spacing-vertical-medium);

  + .card__content {
    margin-top: var(--spacing-vertical-medium);
--- a/src/ui/scss/component/_form-field.scss
+++ b/src/ui/scss/component/_form-field.scss
@ -5,6 +5,12 @@
 // This is because many styles inside `lbry/components/sass/form/` are very specific
 // As styles become hardened here, they _should_ slowly move over to that repo

+input,
+textarea,
+select {
+  border-radius: var(--input-border-radius);
+}
+
 input-submit {
  align-items: center;
 }
@ -82,6 +88,16 @@ fieldset-group {
      &:first-of-type {
        input {
          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:nth-of-type(2) {
+        input,
+        select {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
        }
      }
    }
@ -126,7 +142,12 @@ fieldset-group {
        padding-right: 0;
        border: 1px solid;
        border-right: 0;
+        border-color: $lbry-black;
        color: $lbry-gray-4;
+
+        [data-mode='dark'] & {
+          border-color: $lbry-gray-4;
+        }
      }
    }

@ -135,6 +156,8 @@ fieldset-group {

      input {
        border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
        padding-left: var(--spacing-xs);

        &:focus {
@ -172,10 +195,11 @@ form {

 fieldset-section {
  input-submit {
-    input,
-    select {
-      &:first-child:not(:focus) {
+    input {
+      &:first-child {
        border-right-color: transparent;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
      }
    }

@ -193,7 +217,10 @@ fieldset-section {
    }

    .button {
-      border-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: var(--input-border-radius);
+      border-bottom-right-radius: var(--input-border-radius);
    }
  }

--- a/src/ui/scss/component/_markdown-editor.scss
+++ b/src/ui/scss/component/_markdown-editor.scss
@ -3,7 +3,8 @@
  border-right: 1px solid $lbry-gray-1;
  border-bottom: 1px solid $lbry-gray-1;
  border-left: 1px solid $lbry-gray-1;
-  border-radius: 0;
+  border-bottom-left-radius: var(--input-border-radius);
+  border-bottom-right-radius: var(--input-border-radius);
  background: $lbry-white;
  color: $lbry-black;

@ -49,7 +50,8 @@
 .editor-toolbar {
  background-color: $lbry-gray-1;
  border: none;
-  border-radius: 0;
+  border-top-left-radius: var(--input-border-radius);
+  border-top-right-radius: var(--input-border-radius);
  opacity: 1; // ?

  &:hover {
--- a/src/ui/scss/component/_media.scss
+++ b/src/ui/scss/component/_media.scss
@ -1,7 +1,9 @@
 //  M E D I A
 //  C A R D
 .media-card {
+  @include mediaThumbHoverZoom;
  font-size: 1.2rem;
+  border-radius: var(--card-radius);

  .media__title {
    margin-bottom: var(--spacing-vertical-small);
@ -10,22 +12,13 @@
  .media__properties {
    height: 1em;
  }
-
-  &:hover {
-    box-shadow: 0 0 50px rgba($lbry-black, 0.08);
-    background-color: rgba($lbry-black, 0.04);
-
-    html[data-mode='dark'] & {
-      box-shadow: 0 0 50px rgba($lbry-white, 0.07);
-      background-color: rgba($lbry-white, 0.03);
-    }
-  }
 }

 //  M E D I A
 //  T I L E

 .media-tile {
+  @include mediaThumbHoverZoom;
  display: flex;
  font-size: 1.5rem;
  position: relative;
@ -106,6 +99,7 @@

 .media__thumb {
  @include thumbnail;
+  border-radius: var(--card-radius);

  &:not(.media__thumb--nsfw) {
    background-color: $lbry-gray-2;
--- a/src/ui/scss/component/_placeholder.scss
+++ b/src/ui/scss/component/_placeholder.scss
@ -35,17 +35,6 @@
 }

 .media-tile--large.media-placeholder {
-  .media__title,
-  .media__channel,
-  .media__subtitle {
-    // display: block;
-    // padding-left: var(--spacing-vertical-large);
-  }
-
-  .media__thumb {
-    // margin-right: var(--spacing-vertical-large);
-  }
-
  .media__title {
    width: 60%;
    height: 3rem;
--- a/src/ui/scss/component/_search.scss
+++ b/src/ui/scss/component/_search.scss
@ -1,5 +1,5 @@
 .search__header {
-  padding: var(--spacing-vertical-large);
+  margin-bottom: var(--spacing-vertical-large);

  .placeholder {
    background-color: rgba($lbry-white, 0.1);
@ -24,10 +24,6 @@
  }
 }

-.search__results-wrapper {
-  margin: var(--spacing-vertical-large);
-}
-
 .search__results-section {
  margin-bottom: var(--spacing-vertical-large);
  min-height: 200px;
--- a/src/ui/scss/component/_table.scss
+++ b/src/ui/scss/component/_table.scss
@ -31,25 +31,15 @@ table,
 .table--transactions {
  td:nth-of-type(1) {
    // TX amounts
-    width: 25%;
    font-size: 0.9em;
    font-weight: 600;
  }

-  td:nth-of-type(2) {
-    width: 20%;
-  }
-
  td:nth-of-type(3) {
-    width: 22.5%;
-  }
-
-  td:nth-of-type(4) {
-    width: 17.5%;
-  }
-
-  td:nth-of-type(5) {
-    width: 15%;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
  }
 }

--- a/src/ui/scss/init/_gui.scss
+++ b/src/ui/scss/init/_gui.scss
@ -132,8 +132,8 @@ code {
  color: $lbry-gray-5;
  display: block;
  padding: 1rem;
-  margin-top: var(--spacing-vertical-large);
-  margin-bottom: var(--spacing-vertical-large);
+  margin-top: var(--spacing-vertical-medium);
+  margin-bottom: var(--spacing-vertical-medium);
  border-radius: 5px;

  html[data-mode='dark'] & {
@ -142,6 +142,7 @@ code {
 }

 .help--warning {
+  @extend .help;
  background-color: $lbry-yellow-3;
  color: $lbry-black;

--- a/src/ui/scss/init/_mixins.scss
+++ b/src/ui/scss/init/_mixins.scss
@ -1,8 +1,21 @@
@mixin placeholder {
  animation: pulse 2s infinite ease-in-out;
  background-color: $lbry-gray-2;
+  border-radius: var(--card-radius);

  html[data-mode='dark'] & {
    background-color: rgba($lbry-white, 0.1);
  }
 }
+
+@mixin mediaThumbHoverZoom {
+  .media__thumb {
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    .media__thumb {
+      transform: scale(1.05);
+    }
+  }
+}
--- a/src/ui/scss/init/_vars.scss
+++ b/src/ui/scss/init/_vars.scss
@ -36,6 +36,7 @@ $large-breakpoint: 1921px;

  // Input
  --input-border-size: 1px;
+  --input-border-radius: 2px;

  // Select
  --select-height: 30px;
@ -53,7 +54,7 @@ $large-breakpoint: 1921px;
  // Card
  --card-radius: 5px;
  --card-max-width: 1000px;
-  --card-box-shadow: 0px 8px 20px;
+  --card-box-shadow: 0px 0px 30px 2px;

  // File
  --file-tile-media-height: 125px;