diff --git a/src/js/components/common/LoaderCircle.js b/src/js/components/common/LoaderCircle.js index fe4f4827..6020083a 100644 --- a/src/js/components/common/LoaderCircle.js +++ b/src/js/components/common/LoaderCircle.js @@ -3,14 +3,22 @@ import React from 'react'; -export default (props: { size: string, label?: string }): React$Element => { +type Props = { + size: string, + label?: string, + className?: string, +}; + +export default (props: Props): React$Element => { + const className = props.className ? `loader-circle ${props.className}` : 'loader-circle'; + const style = { width: `${props.size}px`, height: `${props.size}px`, - }; + } return ( -
+

{ props.label }

@@ -18,4 +26,4 @@ export default (props: { size: string, label?: string }): React$Element
); -}; \ No newline at end of file +}; diff --git a/src/js/components/common/Notification.js b/src/js/components/common/Notification.js index 59e450fa..ac80f222 100644 --- a/src/js/components/common/Notification.js +++ b/src/js/components/common/Notification.js @@ -5,6 +5,8 @@ import React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import Loader from '../common/LoaderCircle'; + import * as NOTIFICATION from '~/js/actions/constants/notification'; import * as NotificationActions from '~/js/actions/NotificationActions'; import type { Action, State, Dispatch } from '~/flowtype'; @@ -21,7 +23,8 @@ type NProps = { title: string; message?: string; actions?: Array; - close?: typeof NotificationActions.close + close?: typeof NotificationActions.close, + loading?: boolean; } export const Notification = (props: NProps): React$Element => { @@ -48,6 +51,11 @@ export const Notification = (props: NProps): React$Element => { { actionButtons }
) : null } + { props.loading ? ( + + ) : null } ); diff --git a/src/js/components/wallet/pages/Acquire.js b/src/js/components/wallet/pages/Acquire.js index 1a3b768a..e60fa57e 100644 --- a/src/js/components/wallet/pages/Acquire.js +++ b/src/js/components/wallet/pages/Acquire.js @@ -23,16 +23,32 @@ const Acquire = (props: Props) => { }, }, ]; + const acquireDeviceAction = { + label: 'Acquire device', + callback: () => { + props.acquireDevice() + } + }; return (
- + {props.acquiring ? ( + + ) : ( + + )}
); }; diff --git a/src/styles/loader.less b/src/styles/loader.less index 6b5338ae..671e50d0 100644 --- a/src/styles/loader.less +++ b/src/styles/loader.less @@ -15,18 +15,18 @@ } .circular { - + width: 100%; height: 100%; animation: rotate 2s linear infinite; transform-origin: center center; - + position: absolute; - + .route { stroke: @color_gray_light; } - + .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; @@ -34,15 +34,15 @@ stroke-linecap: round; } } -} -@keyframes rotate { - 100% { - transform: rotate(360deg); + &.info { + .path { + animation: dash 1.5s ease-in-out infinite, colorInfo 6s ease-in-out infinite; + } } } -@keyframes dash { +@keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; @@ -57,7 +57,7 @@ } } -@keyframes color { +@keyframes color { 100%, 0% { stroke: @color_green_primary; } @@ -70,4 +70,19 @@ 80%, 90% { stroke: @color_green_tertiary; } -} \ No newline at end of file +} + +@keyframes colorInfo { + 100%, 0% { + stroke: @color_info_primary; + } + 40% { + stroke: @color_info_primary; + } + 66% { + stroke: @color_info_primary; + } + 80%, 90% { + stroke: @color_info_primary; + } +} diff --git a/src/styles/notification.less b/src/styles/notification.less index dc8aab70..d091ceab 100644 --- a/src/styles/notification.less +++ b/src/styles/notification.less @@ -40,7 +40,7 @@ h2 { font-size: 14px; font-weight: bold; - + padding: 0px; &:before { .icomoon-info; @@ -68,7 +68,7 @@ } } - + &.success { color: @color_success_primary;