arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00
Code Issues Releases Wiki Activity

Pass loader color

Browse Source
This commit is contained in:
Vladimir Volek 2019-01-09 15:02:38 +01:00
parent 5d5347a4e6
commit ccdc1580e9
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Loader/index.js
View File

@ -31,7 +31,7 @@ const CircleWrapper = styled.circle`
${props => props.isPath && css` ${props => props.isPath && css`
stroke-dasharray: 1, 200; stroke-dasharray: 1, 200;
stroke-dashoffset: 0; 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; stroke-linecap: round;
`}; `};
`; `;
@ -42,12 +42,13 @@ const StyledParagraph = styled(Paragraph)`
`; `;
const Loader = ({ const Loader = ({
className, text, isWhiteText = false, isSmallText, size = 100, className, text, isWhiteText = false, isSmallText, size = 100, animationColor,
}) => ( }) => (
<Wrapper className={className} size={size}> <Wrapper className={className} size={size}>
<StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph> <StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph>
<SvgWrapper viewBox="25 25 50 50"> <SvgWrapper viewBox="25 25 50 50">
<CircleWrapper <CircleWrapper
animationColor={animationColor}
cx="50" cx="50"
cy="50" cy="50"
r="20" r="20"
@ -75,6 +76,7 @@ Loader.propTypes = {
isSmallText: PropTypes.bool, isSmallText: PropTypes.bool,
className: PropTypes.string, className: PropTypes.string,
text: PropTypes.string, text: PropTypes.string,
animationColor: PropTypes.string,
size: PropTypes.number, size: PropTypes.number,
}; };

3
src/components/Notification/components/NotificationButton/index.js
View File

@ -5,6 +5,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import colors from 'config/colors'; import colors from 'config/colors';
import { BLUE_COLOR } from 'config/animations';
import { getPrimaryColor } from 'utils/notification'; import { getPrimaryColor } from 'utils/notification';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@ -67,7 +68,7 @@ const NotificationButton = ({
> >
{isLoading && ( {isLoading && (
<LoaderContent type={type}> <LoaderContent type={type}>
<Loader size={30} /> <Loader animationColor={BLUE_COLOR} size={30} />
</LoaderContent> </LoaderContent>
)} )}
{icon && ( {icon && (

15
src/config/animations.js
View File

@ -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` export const PULSATE = keyframes`
0%, 100% { 0%, 100% {
opacity: 0.5; opacity: 0.5;