cleanup

src/ui/component/button/view.jsx

@@ -70,7 +70,6 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
           'button--disabled': disabled,
           'button--link': button === 'link',
           'button--constrict': constrict,
-          'button--splash': button === 'splash',
         }
       : 'button--no-style',
     className

src/ui/component/splash/view.jsx

@@ -11,7 +11,6 @@ import ModalDownloading from 'modal/modalDownloading';
 import 'css-doodle';
 
 const FORTY_FIVE_SECONDS = 45 * 1000;
-type SetDaemonSettingArg = boolean | string | number;
 
 type Props = {
   checkDaemonVersion: () => Promise<any>,
@@ -24,7 +23,7 @@ type Props = {
     id: string,
   },
   animationHidden: boolean,
-  setClientSetting: (string, SetDaemonSettingArg) => void,
+  setClientSetting: (string, boolean) => void,
 };
 
 type State = {
@@ -147,22 +146,13 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
           message: __('Blockchain Sync'),
           details: `${__('Catching up...')} (${blockchainHeaders.download_progress}%)`,
         });
-        if (this.timeout) {
-          clearTimeout(this.timeout);
-        }
       }
     } else if (wallet && wallet.blocks_behind > 0) {
       const format = wallet.blocks_behind === 1 ? '%s block behind' : '%s blocks behind';
-      // Only show blocks behind if it takes more than a few seconds.
-      setTimeout(() => {
       this.setState({
         message: __('Blockchain Sync'),
         details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`,
       });
-      }, 5000);
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
     } else if (
       wallet &&
       wallet.blocks_behind === 0 &&
@@ -170,15 +160,10 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
       !status.is_running &&
       startupStatus.database
     ) {
-      // Usually the transaction sync state, there's no status for this yet
-      // Only show after user has been waiting 10 seconds
-      // https://github.com/lbryio/lbry-sdk/issues/2314
-      setTimeout(() => {
       this.setState({
         message: 'Finalizing',
-          details: 'Almost done...',
+        details: 'Almost ready...',
       });
-      }, 10000);
     }
 
     setTimeout(() => {
@@ -278,14 +263,15 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
           </css-doodle>
         )}
         <Button
-          className="splash__controls"
+          className="splash__animation-toggle"
-          button="splash"
+          label={!animationHidden ? __('I feel woosy! Stop spinning!') : __('Spin Spin Sugar')}
-          label={!animationHidden ? __('I feel woosy! Stop spinning!') : 'Spin Spin Sugar'}
           onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
         />
         {error && (
           <div className="splash__error card card--section">
-            <h3>{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}</h3>
+            <p className="card__subtitle">
+              {__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}
+            </p>
             <div className="card__actions--top-space card__actions--center">
               <Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
             </div>

src/ui/scss/component/_button.scss

@@ -31,14 +31,11 @@
 }
 
 .button--primary,
-.button--inverse,
+.button--inverse {
-.button--splash {
   height: var(--button-height);
   border-radius: var(--button-radius);
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: 1em;
-  padding-left: 1em;
   box-sizing: border-box;
 }
 
@@ -55,21 +52,6 @@
   }
 }
 
-.button--splash {
-  border-color: $lbry-white;
-  color: $lbry-white;
-  background-color: rgba($lbry-white, 0.2);
-  font-size: var(--font-label);
-
-  &:hover {
-    color: $lbry-white;
-    background-color: rgba($lbry-white, 0.5);
-    .icon {
-      stroke: $lbry-white;
-    }
-  }
-}
-
 .button--alt {
   padding: 0;
 }

src/ui/scss/component/_splash.scss

@@ -10,11 +10,6 @@
   overflow: hidden;
 }
 
-// .splash__actions {
-//   margin-top: var(--spacing-medium);
-//   align-items: center;
-// }
-
 .splash__button {
   border-bottom: 1px solid $lbry-white;
   color: $lbry-white;
@@ -28,7 +23,6 @@
 
 .splash__details {
   position: absolute;
-  font-size: 12px;
   line-height: 1;
   font-weight: 300;
   color: $lbry-white;
@@ -44,10 +38,23 @@
   margin-top: -1rem;
 }
 
-.splash__controls {
+.splash__animation-toggle {
   position: fixed;
-  bottom: 30px;
+  bottom: var(--spacing-large);
-  right: 30px;
+  right: var(--spacing-large);
+  padding: var(--spacing-medium);
+  border-color: $lbry-white;
+  color: $lbry-white;
+  background-color: rgba($lbry-white, 0.2);
+  font-size: var(--font-label);
+
+  &:hover {
+    color: $lbry-white;
+    background-color: rgba($lbry-white, 0.5);
+    .icon {
+      stroke: $lbry-white;
+    }
+  }
 }
 
 .splash__error {