Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/Common/AvalancheFinalized.tsx

Changeset View

Standalone View

View Options

cashtab/src/components/Common/AvalancheFinalized.tsx

Show All 20 Lines
const fill = keyframes` const fill = keyframes`
100% { 100% {
box-shadow: inset 0px 0px 0px 30px #838d91; box-shadow: inset 0px 0px 0px 30px #838d91;
} }
`; `;
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex;
align-items: center;
svg { svg {
width: 14px !important; width: 11px !important;
height: 14px !important; height: 11px !important;
} }
path { path {
fill: none; fill: none;
} }
`; `;
// Note that we do not use the title prop // Note that we do not use the title prop
// styled-components gives us a lint error for specifying it below if it is // styled-components gives us a lint error for specifying it below if it is
// not specified here // not specified here
// It is a prop of the component, we just happen to not have conditional style rules // It is a prop of the component, we just happen to not have conditional style rules
// based on this prop // based on this prop
const Finalized = styled.svg<{ title: string }>` const Finalized = styled.svg<{ title: string }>`
border-radius: 50%; border-radius: 50%;
stroke-width: 2; stroke-width: 2;
stroke: #fff; stroke: #fff;
stroke-miterlimit: 10; stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px ${props => props.theme.secondaryText};
animation: animation:
${fill} 0.4s ease-in-out 0.4s forwards, ${fill} 0.4s ease-in-out 0.4s forwards,
${scale} 0.3s ease-in-out 0.9s both; ${scale} 0.3s ease-in-out 0.9s both;
`; `;
const Circle = styled.circle` const Circle = styled.circle`
stroke-dasharray: 166; stroke-dasharray: 166;
stroke-dashoffset: 166; stroke-dashoffset: 166;
stroke-width: 2; stroke-width: 2;
stroke-miterlimit: 10; stroke-miterlimit: 10;
stroke: ${props => props.theme.secondaryText}; stroke: ${props => props.theme.secondaryText};
fill: none; fill: none;
animation: ${stroke} 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; animation: ${stroke} 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
`; `;
const Check = styled.path` const Check = styled.path`
transform-origin: 50% 50%; transform-origin: 50% 50%;
transform: scale(1.3); transform: scale(1.2);
stroke-dasharray: 48; stroke-dasharray: 48;
stroke-dashoffset: 48; stroke-dashoffset: 48;
animation: ${stroke} 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; animation: ${stroke} 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
stroke-width: 6; stroke-width: 6;
stroke: ${props => props.theme.primaryBackground}; stroke: ${props => props.theme.primaryBackground};
`; `;
export const AvalancheFinalized: React.FC = () => { export const AvalancheFinalized: React.FC = () => {
Show All 15 Lines