arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-01 03:40:53 +00:00
Code Issues Releases Wiki Activity

fix animation color

Browse Source
This commit is contained in:
slowbackspace 2019-01-09 15:57:59 +01:00
parent ccdc1580e9
commit 0e5300eeee
3 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,10 +25,11 @@ const SvgWrapper = styled.svg`
const CircleWrapper = styled.circle` const CircleWrapper = styled.circle`
${props => props.isRoute && css` ${props => props.isRoute && css`
stroke: ${colors.GRAY_LIGHT}; stroke: ${props.transparentRoute ? 'transparent' : colors.GRAY_LIGHT};
`} `}
${props => props.isPath && css` ${props => props.isPath && css`
stroke-width: ${props.transparentRoute ? '2px' : '1px'};
stroke-dasharray: 1, 200; stroke-dasharray: 1, 200;
stroke-dashoffset: 0; stroke-dashoffset: 0;
animation: ${DASH} 1.5s ease-in-out infinite, ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite; 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 = ({ const Loader = ({
className, text, isWhiteText = false, isSmallText, size = 100, animationColor, className, text, isWhiteText = false, isSmallText, size = 100, animationColor, transparentRoute,
}) => ( }) => (
<Wrapper className={className} size={size}> <Wrapper className={className} size={size}>
<StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph> <StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph>
@ -54,18 +55,19 @@ const Loader = ({
r="20" r="20"
fill="none" fill="none"
stroke="" stroke=""
strokeWidth="1"
strokeMiterlimit="10" strokeMiterlimit="10"
isRoute isRoute
transparentRoute={transparentRoute}
/> />
<CircleWrapper <CircleWrapper
animationColor={animationColor}
cx="50" cx="50"
cy="50" cy="50"
r="20" r="20"
fill="none" fill="none"
strokeWidth="1"
strokeMiterlimit="10" strokeMiterlimit="10"
isPath isPath
transparentRoute={transparentRoute}
/> />
</SvgWrapper> </SvgWrapper>
</Wrapper> </Wrapper>
@ -77,6 +79,7 @@ Loader.propTypes = {
className: PropTypes.string, className: PropTypes.string,
text: PropTypes.string, text: PropTypes.string,
animationColor: PropTypes.string, animationColor: PropTypes.string,
transparentRoute: PropTypes.bool,
size: PropTypes.number, size: PropTypes.number,
}; };

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

@ -5,7 +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 { WHITE_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';
@ -68,7 +68,7 @@ const NotificationButton = ({
> >
{isLoading && ( {isLoading && (
<LoaderContent type={type}> <LoaderContent type={type}>
<Loader animationColor={BLUE_COLOR} size={30} /> <Loader transparentRoute animationColor={WHITE_COLOR} size={30} />
</LoaderContent> </LoaderContent>
)} )}
{icon && ( {icon && (

15
src/config/animations.js
View File

@ -49,18 +49,9 @@ export const GREEN_COLOR = keyframes`
} }
`; `;
export const BLUE_COLOR = keyframes` export const WHITE_COLOR = keyframes`
100%, 0% { 0%, 100% {
stroke: ${colors.WHITE}; stroke: white;
}
40% {
stroke: ${colors.BLUE_SECONDARY};
}
66% {
stroke: ${colors.WHITE};
}
80%, 90% {
stroke: ${colors.WHITE};
} }
`; `;