simplify default channel color creation

src/ui/component/channelThumbnail/view.jsx

@@ -12,29 +12,15 @@ type Props = {
 function ChannelThumbnail(props: Props) {
   const { thumbnail, uri } = props;
 
-  function getColorClass() {
+  // Generate a random color class based on the first letter of the channel name
-    // Generate a random color class based on the first letter of the channel name
+  const { channelName } = parseURI(uri);
-    const { channelName } = parseURI(uri);
+  const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
-    const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
+  const className = `channel-thumbnail__default--${initializer % 4}`;
-
-    let thumbnailColorClass = `channel-thumbnail__default--`;
-
-    switch (true) {
-      case initializer < 15:
-        return (thumbnailColorClass += '1');
-      case initializer < 30:
-        return (thumbnailColorClass += '2');
-      case initializer < 45:
-        return (thumbnailColorClass += '3');
-      default:
-        return (thumbnailColorClass += '4');
-    }
-  }
 
   return (
     <div
       className={classnames('channel-thumbnail', {
-        [getColorClass()]: !thumbnail,
+        [className]: !thumbnail,
       })}
     >
       {!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}

src/ui/page/backup/view.jsx

@@ -1,73 +0,0 @@
-// @flow
-import * as React from 'react';
-import Button from 'component/button';
-import Page from 'component/page';
-
-type Props = {
-  daemonSettings: {
-    wallet_dir: ?string,
-  },
-};
-
-class BackupPage extends React.PureComponent<Props> {
-  render() {
-    const { daemonSettings } = this.props;
-    const { wallet_dir: lbryumWalletDir } = daemonSettings;
-
-    const noDaemonSettings = Object.keys(daemonSettings).length === 0;
-
-    return (
-      <Page>
-        <section className="card card--section">
-          {noDaemonSettings ? (
-            <header className="card__header">
-              <h2 className="card__title">{__('Failed to load settings.')}</h2>
-            </header>
-          ) : (
-            <React.Fragment>
-              <header className="card__header">
-                <h2 className="card__title">{__('Backup Your LBRY Credits')}</h2>
-
-                <p className="card__subtitle">
-                  {__(
-                    'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
-                  )}
-                </p>
-              </header>
-
-              <div className="card__content">
-                <p>
-                  {__(
-                    'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
-                  )}
-                </p>
-                <p>
-                  {__(
-                    'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
-                  )}
-                </p>
-                <p className="card__message">{lbryumWalletDir}</p>
-                <p>
-                  {__(
-                    'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
-                  )}
-                </p>
-                <p>
-                  For more details on backing up and best practices,{' '}
-                  <Button
-                    button="link"
-                    href="https://lbry.com/faq/how-to-backup-wallet"
-                    label={__('see this article')}
-                  />
-                  .
-                </p>
-              </div>
-            </React.Fragment>
-          )}
-        </section>
-      </Page>
-    );
-  }
-}
-
-export default BackupPage;

src/ui/scss/component/_card.scss

@@ -1,6 +1,5 @@
 .card {
   background-color: $lbry-white;
-  border: 1px solid $lbry-gray-1;
   margin-bottom: var(--spacing-vertical-xlarge);
   position: relative;
   border-radius: var(--card-radius);
@@ -8,7 +7,6 @@
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-white, 0.1);
-    border-color: rgba($lbry-white, 0.1);
     box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
   }
 }

src/ui/scss/component/_channel.scss

@@ -52,16 +52,16 @@ $metadata-z-index: 1;
   border-radius: var(--card-radius);
 }
 
-.channel-thumbnail__default--1 {
+.channel-thumbnail__default--0 {
   background-color: $lbry-indigo-3;
 }
-.channel-thumbnail__default--2 {
+.channel-thumbnail__default--1 {
   background-color: $lbry-orange-2;
 }
-.channel-thumbnail__default--3 {
+.channel-thumbnail__default--2 {
   background-color: $lbry-blue-3;
 }
-.channel-thumbnail__default--4 {
+.channel-thumbnail__default--3 {
   background-color: $lbry-red-1;
 }