Merge pull request #307 from trezor/fix/notification-loading-button

Added loading state for acquire button

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,
 }) => (
     <Wrapper className={className} size={size}>
         <StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph>
         <SvgWrapper viewBox="25 25 50 50">
             <CircleWrapper
+                animationColor={animationColor}
                 cx="50"
                 cy="50"
                 r="20"
                 fill="none"
                 stroke=""
-                strokeWidth="1"
                 strokeMiterlimit="10"
                 isRoute
+                transparentRoute={transparentRoute}
             />
             <CircleWrapper
+                animationColor={animationColor}
                 cx="50"
                 cy="50"
                 r="20"
                 fill="none"
-                strokeWidth="1"
                 strokeMiterlimit="10"
                 isPath
+                transparentRoute={transparentRoute}
             />
         </SvgWrapper>
     </Wrapper>
@@ -75,6 +78,8 @@ Loader.propTypes = {
     isSmallText: PropTypes.bool,
     className: PropTypes.string,
     text: PropTypes.string,
+    animationColor: PropTypes.string,
+    transparentRoute: PropTypes.bool,
     size: PropTypes.number,
 };
 

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 && (
             <LoaderContent type={type}>
-                <Loader size={30} />
+                <Loader transparentRoute animationColor={WHITE_COLOR} size={30} />
             </LoaderContent>
         )}
         {icon && (

src/components/Notification/index.js

@@ -19,6 +19,7 @@ type Props = {
     className?: string;
     message?: ?string;
     actions?: Array<CallbackAction>;
+    isActionInProgress?: boolean;
     close?: typeof NotificationActions.close,
     loading?: boolean
 };
@@ -122,6 +123,7 @@ const Notification = (props: Props): React$Element<string> => {
                             <NotificationButton
                                 key={action.label}
                                 type={props.type}
+                                isLoading={props.isActionInProgress}
                                 onClick={() => { close(); action.callback(); }}
                             >{action.label}
                             </NotificationButton>

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;

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 (
-        <Wrapper>
-            <Notification
-                title="Device is used in other window"
-                message="Do you want to use your device in this window?"
-                type="info"
-                cancelable={false}
-                actions={actions}
-            />
-        </Wrapper>
-    );
-};
+const Acquire = (props: Props) => (
+    <Wrapper>
+        <Notification
+            title="Device is used in other window"
+            message="Do you want to use your device in this window?"
+            type="info"
+            cancelable={false}
+            isActionInProgress={props.acquiring}
+            actions={
+                [
+                    {
+                        label: 'Acquire device',
+                        callback: () => {
+                            props.acquireDevice();
+                        },
+                    },
+                ]
+            }
+        />
+    </Wrapper>
+);
 
 export default connect(
     (state: State) => ({