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) => ({