From eaa9ac392c27d95f550dd18b376719b8b888d00a Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Thu, 8 Feb 2018 18:44:30 -0500 Subject: [PATCH] Unify Spinner / Refresh Styles (#1032) * Unify spinner styles, enforce more SuitCSS style names * Unify spinner styles, enforce more SuitCSS style names * Hide refresh offline, adjust colors correctly. --- common/assets/images/refresh.svg | 5 --- .../BalanceSidebar/AccountInfo.scss | 10 +++-- .../components/BalanceSidebar/AccountInfo.tsx | 41 ++++++++++--------- .../BalanceSidebar/EquivalentValues.scss | 6 +-- .../BalanceSidebar/EquivalentValues.tsx | 4 +- common/components/NonceField.scss | 34 +++++++++------ common/components/NonceField.tsx | 41 ++++++++++++------- .../TXMetaDataPanel/TXMetaDataPanel.scss | 16 -------- common/components/ui/InlineSpinner.scss | 17 +++++++- common/components/ui/InlineSpinner.tsx | 10 +++-- common/components/ui/Spinner.scss | 4 +- common/components/ui/index.ts | 1 + common/sass/variables/transitions.scss | 9 ++-- 13 files changed, 112 insertions(+), 86 deletions(-) delete mode 100644 common/assets/images/refresh.svg diff --git a/common/assets/images/refresh.svg b/common/assets/images/refresh.svg deleted file mode 100644 index 9787d3b5..00000000 --- a/common/assets/images/refresh.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/common/components/BalanceSidebar/AccountInfo.scss b/common/components/BalanceSidebar/AccountInfo.scss index 7aa9c158..a0309d9d 100644 --- a/common/components/BalanceSidebar/AccountInfo.scss +++ b/common/components/BalanceSidebar/AccountInfo.scss @@ -17,7 +17,6 @@ &-refresh { background: transparent; border: none; - margin: 0px 0.5rem; padding: 0; height: 1.4rem; width: 1.2rem; @@ -77,9 +76,14 @@ } } - &-balance-wrapper { + &-balance { display: flex; - align-items: flex-end; + justify-content: flex-start; + align-items: center; + + &-amount { + margin-right: $space-sm; + } } &-list { diff --git a/common/components/BalanceSidebar/AccountInfo.tsx b/common/components/BalanceSidebar/AccountInfo.tsx index d8dc5e2c..370156eb 100644 --- a/common/components/BalanceSidebar/AccountInfo.tsx +++ b/common/components/BalanceSidebar/AccountInfo.tsx @@ -5,10 +5,9 @@ import React from 'react'; import translate from 'translations'; import './AccountInfo.scss'; import Spinner from 'components/ui/Spinner'; -import { getNetworkConfig } from 'selectors/config'; +import { getNetworkConfig, getOffline } from 'selectors/config'; import { AppState } from 'reducers'; import { connect } from 'react-redux'; -import refreshIcon from 'assets/images/refresh.svg'; import { TSetAccountBalance, setAccountBalance } from 'actions/wallet'; interface OwnProps { @@ -18,6 +17,7 @@ interface OwnProps { interface StateProps { balance: Balance; network: NetworkConfig; + isOffline: boolean; } interface State { @@ -70,7 +70,7 @@ class AccountInfo extends React.Component { }; public render() { - const { network, balance } = this.props; + const { network, balance, isOffline } = this.props; const { address, showLongBalance, confirmAddr } = this.state; const { blockExplorer, tokenExplorer } = network; const wallet = this.props.wallet as LedgerWallet | TrezorWallet; @@ -114,30 +114,30 @@ class AccountInfo extends React.Component {
{translate('sidebar_AccountBal')}
    -
  • +
  • + + + {balance.isPending ? ( ) : ( - - - - + !isOffline && ( - + ) )}
@@ -179,7 +179,8 @@ class AccountInfo extends React.Component { function mapStateToProps(state: AppState): StateProps { return { balance: state.wallet.balance, - network: getNetworkConfig(state) + network: getNetworkConfig(state), + isOffline: getOffline(state) }; } const mapDispatchToProps: DispatchProps = { setAccountBalance }; diff --git a/common/components/BalanceSidebar/EquivalentValues.scss b/common/components/BalanceSidebar/EquivalentValues.scss index be76b0f5..a304ca3b 100644 --- a/common/components/BalanceSidebar/EquivalentValues.scss +++ b/common/components/BalanceSidebar/EquivalentValues.scss @@ -12,9 +12,9 @@ } } - .Spinner { - display: block; - margin: auto; + &-spinner { + text-align: center; + padding: 1.6rem; } &-title { diff --git a/common/components/BalanceSidebar/EquivalentValues.tsx b/common/components/BalanceSidebar/EquivalentValues.tsx index 9199f570..a1cf1d38 100644 --- a/common/components/BalanceSidebar/EquivalentValues.tsx +++ b/common/components/BalanceSidebar/EquivalentValues.tsx @@ -158,7 +158,9 @@ class EquivalentValues extends React.Component { ) : ratesError ? (
{ratesError}
) : isFetching ? ( - +
+ +
) : (
{pairRates.length ? ( diff --git a/common/components/NonceField.scss b/common/components/NonceField.scss index 0082106a..15670ac3 100644 --- a/common/components/NonceField.scss +++ b/common/components/NonceField.scss @@ -1,27 +1,24 @@ @import 'common/sass/variables'; +@import 'common/sass/mixins'; -.nonce { - &-label-wrapper { +.Nonce { + &-label { align-items: center; margin-bottom: $space-xs; - > label { + &-text { margin-bottom: 0; } } - &-input-wrapper { + &-field { position: relative; } + &-refresh { - position: absolute; - right: 0; - top: 0; - border: none; - background: transparent; - padding: 0; - margin: 0 1rem; - height: 2.55rem; + @include reset-button; + height: $input-height-base; opacity: 0.3; transition: opacity 300ms; + > img { height: 1.4rem; } @@ -33,4 +30,17 @@ opacity: 1; } } + + &-spinner { + height: 1rem; + } + + &-spinner, + &-refresh { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%) translateZ(0); + margin: 0 1rem; + } } diff --git a/common/components/NonceField.tsx b/common/components/NonceField.tsx index 3bf41a78..066214ac 100644 --- a/common/components/NonceField.tsx +++ b/common/components/NonceField.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { NonceFieldFactory } from 'components/NonceFieldFactory'; import Help from 'components/ui/Help'; -import RefreshIcon from 'assets/images/refresh.svg'; import './NonceField.scss'; -import { InlineSpinner } from 'components/ui/InlineSpinner'; +import { Spinner } from 'components/ui'; import { connect } from 'react-redux'; import { getNonceRequested, TGetNonceRequested } from 'actions/transaction'; import { nonceRequestPending } from 'selectors/transaction'; +import { getOffline } from 'selectors/config'; import { AppState } from 'reducers'; interface OwnProps { @@ -14,7 +14,8 @@ interface OwnProps { } interface StateProps { - nonePending: boolean; + isOffline: boolean; + noncePending: boolean; } interface DispatchProps { @@ -25,35 +26,44 @@ type Props = OwnProps & DispatchProps & StateProps; class NonceField extends React.Component { public render() { - const { alwaysDisplay, requestNonce, nonePending } = this.props; + const { alwaysDisplay, requestNonce, noncePending, isOffline } = this.props; return ( { return alwaysDisplay || shouldDisplay ? ( -
- +
+ -
-
-
+
- + {noncePending ? ( +
+ +
+ ) : ( + !isOffline && ( + + ) + )}
) : null; @@ -63,9 +73,10 @@ class NonceField extends React.Component { } } -const mapStateToProps = (state: AppState) => { +const mapStateToProps = (state: AppState): StateProps => { return { - nonePending: nonceRequestPending(state) + isOffline: getOffline(state), + noncePending: nonceRequestPending(state) }; }; diff --git a/common/components/TXMetaDataPanel/TXMetaDataPanel.scss b/common/components/TXMetaDataPanel/TXMetaDataPanel.scss index ecf38b5e..5d2e0225 100644 --- a/common/components/TXMetaDataPanel/TXMetaDataPanel.scss +++ b/common/components/TXMetaDataPanel/TXMetaDataPanel.scss @@ -8,19 +8,3 @@ left: -8px; } } - -.Calculating-limit { - color: rgba(51, 51, 51, 0.7); - display: flex; - align-items: center; - font-weight: 400; - opacity: 0; - pointer-events: none; - - &.active { - opacity: 1; - } - .Spinner { - margin-left: 8px; - } -} diff --git a/common/components/ui/InlineSpinner.scss b/common/components/ui/InlineSpinner.scss index aad696ba..844e8bb8 100644 --- a/common/components/ui/InlineSpinner.scss +++ b/common/components/ui/InlineSpinner.scss @@ -1,8 +1,21 @@ -.inline-spinner { +@import 'common/sass/variables'; + +.InlineSpinner { + color: $gray-light; + display: flex; + align-items: center; + font-weight: 400; + opacity: 0; + pointer-events: none; + + .Spinner { + margin-left: 8px; + } + &--fade { &-enter, &-exit { - transition: opacity 300ms; + transition: opacity $transition-speed; } &-enter { diff --git a/common/components/ui/InlineSpinner.tsx b/common/components/ui/InlineSpinner.tsx index 193c3d10..d81afbbe 100644 --- a/common/components/ui/InlineSpinner.tsx +++ b/common/components/ui/InlineSpinner.tsx @@ -3,13 +3,15 @@ import { CSSTransition } from 'react-transition-group'; import { Spinner } from 'components/ui'; import './InlineSpinner.scss'; -export const InlineSpinner: React.SFC<{ +interface Props { active: boolean; text?: string; -}> = ({ active, text }) => ( - +} + +export const InlineSpinner: React.SFC = ({ active, text }) => ( + {/* TODO: when react-transition-group v2.3 releases, use '-done' classes instead of conditional 'active' class https://github.com/reactjs/react-transition-group/issues/274 */} -
+
{text}
diff --git a/common/components/ui/Spinner.scss b/common/components/ui/Spinner.scss index 9c5aa284..8e819e3d 100644 --- a/common/components/ui/Spinner.scss +++ b/common/components/ui/Spinner.scss @@ -1,3 +1,5 @@ +@import 'common/sass/variables'; + .Spinner { animation: rotate 2s linear infinite; @@ -39,7 +41,7 @@ &-dark { & .path { - stroke: #163151; + stroke: $ether-navy; } } } diff --git a/common/components/ui/index.ts b/common/components/ui/index.ts index 996dba83..6f979a2c 100644 --- a/common/components/ui/index.ts +++ b/common/components/ui/index.ts @@ -14,3 +14,4 @@ export { default as TitleBar } from './TitleBar'; export { default as HelpLink } from './HelpLink'; export * from './ConditionalInput'; export * from './Expandable'; +export * from './InlineSpinner'; diff --git a/common/sass/variables/transitions.scss b/common/sass/variables/transitions.scss index 4de4058c..fb8fb04f 100644 --- a/common/sass/variables/transitions.scss +++ b/common/sass/variables/transitions.scss @@ -1,4 +1,5 @@ -$transition: 120ms opacity ease, - 120ms color ease, - 120ms background-color ease, - 120ms border-color ease; +$transition-speed: 120ms; +$transition: $transition-speed opacity ease, + $transition-speed color ease, + $transition-speed background-color ease, + $transition-speed border-color ease;