diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js index 0767765b..0cb29e98 100644 --- a/src/components/Loader/index.js +++ b/src/components/Loader/index.js @@ -25,13 +25,14 @@ const SvgWrapper = styled.svg` const CircleWrapper = styled.circle` ${props => props.isRoute && css` - stroke: ${colors.GRAY_LIGHT}; + stroke: ${props.transparentRoute ? 'transparent' : colors.GRAY_LIGHT}; `} ${props => props.isPath && css` + stroke-width: ${props.transparentRoute ? '2px' : '1px'}; stroke-dasharray: 1, 200; stroke-dashoffset: 0; - animation: ${DASH} 1.5s ease-in-out infinite, ${GREEN_COLOR} 6s ease-in-out infinite; + animation: ${DASH} 1.5s ease-in-out infinite, ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite; stroke-linecap: round; `}; `; @@ -42,29 +43,31 @@ const StyledParagraph = styled(Paragraph)` `; const Loader = ({ - className, text, isWhiteText = false, isSmallText, size = 100, + className, text, isWhiteText = false, isSmallText, size = 100, animationColor, transparentRoute, }) => ( {text} @@ -75,6 +78,8 @@ Loader.propTypes = { isSmallText: PropTypes.bool, className: PropTypes.string, text: PropTypes.string, + animationColor: PropTypes.string, + transparentRoute: PropTypes.bool, size: PropTypes.number, }; diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index aaa1d707..9d001380 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -5,7 +5,8 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; import colors from 'config/colors'; -import { getPrimaryColor, getSecondaryColor } from 'utils/notification'; +import { WHITE_COLOR } from 'config/animations'; +import { getPrimaryColor } from 'utils/notification'; import Loader from 'components/Loader'; import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; @@ -31,7 +32,8 @@ const LoaderContent = styled.div` justify-content: center; align-items: center; cursor: default; - background: ${props => getSecondaryColor(props.type)}; + color: ${colors.WHITE}; + background: ${props => getPrimaryColor(props.type)}; `; const Wrapper = styled.button` @@ -66,7 +68,7 @@ const NotificationButton = ({ > {isLoading && ( - + )} {icon && ( diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 34162047..6eade847 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -19,6 +19,7 @@ type Props = { className?: string; message?: ?string; actions?: Array; + isActionInProgress?: boolean; close?: typeof NotificationActions.close, loading?: boolean }; @@ -122,6 +123,7 @@ const Notification = (props: Props): React$Element => { { close(); action.callback(); }} >{action.label} diff --git a/src/config/animations.js b/src/config/animations.js index 866af919..950ea9e2 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -49,6 +49,12 @@ export const GREEN_COLOR = keyframes` } `; +export const WHITE_COLOR = keyframes` + 0%, 100% { + stroke: white; + } +`; + export const PULSATE = keyframes` 0%, 100% { opacity: 0.5; diff --git a/src/views/Wallet/views/Acquire/index.js b/src/views/Wallet/views/Acquire/index.js index 1df45e01..4dfd980c 100644 --- a/src/views/Wallet/views/Acquire/index.js +++ b/src/views/Wallet/views/Acquire/index.js @@ -21,28 +21,27 @@ const Wrapper = styled.div` flex: 1; `; -const Acquire = (props: Props) => { - const actions = props.acquiring ? [] : [ - { - label: 'Acquire device', - callback: () => { - props.acquireDevice(); - }, - }, - ]; - - return ( - - - - ); -}; +const Acquire = (props: Props) => ( + + { + props.acquireDevice(); + }, + }, + ] + } + /> + +); export default connect( (state: State) => ({