From ffda954add95fc17049cd0f5386952dabfc4168b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Apr 2018 18:28:34 -0700 Subject: Fix styling of the app spinner --- ui/app/app.js | 3 +- ui/app/components/buy-button-subview.js | 2 +- ui/app/components/loading-screen/index.js | 2 + .../loading-screen/loading-screen.component.js | 35 ++++++++++ ui/app/components/loading.js | 34 ---------- ui/app/components/pending-tx/index.js | 2 +- ui/app/components/spinner/index.js | 2 + ui/app/components/spinner/spinner.component.js | 78 ++++++++++++++++++++++ ui/app/conf-tx.js | 2 +- ui/app/css/itcss/components/loading-overlay.scss | 21 ++++++ 10 files changed, 143 insertions(+), 38 deletions(-) create mode 100644 ui/app/components/loading-screen/index.js create mode 100644 ui/app/components/loading-screen/loading-screen.component.js delete mode 100644 ui/app/components/loading.js create mode 100644 ui/app/components/spinner/index.js create mode 100644 ui/app/components/spinner/spinner.component.js (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index 0b38b1326..f09d7cf79 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -29,7 +29,7 @@ const AddTokenPage = require('./components/pages/add-token') const CreateAccountPage = require('./components/pages/create-account') const NoticeScreen = require('./components/pages/notice') -const Loading = require('./components/loading') +const Loading = require('./components/loading-screen') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') @@ -144,6 +144,7 @@ class App extends Component { (isLoading || isLoadingNetwork) && h(Loading, { loadingMessage: loadMessage, + fullScreen: true, }), // content diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index fda7c3e17..c6957d2aa 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -6,7 +6,7 @@ const connect = require('react-redux').connect const actions = require('../actions') const CoinbaseForm = require('./coinbase-form') const ShapeshiftForm = require('./shapeshift-form') -const Loading = require('./loading') +const Loading = require('./loading-screen') const AccountPanel = require('./account-panel') const RadioList = require('./custom-radio-list') const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util') diff --git a/ui/app/components/loading-screen/index.js b/ui/app/components/loading-screen/index.js new file mode 100644 index 000000000..191d953f7 --- /dev/null +++ b/ui/app/components/loading-screen/index.js @@ -0,0 +1,2 @@ +const LoadingScreen = require('./loading-screen.component') +module.exports = LoadingScreen diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/loading-screen/loading-screen.component.js new file mode 100644 index 000000000..bce2a4aac --- /dev/null +++ b/ui/app/components/loading-screen/loading-screen.component.js @@ -0,0 +1,35 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const classnames = require('classnames') +const Spinner = require('../spinner') + +class LoadingScreen extends Component { + renderMessage () { + const { loadingMessage } = this.props + return loadingMessage && h('span', loadingMessage) + } + + render () { + return ( + h('.loading-overlay', { + className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }), + }, [ + h('.loading-overlay__container', [ + h(Spinner, { + color: '#F7C06C', + }), + + this.renderMessage(), + ]), + ]) + ) + } +} + +LoadingScreen.propTypes = { + loadingMessage: PropTypes.string, + fullScreen: PropTypes.bool, +} + +module.exports = LoadingScreen diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js deleted file mode 100644 index b9afc550f..000000000 --- a/ui/app/components/loading.js +++ /dev/null @@ -1,34 +0,0 @@ -const { Component } = require('react') -const h = require('react-hyperscript') -const PropTypes = require('prop-types') -const classnames = require('classnames') - -class LoadingIndicator extends Component { - renderMessage () { - const { loadingMessage } = this.props - return loadingMessage && h('span', loadingMessage) - } - - render () { - return ( - h('.loading-overlay', { - className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }), - }, [ - h('.flex-center.flex-column', [ - h('img', { - src: 'images/loading.svg', - }), - - this.renderMessage(), - ]), - ]) - ) - } -} - -LoadingIndicator.propTypes = { - loadingMessage: PropTypes.string, - fullScreen: PropTypes.bool, -} - -module.exports = LoadingIndicator diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 6ee83ba7e..ace52748c 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -12,7 +12,7 @@ const util = require('../../util') const ConfirmSendEther = require('./confirm-send-ether') const ConfirmSendToken = require('./confirm-send-token') const ConfirmDeployContract = require('./confirm-deploy-contract') -const Loading = require('../loading') +const Loading = require('../loading-screen') const TX_TYPES = { DEPLOY_CONTRACT: 'deploy_contract', diff --git a/ui/app/components/spinner/index.js b/ui/app/components/spinner/index.js new file mode 100644 index 000000000..9589efcf0 --- /dev/null +++ b/ui/app/components/spinner/index.js @@ -0,0 +1,2 @@ +const Spinner = require('./spinner.component') +module.exports = Spinner diff --git a/ui/app/components/spinner/spinner.component.js b/ui/app/components/spinner/spinner.component.js new file mode 100644 index 000000000..b9a2eb52a --- /dev/null +++ b/ui/app/components/spinner/spinner.component.js @@ -0,0 +1,78 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Spinner = ({ className = '', color = '#000000' }) => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ) +} + +Spinner.propTypes = { + className: PropTypes.string, + color: PropTypes.string, +} + +module.exports = Spinner diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index b71538e31..fb38aaa76 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -13,7 +13,7 @@ const SignatureRequest = require('./components/signature-request') // const PendingMsg = require('./components/pending-msg') // const PendingPersonalMsg = require('./components/pending-personal-msg') // const PendingTypedMsg = require('./components/pending-typed-msg') -const Loading = require('./components/loading') +const Loading = require('./components/loading-screen') const { DEFAULT_ROUTE } = require('./routes') module.exports = compose( diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index a92fffec5..c18b7fa59 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -26,4 +26,25 @@ width: 100vw; margin-top: 0; } + + &__container { + position: absolute; + top: 33%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__message { + margin-top: 32px; + font-weight: 400; + font-size: 20px; + color: $manatee; + } +} + +.spinner { + height: 58px; + width: 58px; } -- cgit