build/downloadDaemon.js

@@ -24,14 +24,13 @@ const downloadDaemon = targetPlatform =>
     const daemonFilePath = path.join(daemonDir, daemonFileName);
     const daemonVersionPath = path.join(__dirname, 'daemon.ver');
     const tmpZipPath = path.join(__dirname, '..', 'dist', 'daemon.zip');
-    const daemonURL = daemonURLTemplate
+    const daemonURL = daemonURLTemplate.replace(/DAEMONVER/g, daemonVersion).replace(/OSNAME/g, daemonPlatform);
-      .replace(/DAEMONVER/g, daemonVersion)
-      .replace(/OSNAME/g, daemonPlatform);
 
     // If a daemon and daemon.ver exists, check to see if it matches the current daemon version
     const hasDaemonDownloaded = fs.existsSync(daemonFilePath);
     const hasDaemonVersion = fs.existsSync(daemonVersionPath);
     let downloadedDaemonVersion;
+
     if (hasDaemonVersion) {
       downloadedDaemonVersion = fs.readFileSync(daemonVersionPath, 'utf8');
     }
@@ -65,6 +64,7 @@ const downloadDaemon = targetPlatform =>
             })
         )
         .then(() => del(`${daemonFilePath}*`))
+        .then()
         .then(() =>
           decompress(tmpZipPath, daemonDir, {
             filter: file => path.basename(file.path) === daemonFileName,
@@ -80,9 +80,7 @@ const downloadDaemon = targetPlatform =>
           resolve('Done');
         })
         .catch(error => {
-          console.error(
+          console.error(`\x1b[31merror\x1b[0m Daemon download failed due to: \x1b[35m${error}\x1b[0m`);
-            `\x1b[31merror\x1b[0m Daemon download failed due to: \x1b[35m${error}\x1b[0m`
-          );
           reject(error);
         });
     }

package.json

@@ -81,6 +81,7 @@
     "copy-webpack-plugin": "^4.6.0",
     "country-data": "^0.0.31",
     "cross-env": "^5.2.0",
+    "css-doodle": "^0.7.1",
     "css-loader": "^2.1.0",
     "cssnano": "^4.1.10",
     "dat.gui": "^0.7.2",

src/platforms/electron/createWindow.js

@@ -16,7 +16,7 @@ export default appState => {
   });
 
   const windowConfiguration = {
-    backgroundColor: '#2f9176',
+    backgroundColor: '#270f34', // Located in src/scss/init/_vars.scss `--color-background`
     minWidth: 950,
     minHeight: 600,
     autoHideMenuBar: true,

src/ui/component/doodle/index.js

@@ -0,0 +1,5 @@
+/* eslint react/display-name: 0 */
+
+import React from 'react';
+
+export default ({ rule = '' }) => <css-doodle use="var(--rule)">{rule}</css-doodle>;

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

@@ -1,78 +0,0 @@
-// @flow
-import * as ICONS from 'constants/icons';
-import React, { Fragment } from 'react';
-import Icon from 'component/common/icon';
-import Spinner from 'component/spinner';
-import Button from 'component/button';
-
-type Props = {
-  message: string,
-  details: ?string,
-  isWarning: boolean,
-  error: boolean,
-};
-
-class LoadScreen extends React.PureComponent<Props> {
-  static defaultProps = {
-    isWarning: false,
-  };
-
-  render() {
-    const { details, message, isWarning, error } = this.props;
-
-    return (
-      <div className="load-screen">
-        <div>
-          <div className="load-screen__header">
-            <h1 className="load-screen__title">
-              {__('LBRY')}
-              <sup>beta</sup>
-            </h1>
-          </div>
-          {error ? (
-            <Fragment>
-              <h3>{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}</h3>
-              <div className="load-screen__actions">
-                <Button
-                  label="Refresh"
-                  button="link"
-                  className="load-screen__button"
-                  onClick={() => window.location.reload()}
-                />
-              </div>
-              <div className="load-screen__help">
-                <p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
-                <p>
-                  {__('Reach out to hello@lbry.com for help, or check out')}{' '}
-                  <Button
-                    button="link"
-                    className="load-screen__button"
-                    href="https://lbry.com/faq/startup-troubleshooting"
-                    label="this link"
-                  />
-                  .
-                </p>
-              </div>
-            </Fragment>
-          ) : (
-            <Fragment>
-              {isWarning ? (
-                <span className="load-screen__message">
-                  <Icon size={20} icon={ICONS.ALERT} />
-                  {` ${message}`}
-                </span>
-              ) : (
-                <div className="load-screen__message">{message}</div>
-              )}
-
-              {details && <div className="load-screen__details">{details}</div>}
-              <Spinner type="splash" />
-            </Fragment>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default LoadScreen;

src/ui/component/splash/view.jsx

@@ -1,14 +1,15 @@
 // @flow
-import * as React from 'react';
 import * as MODALS from 'constants/modal_types';
+import React from 'react';
 import { Lbry } from 'lbry-redux';
+import Button from 'component/button';
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
 import ModalUpgrade from 'modal/modalUpgrade';
 import ModalDownloading from 'modal/modalDownloading';
-import LoadScreen from './internal/load-screen';
+import 'css-doodle';
 
-const ONE_MINUTE = 60 * 1000;
+const FORTY_FIVE_SECONDS = 45 * 1000;
 
 type Props = {
   checkDaemonVersion: () => Promise<any>,
@@ -87,7 +88,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
     // If nothing changes after 1 minute, show the error message.
     this.timeout = setTimeout(() => {
       this.setState({ error: true });
-    }, ONE_MINUTE);
+    }, FORTY_FIVE_SECONDS);
   }
 
   updateStatus() {
@@ -206,16 +207,66 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { message, details, error } = this.state;
+    const { error } = this.state;
 
     return (
-      <React.Fragment>
+      <div className="splash">
-        <LoadScreen message={message} details={details} error={error} />
+        <css-doodle>
+          {`
+            --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
+            :doodle {
+              @grid: 30x1 / 18vmin;
+              --deg: @p(-180deg, 180deg);
+            }
+            :container {
+              perspective: 30vmin;
+            }
+          
+            @place-cell: center;
+            @size: 100%;
+          
+            box-shadow: @m2(0 0 50px var(--color));            
+            will-change: transform, opacity;
+            animation: scale-up 12s linear infinite;
+            animation-delay: calc(-12s / @size() * @i());
+
+            @keyframes scale-up {
+              0%, 95.01%, 100% {
+                transform: translateZ(0) rotate(0);
+                opacity: 0;
+              }
+              10% { 
+                opacity: 1; 
+              }
+              95% {
+                transform: 
+                  translateZ(35vmin) rotateZ(@var(--deg));
+              }
+            }
+          )
+          `}
+        </css-doodle>
+        <h1 className="splash__title">LBRY</h1>
+        {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>
+            <div className="card__actions--top-space card__actions--center">
+              <Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
+            </div>
+            <div className="help">
+              <p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
+              <p>
+                {__('Reach out to hello@lbry.com for help, or check out')}{' '}
+                <Button button="link" href="https://lbry.com/faq/startup-troubleshooting" label="this link" />.
+              </p>
+            </div>
+          </div>
+        )}
         {/* Temp hack: don't show any modals on splash screen daemon is running;
             daemon doesn't let you quit during startup, so the "Quit" buttons
           in the modals won't work. */}
         {this.renderModals()}
-      </React.Fragment>
+      </div>
     );
   }
 }

src/ui/scss/all.scss

@@ -24,7 +24,6 @@
 @import 'component/header';
 @import 'component/icon';
 @import 'component/item-list';
-@import 'component/load-screen';
 @import 'component/main';
 @import 'component/markdown-editor';
 @import 'component/markdown-preview';
@@ -38,6 +37,7 @@
 @import 'component/search';
 @import 'component/snack-bar';
 @import 'component/spinner';
+@import 'component/splash';
 @import 'component/subscriptions';
 @import 'component/syntax-highlighter';
 @import 'component/table';

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

@@ -1,86 +0,0 @@
-.load-screen {
-  min-width: 100vw;
-  min-height: 100vh;
-
-  align-items: center;
-  background-image: linear-gradient(to right, $lbry-teal-5, $lbry-cyan-5 100%);
-  background-size: cover;
-  color: $lbry-white;
-  cursor: default;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-
-  .spinner {
-    margin-right: auto;
-    margin-left: auto;
-  }
-}
-
-.load-screen__button {
-  transition: none;
-  color: $lbry-white;
-  border-bottom: 1px solid $lbry-white;
-
-  &:hover {
-    border-bottom: 1px solid $lbry-blue-1;
-    color: $lbry-blue-1;
-  }
-}
-
-.load-screen__details {
-  font-weight: 600;
-  line-height: 1;
-  max-width: 400px;
-}
-
-.load-screen__header {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--spacing-vertical-medium);
-}
-
-.load-screen__help {
-  font-size: 1.25rem;
-  padding-top: var(--spacing-vertical-large);
-}
-
-.load-screen__message {
-  font-size: 16px;
-  font-weight: 800;
-  line-height: 1;
-  margin-bottom: var(--spacing-vertical-medium);
-}
-
-.load-screen__title {
-  font-size: 60px;
-  font-weight: 700;
-  line-height: 1;
-  position: relative;
-
-  sup {
-    margin-left: -var(--spacing-vertical-tiny);
-    padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small);
-
-    background-color: rgba($lbry-white, 0.3);
-    border-radius: 0.2rem;
-    color: $lbry-white;
-    font-size: 0.6rem;
-    font-weight: 400;
-    letter-spacing: 0.1rem;
-    line-height: 1;
-    position: absolute;
-    text-transform: uppercase;
-    top: 2.15rem;
-  }
-}
-
-.load-screen--help {
-  font-size: 14px;
-  padding-top: $spacing-vertical;
-}
-
-.load-screen__actions {
-  font-size: 1.2em;
-  margin-top: var(--spacing-vertical-medium);
-}

src/ui/scss/component/_modal.scss

@@ -90,8 +90,7 @@
 
 .error-modal__content {
   display: flex;
-  padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium)
+  padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium) var(--spacing-vertical-medium);
-    var(--spacing-vertical-medium);
 }
 
 .error-modal__warning-symbol {

src/ui/scss/component/_splash.scss

@@ -0,0 +1,46 @@
+.splash {
+  width: 100vw;
+  height: 100vh;
+
+  align-items: center;
+  background-color: var(--color-background);
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+// .splash__actions {
+//   margin-top: var(--spacing-vertical-medium);
+//   align-items: center;
+// }
+
+.splash__button {
+  border-bottom: 1px solid $lbry-white;
+  color: $lbry-white;
+  transition: none;
+
+  &:hover {
+    border-bottom: 1px solid $lbry-blue-1;
+    color: $lbry-blue-1;
+  }
+}
+
+.splash__details {
+  font-weight: 600;
+  line-height: 1;
+  max-width: 400px;
+}
+
+.splash__title {
+  position: absolute;
+  font-size: 40px;
+  line-height: 1;
+  font-weight: 700;
+  color: $lbry-white;
+}
+
+.splash__error {
+  position: absolute;
+  margin-top: 25rem;
+  box-shadow: var(--card-box-shadow) $lbry-gray-5;
+}

src/ui/scss/init/_vars.scss

@@ -9,7 +9,6 @@ $large-breakpoint: 1921px;
   // Width & spacing
   --side-nav-width: 180px;
   --font-size-subtext-multiple: 0.92;
-
   --spacing-vertical-miniscule: calc(2rem / 5);
   --spacing-vertical-tiny: calc(2rem / 4);
   --spacing-vertical-small: calc(2rem / 3);
@@ -17,15 +16,15 @@ $large-breakpoint: 1921px;
   --spacing-vertical-large: 2rem;
   --spacing-vertical-xlarge: 3rem;
   --spacing-main-padding: var(--spacing-vertical-xlarge);
-
   --file-page-max-width: 1787px;
   --file-max-height: 788px;
   --file-max-width: 1400px;
-
   --video-aspect-ratio: 56.25%; // 9 x 16
-
   --channel-thumbnail-size: 10rem;
 
+  // Color
+  --color-background: #270f34;
+
   // Text
   --text-max-width: 660px;
   --text-link-padding: 4px;

yarn.lock

@@ -3001,6 +3001,11 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
+css-doodle@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/css-doodle/-/css-doodle-0.7.1.tgz#477466310df6554ec5182349745194ba37415670"
+  integrity sha512-TRs+7YLgP/yc0EdrL5Us2GRHbhIgf4GsQWAt5WdRxr5pwwpWl8Q9jZle431Z/5u5C29jiEoItjIaKE84xFh+kA==
+
 css-hot-loader@^1.4.3:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.4.4.tgz#ae784932cd8b7d092f7f15702af08b3ec9436052"