diff --git a/src/ui/component/doodle/index.js b/src/ui/component/doodle/index.js index 8516969b8..542124684 100644 --- a/src/ui/component/doodle/index.js +++ b/src/ui/component/doodle/index.js @@ -1,6 +1,5 @@ /* eslint react/display-name: 0 */ import React from 'react'; -import 'css-doodle'; -export default ([rule = '']) => () => {rule}; +export default ({ rule = '' }) => {rule}; diff --git a/src/ui/component/splash/internal/load-screen.jsx b/src/ui/component/splash/internal/load-screen.jsx index 6320586c1..ca8fd95cd 100644 --- a/src/ui/component/splash/internal/load-screen.jsx +++ b/src/ui/component/splash/internal/load-screen.jsx @@ -4,7 +4,8 @@ import React, { Fragment } from 'react'; import Icon from 'component/common/icon'; import Spinner from 'component/spinner'; import Button from 'component/button'; -import Doodle from 'component/doodle'; +// import Doodle from 'component/doodle'; +import 'css-doodle'; type Props = { message: string, @@ -13,7 +14,7 @@ type Props = { error: boolean, }; -const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss` +// const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss` class LoadScreen extends React.PureComponent { static defaultProps = { @@ -25,56 +26,8 @@ class LoadScreen extends React.PureComponent { return (
-
-
-

- {__('LBRY')} - beta -

-
- {error ? ( - -

{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}

-
-
-
-

{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}

-

- {__('Reach out to hello@lbry.com for help, or check out')}{' '} -

-
- ) : ( - - {isWarning ? ( - - - {` ${message}`} - - ) : ( -
{message}
- )} - - {details &&
{details}
} - -
- )} -
- - +

{__('LBRY')}

+
); } diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx index 5615dde20..34b5116e6 100644 --- a/src/ui/component/splash/view.jsx +++ b/src/ui/component/splash/view.jsx @@ -170,14 +170,14 @@ export default class SplashScreen extends React.PureComponent { const { daemonVersionMatched, onReadyToLaunch } = this.props; const { isRunning, launchWithIncompatibleDaemon } = this.state; - if (daemonVersionMatched) { - onReadyToLaunch(); - } else if (launchWithIncompatibleDaemon && isRunning) { - // The user may have decided to run the app with mismatched daemons - // They could make this decision before the daemon is finished starting up - // If it isn't running, this function will be called after the daemon is started - onReadyToLaunch(); - } + // if (daemonVersionMatched) { + // onReadyToLaunch(); + // } else if (launchWithIncompatibleDaemon && isRunning) { + // // The user may have decided to run the app with mismatched daemons + // // They could make this decision before the daemon is finished starting up + // // If it isn't running, this function will be called after the daemon is started + // onReadyToLaunch(); + // } } hasRecordedUser: boolean; diff --git a/src/ui/scss/component/_load-screen.scss b/src/ui/scss/component/_load-screen.scss index 25c0f856c..79aeb6f44 100644 --- a/src/ui/scss/component/_load-screen.scss +++ b/src/ui/scss/component/_load-screen.scss @@ -9,86 +9,75 @@ overflow: hidden; css-doodle { - width: 100%; height: 100%; - - overflow: hidden; - position: absolute; - --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); - --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } - :container { perspective: 30vmin; } - - :before, - :after { - @place-cell: @r(100%) @r(100%); - @shape: star; - @size: @r(6px); - background-color: var(--color); - content: ''; + :after, :before { + // content: ''; + // background: var(--color); + // @place-cell: @r(100%) @r(100%); + // @size: @r(6px); + // @shape: heart; } - + @place-cell: center; @size: 100%; - - animation: scale-up 12s linear infinite; - animation-delay: calc(-12s / @size() * @i()); - background-image: @m100( - radial-gradient(var(--color) 50%, transparent 0) + + box-shadow: @m2(0 0 50px var(--color)); + background: @m100( + radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat ); - 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% { - opacity: 0; + 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); + opacity: 0; } - - 10% { - opacity: 1; + 10% { + opacity: 1; } - 95% { - transform: translateZ(35vmin) rotateZ(@var(--deg)); + transform: + translateZ(35vmin) rotateZ(@var(--deg)); } } ) } } -.load-screen__actions { - font-size: 1.2em; - margin-top: var(--spacing-vertical-medium); -} +// .load-screen__actions { +// font-size: 1.2em; +// margin-top: var(--spacing-vertical-medium); +// } -.load-screen__button { - border-bottom: 1px solid $lbry-white; - color: $lbry-white; - transition: none; +// .load-screen__button { +// border-bottom: 1px solid $lbry-white; +// color: $lbry-white; +// transition: none; - &:hover { - border-bottom: 1px solid $lbry-blue-1; - color: $lbry-blue-1; - } -} +// &: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__details { +// font-weight: 600; +// line-height: 1; +// max-width: 400px; +// } .load-screen__header { display: flex; @@ -96,55 +85,46 @@ 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__overlay { - @include center; - width: 100vw; height: 100vh; + // @include center; color: $lbry-white; flex-direction: column; + align-items: center; + justify-content: center; position: relative; text-align: center; z-index: 1; } .load-screen__title { - font-size: 60px; + font-size: 40px; font-weight: 700; line-height: 1; position: relative; + color: $lbry-white; + position: absolute; + + // sup { + // margin-left: -var(--spacing-vertical-tiny); + // padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small); - 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; - } + // 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: 1.5rem; + // } } -.load-screen--help { - font-size: 14px; - padding-top: $spacing-vertical; -} +// .load-screen--help { +// font-size: 14px; +// padding-top: $spacing-vertical; +// }