From cbbcf1f4d11685d90a0e4ec65a8c428e1850c8ea Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 7 Jan 2019 15:36:47 +0100 Subject: [PATCH 1/4] Added loading state for acquire button --- src/components/Notification/index.js | 2 ++ src/views/Wallet/views/Acquire/index.js | 43 ++++++++++++------------- 2 files changed, 23 insertions(+), 22 deletions(-) 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/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) => ({ From 5d5347a4e64efb3205b298fa362f2d82f9a5fa78 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 9 Jan 2019 14:47:53 +0100 Subject: [PATCH 2/4] Better button colors --- .../Notification/components/NotificationButton/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index aaa1d707..c83647b3 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -5,7 +5,7 @@ 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 { getPrimaryColor } from 'utils/notification'; import Loader from 'components/Loader'; import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; @@ -31,7 +31,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` From ccdc1580e96bb922437895ec3503c48d1cdb3d44 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 9 Jan 2019 15:02:38 +0100 Subject: [PATCH 3/4] Pass loader color --- src/components/Loader/index.js | 6 ++++-- .../components/NotificationButton/index.js | 3 ++- src/config/animations.js | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js index 0767765b..3d6e839a 100644 --- a/src/components/Loader/index.js +++ b/src/components/Loader/index.js @@ -31,7 +31,7 @@ const CircleWrapper = styled.circle` ${props => props.isPath && css` 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,12 +42,13 @@ const StyledParagraph = styled(Paragraph)` `; const Loader = ({ - className, text, isWhiteText = false, isSmallText, size = 100, + className, text, isWhiteText = false, isSmallText, size = 100, animationColor, }) => ( {text} {isLoading && ( - + )} {icon && ( diff --git a/src/config/animations.js b/src/config/animations.js index 866af919..e23ba206 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -49,6 +49,21 @@ export const GREEN_COLOR = keyframes` } `; +export const BLUE_COLOR = keyframes` + 100%, 0% { + stroke: ${colors.WHITE}; + } + 40% { + stroke: ${colors.BLUE_SECONDARY}; + } + 66% { + stroke: ${colors.WHITE}; + } + 80%, 90% { + stroke: ${colors.WHITE}; + } +`; + export const PULSATE = keyframes` 0%, 100% { opacity: 0.5; From 0e5300eeee01e8f4a21b0709bba04dfc5024a938 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 9 Jan 2019 15:57:59 +0100 Subject: [PATCH 4/4] fix animation color --- src/components/Loader/index.js | 11 +++++++---- .../components/NotificationButton/index.js | 4 ++-- src/config/animations.js | 15 +++------------ 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js index 3d6e839a..0cb29e98 100644 --- a/src/components/Loader/index.js +++ b/src/components/Loader/index.js @@ -25,10 +25,11 @@ 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, ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite; @@ -42,7 +43,7 @@ const StyledParagraph = styled(Paragraph)` `; const Loader = ({ - className, text, isWhiteText = false, isSmallText, size = 100, animationColor, + className, text, isWhiteText = false, isSmallText, size = 100, animationColor, transparentRoute, }) => ( {text} @@ -54,18 +55,19 @@ const Loader = ({ r="20" fill="none" stroke="" - strokeWidth="1" strokeMiterlimit="10" isRoute + transparentRoute={transparentRoute} /> @@ -77,6 +79,7 @@ Loader.propTypes = { 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 2ff20459..9d001380 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -5,7 +5,7 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; import colors from 'config/colors'; -import { BLUE_COLOR } from 'config/animations'; +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'; @@ -68,7 +68,7 @@ const NotificationButton = ({ > {isLoading && ( - + )} {icon && ( diff --git a/src/config/animations.js b/src/config/animations.js index e23ba206..950ea9e2 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -49,18 +49,9 @@ export const GREEN_COLOR = keyframes` } `; -export const BLUE_COLOR = keyframes` - 100%, 0% { - stroke: ${colors.WHITE}; - } - 40% { - stroke: ${colors.BLUE_SECONDARY}; - } - 66% { - stroke: ${colors.WHITE}; - } - 80%, 90% { - stroke: ${colors.WHITE}; +export const WHITE_COLOR = keyframes` + 0%, 100% { + stroke: white; } `;