зеркало из https://github.com/mozilla/fxa.git
feat(svg): Animate 3x SVGs to prep for SMS use
Because: * We want new SVGs, and we want them animated This commit: * Adds these SVGs to our Images storybook, animates them per UX preferences * Adds some more SVG notes to our settings README closes FXA-10202
This commit is contained in:
Lauren Zugai
Родитель
73b710023e
Коммит
94dbdd00b7
|
|
@ -96,6 +96,10 @@ module.exports = {
|
|||
listStyleType: {
|
||||
circle: 'circle',
|
||||
},
|
||||
transitionDelay: {
|
||||
1200: '1200ms',
|
||||
1500: '1500ms',
|
||||
},
|
||||
},
|
||||
screens: {
|
||||
mobileLandscape: '480px',
|
||||
|
|
@ -272,6 +276,22 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
plugins: [
|
||||
// this gives us the same classes as delay-* (for transition),
|
||||
// but for animation-delay-* instead
|
||||
plugin(({ matchUtilities, theme }) => {
|
||||
matchUtilities(
|
||||
{
|
||||
'animation-delay': (value) => {
|
||||
return {
|
||||
'animation-delay': value,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
values: theme('transitionDelay'),
|
||||
}
|
||||
);
|
||||
}),
|
||||
plugin(function ({ addUtilities }) {
|
||||
const customUtilities = {
|
||||
'.clip-auto': {
|
||||
|
|
|
|||
|
|
@ -491,6 +491,30 @@ background-image: url('/path-to-image.svg');
|
|||
|
||||
To use a background-image with Tailwind, you'll need to add a class to the `backgroundImage` object in the Tailwind config file. Check config files for examples.
|
||||
|
||||
#### Animated SVGs
|
||||
|
||||
Since SVGs are just XML, we can add styles and classes to them to animate them with CSS. This has been shown to increase user engagement and our animated SVGs respect `prefers-reduced-motion` if users don't wish to see animations.
|
||||
|
||||
UX should give a brief description of what they're visualizing. When possible and agreeable with UX, for best a11y practices, try to keep animations at 5 seconds and under, try to only use "infinite" animations on small movements, and consider pushing back against very large movement animations.
|
||||
|
||||
##### Developing
|
||||
|
||||
**Note that our CSP prevents global `<style>` tags in SVGs from being used**. This is a pitfall because global styles allow animations to show directly on the SVG in PR reviews and will look fine in local development, but there will be CSP errors and no animation as soon as it reaches stage.
|
||||
|
||||
You may find it easiest to use something like CodePen (paste the SVG into the HTML section) to figure out the initial animation and confer with UX for immediate feedback, but you can also work in Storybook instead. Inspect SVGs with dev tools to see what vector path corresponds with what is visually displayed and add a `class` property like you would with HTML.
|
||||
|
||||
If new `keyframes` are needed, add them to the Tailwind config file and add your new animation under `animation`. Tailwind names, e.g. `my-new-thing` under `animation`, will become classes like `animate-my-new-thing`. Keep in mind you may not need a new `keyframe` if you can use an existing `keyframe` with a new `animation` name and style and that you can also add `animation-delay-*` etc. in conjunction with your animation class. If you are working in Storybook after updating a Tailwind config file you may need to manually run `yarn build-css` in `fxa-settings` - check the `tailwind.out.css` file to confirm your generated class names.
|
||||
|
||||
If you need to "group" paths together like you would with a div or span, use `<g></g>` tags to apply classes to a group of elements. You may also need to move a `path` around, adjust the `viewBox`, or request a new SVG if certain vector segments aren't created well for the desired animation (e.g. two layered `path`s look fine, but once you animate the top one, there's a gap on the bottom one; each vector piece should be exported to be whole).
|
||||
|
||||
Since SVGs contain unique vector paths/shapes with inconsistent widths/heights, you _may_ want to add something like a one-off `transform-origin` in an inline `style` to prevent these CSS classes from being included in our final tailwind.out.css file.
|
||||
|
||||
#### Minifying SVGs
|
||||
|
||||
Use [SVGO](https://github.com/svg/svgo) to minify SVGs. Always double check SVGs after minifying them because occasionally, something is removed or modified that changes the appearance of the SVG.
|
||||
|
||||
Recently, we've been keeping original SVGs and appending a `.min` to those SVGs that have been ran through SVGO to make it obvious which SVGs have been minified. This can also make tweaking animations on SVGs easier as well or any other reason we may want to refer to the original graphic.
|
||||
|
||||
### Metrics
|
||||
|
||||
Metrics reports are currently sent to the fxa-content-server metrics endpoint. Use the [metrics library](./src/lib/metrics.ts) to log events and other information.
|
||||
|
|
|
|||
|
|
@ -24,3 +24,7 @@ lightbulb-aria-label =
|
|||
.aria-label = Illustration to represent creating a storage hint.
|
||||
email-code-image-aria-label =
|
||||
.aria-label = Illustration to represent an email containing a code.
|
||||
recovery-phone-image-description =
|
||||
.aria-label = Mobile device that receives a code by text message.
|
||||
recovery-phone-code-image-description =
|
||||
.aria-label = Code received on a mobile device.
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 7.6 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
<svg width="251" height="163" viewBox="0 0 251 163" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_5165_11537)">
|
||||
<path d="M50.7741 95.2646C50.9254 95.2646 51.0746 95.2723 51.225 95.2757C51.225 95.272 51.2247 95.2683 51.2247 95.2646C51.2247 82.1933 62.0191 71.5969 75.3347 71.5969C86.1477 71.5969 95.2978 78.5847 98.3554 88.2109C100.664 87.0176 103.291 86.3389 106.081 86.3389C115.252 86.3389 122.686 93.6372 122.686 102.64C122.686 104.107 122.486 105.527 122.116 106.879C123.782 106.152 125.621 105.74 127.562 105.74C134.983 105.74 141 111.647 141 118.932C141 126.218 134.983 132.124 127.562 132.124H50.7741C40.4055 132.124 32 123.873 32 113.694C32 103.516 40.4055 95.2646 50.7741 95.2646Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_5165_11537)">
|
||||
<path d="M200.743 46.264C200.596 46.264 200.45 46.2716 200.304 46.275C200.304 46.2714 200.304 46.2677 200.304 46.264C200.304 33.407 189.807 22.9844 176.858 22.9844C166.343 22.9844 157.444 29.8576 154.471 39.326C152.226 38.1523 149.671 37.4847 146.958 37.4847C138.04 37.4847 130.81 44.6633 130.81 53.5186C130.81 54.9611 131.005 56.358 131.364 57.6878C129.744 56.9733 127.955 56.5681 126.068 56.5681C118.851 56.5681 113 62.3775 113 69.5437C113 76.7099 118.851 82.5193 126.068 82.5193H200.743C210.826 82.5193 219 74.4033 219 64.3916C219 54.3799 210.826 46.264 200.743 46.264Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_d_5165_11537)">
|
||||
<path d="M147.851 104.417C147.939 104.417 148.025 104.422 148.112 104.424C148.112 104.422 148.112 104.42 148.112 104.417C148.112 96.7032 154.351 90.4496 162.047 90.4496C168.296 90.4496 173.585 94.5735 175.352 100.255C176.686 99.5503 178.205 99.1498 179.817 99.1498C185.118 99.1498 189.415 103.457 189.415 108.77C189.415 109.636 189.299 110.474 189.085 111.272C190.048 110.843 191.111 110.6 192.233 110.6C196.523 110.6 200 114.085 200 118.385C200 122.685 196.523 126.171 192.233 126.171H147.851C141.858 126.171 137 121.301 137 115.294C137 109.287 141.858 104.417 147.851 104.417Z" fill="white"/>
|
||||
</g>
|
||||
<path d="M131.403 65.7499V40.8375H94.8241C91.0552 40.8375 88 43.8515 88 47.5694V129.361C88 133.079 91.0552 136.093 94.8241 136.093H156.656C160.425 136.093 163.48 133.079 163.48 129.361V72.4818H138.227C134.458 72.4818 131.403 69.4678 131.403 65.7499Z" fill="#0090ED"/>
|
||||
<path d="M131.402 40.8375L131.402 65.7499C131.402 69.4678 134.458 72.4818 138.226 72.4818H163.48C163.48 69.2604 162.183 66.171 159.874 63.8931L140.109 44.3951C137.8 42.1172 134.668 40.8375 131.402 40.8375Z" fill="#00B3F4"/>
|
||||
<path d="M106.666 110.307L107.37 113.336H104.376L105.081 110.307L102.741 112.417L101.281 109.836L104.276 108.942L101.281 107.999L102.816 105.467L105.081 107.577L104.376 104.549H107.37L106.641 107.627L109.006 105.467L110.49 108.049L107.396 108.967L110.49 109.885L108.956 112.417L106.666 110.307Z" fill="white" class="animate-fade-out-in animation-delay-700"/>
|
||||
<path d="M119.9 110.307L120.605 113.336H117.611L118.315 110.307L115.975 112.417L114.516 109.836L117.51 108.942L114.516 107.999L116.051 105.467L118.315 107.577L117.611 104.549H120.605L119.875 107.627L122.24 105.467L123.725 108.049L120.63 108.967L123.725 109.885L122.19 112.417L119.9 110.307Z" fill="white" class="animate-fade-out-in animation-delay-500"/>
|
||||
<path d="M133.139 110.307L133.843 113.336H130.849L131.553 110.307L129.213 112.417L127.754 109.836L130.748 108.942L127.754 107.999L129.289 105.467L131.553 107.577L130.849 104.549H133.843L133.113 107.627L135.479 105.467L136.963 108.049L133.868 108.967L136.963 109.885L135.428 112.417L133.139 110.307Z" fill="white" class="animate-fade-out-in animation-delay-300"/>
|
||||
<path d="M146.377 110.307L147.081 113.336H144.087L144.792 110.307L142.452 112.417L140.992 109.836L143.986 108.942L140.992 107.999L142.527 105.467L144.792 107.577L144.087 104.549H147.081L146.352 107.627L148.717 105.467L150.201 108.049L147.107 108.967L150.201 109.885L148.667 112.417L146.377 110.307Z" fill="white" class="animate-fade-out-in"/>
|
||||
<path d="M106.666 96.6562L107.37 99.6844H104.376L105.081 96.6562L102.741 98.7662L101.281 96.1845L104.276 95.291L101.281 94.348L102.816 91.816L105.081 93.9258L104.376 90.8976H107.37L106.641 93.9755L109.006 91.816L110.49 94.3974L107.396 95.3159L110.49 96.2343L108.956 98.7662L106.666 96.6562Z" fill="white" class="animate-fade-out-in"/>
|
||||
<path d="M119.9 96.6562L120.605 99.6844H117.611L118.315 96.6562L115.975 98.7662L114.516 96.1845L117.51 95.291L114.516 94.348L116.051 91.816L118.315 93.9258L117.611 90.8976H120.605L119.875 93.9755L122.24 91.816L123.725 94.3974L120.63 95.3159L123.725 96.2343L122.19 98.7662L119.9 96.6562Z" fill="white" class="animate-fade-out-in"/>
|
||||
<path d="M133.139 96.6562L133.843 99.6844H130.849L131.553 96.6562L129.213 98.7662L127.754 96.1845L130.748 95.291L127.754 94.348L129.289 91.816L131.553 93.9258L130.849 90.8976H133.843L133.113 93.9755L135.479 91.816L136.963 94.3974L133.868 95.3159L136.963 96.2343L135.428 98.7662L133.139 96.6562Z" fill="white" class="animate-fade-out-in animation-delay-1000"/>
|
||||
<path d="M146.377 96.6562L147.081 99.6844H144.087L144.792 96.6562L142.452 98.7662L140.992 96.1845L143.986 95.291L140.992 94.348L142.527 91.816L144.792 93.9258L144.087 90.8976H147.081L146.352 93.9755L148.717 91.816L150.201 94.3974L147.107 95.3159L150.201 96.2343L148.667 98.7662L146.377 96.6562Z" fill="white" class="animate-fade-out-in animation-delay-700"/>
|
||||
<path d="M106.666 83.0051L107.37 86.0332H104.376L105.081 83.0051L102.741 85.1151L101.281 82.5334L104.276 81.6398L101.281 80.6968L102.816 78.1649L105.081 80.2746L104.376 77.2465H107.37L106.641 80.3244L109.006 78.1649L110.49 80.7463L107.396 81.6647L110.49 82.5832L108.956 85.1151L106.666 83.0051Z" fill="white" class="animate-fade-out-in animation-delay-300"/>
|
||||
<path d="M119.9 83.0051L120.605 86.0332H117.611L118.315 83.0051L115.975 85.1151L114.516 82.5334L117.51 81.6398L114.516 80.6968L116.051 78.1649L118.315 80.2746L117.611 77.2465H120.605L119.875 80.3244L122.24 78.1649L123.725 80.7463L120.63 81.6647L123.725 82.5832L122.19 85.1151L119.9 83.0051Z" fill="white" class="animate-fade-out-in animation-delay-300"/>
|
||||
<path d="M133.139 83.0051L133.843 86.0332H130.849L131.553 83.0051L129.213 85.1151L127.754 82.5334L130.748 81.6398L127.754 80.6968L129.289 78.1649L131.553 80.2746L130.849 77.2465H133.843L133.113 80.3244L135.479 78.1649L136.963 80.7463L133.868 81.6647L136.963 82.5832L135.428 85.1151L133.139 83.0051Z" fill="white" class="animate-fade-out-in animation-delay-1000"/>
|
||||
<path d="M146.377 83.0051L147.081 86.0332H144.087L144.792 83.0051L142.452 85.1151L140.992 82.5334L143.986 81.6398L140.992 80.6968L142.527 78.1649L144.792 80.2746L144.087 77.2465H147.081L146.352 80.3244L148.717 78.1649L150.201 80.7463L147.107 81.6647L150.201 82.5832L148.667 85.1151L146.377 83.0051Z" fill="white" class="animate-fade-out-in animation-delay-700"/>
|
||||
|
||||
<path d="M106.666 69.3539L107.37 72.382H104.376L105.081 69.3539L102.741 71.4639L101.281 68.8822L104.276 67.9887L101.281 67.0457L102.816 64.5137L105.081 66.6234L104.376 63.5953H107.37L106.641 66.6732L109.006 64.5137L110.49 67.0951L107.396 68.0136L110.49 68.932L108.956 71.4639L106.666 69.3539Z" fill="white" class="animate-fade-out-in animation-delay-300"/>
|
||||
<path d="M119.9 69.3539L120.605 72.382H117.611L118.315 69.3539L115.975 71.4639L114.516 68.8822L117.51 67.9887L114.516 67.0457L116.051 64.5137L118.315 66.6234L117.611 63.5953H120.605L119.875 66.6732L122.24 64.5137L123.725 67.0951L120.63 68.0136L123.725 68.932L122.19 71.4639L119.9 69.3539Z" fill="white" class="animate-fade-out-in"/>
|
||||
<g class="animate-spin-xl origin-[5.75rem_7.88rem]">
|
||||
<ellipse cx="92" cy="126.171" rx="22" ry="21.8295" fill="white"/>
|
||||
<path d="M87.918 117.23C87.3136 116.577 86.3209 116.577 85.7172 117.232L78.8281 124.702C78.3281 125.244 78.3281 126.105 78.8281 126.647L85.7172 134.117C86.3215 134.772 87.3155 134.772 87.9197 134.117C88.5025 133.485 88.5025 132.48 87.92 131.848C87.9199 131.848 87.9198 131.848 87.9197 131.848L82.23 125.67L87.928 119.492C88.5024 118.869 88.5033 117.854 87.918 117.23Z" fill="#E31587" stroke="#E31587"/>
|
||||
<path d="M95.082 117.23C95.6864 116.577 96.6791 116.577 97.2828 117.232L104.172 124.702C104.672 125.244 104.672 126.105 104.172 126.647L97.2828 134.117C96.6785 134.772 95.6845 134.772 95.0803 134.117C94.4975 133.485 94.4975 132.48 95.08 131.848C95.0801 131.848 95.0802 131.848 95.0803 131.848L100.77 125.67L95.072 119.492C94.4976 118.869 94.4967 117.854 95.082 117.23Z" fill="#E31587" stroke="#E31587"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_5165_11537" x="0" y="37.5969" width="173" height="124.527" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_11537"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_11537" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_5165_11537" x="81" y="-13.0156" width="170" height="123.535" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-4"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_11537"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_11537" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_5165_11537" x="105" y="60.4496" width="127" height="99.7209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_11537"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_11537" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 10 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 6.5 KiB |
|
|
@ -0,0 +1,63 @@
|
|||
<svg width="249" height="182" viewBox="0 0 249 182" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_5165_12110)">
|
||||
<path d="M118.087 56.6795C117.943 56.6795 117.8 56.6869 117.657 56.6902C117.657 56.6866 117.657 56.6831 117.657 56.6795C117.657 44.154 107.358 34 94.6531 34C84.3361 34 75.6058 40.696 72.6884 49.9203C70.4862 48.7768 67.9795 48.1265 65.3175 48.1265C56.5671 48.1265 49.4735 55.12 49.4735 63.747C49.4735 65.1524 49.6648 66.5132 50.0179 67.8087C48.4285 67.1126 46.6732 66.7179 44.8219 66.7179C37.7405 66.7179 32 72.3775 32 79.359C32 86.3404 37.7405 92 44.8219 92H118.087C127.98 92 136 84.0932 136 74.3397C136 64.5862 127.98 56.6795 118.087 56.6795Z" fill="white"/>
|
||||
</g>
|
||||
<path d="M150.026 46H95.9744C92.1225 46 89 48.9139 89 52.5085V135.492C89 139.086 92.1225 142 95.9744 142H150.026C153.877 142 157 139.086 157 135.492V52.5085C157 48.9139 153.877 46 150.026 46Z" fill="#0090ED"/>
|
||||
<path d="M144.667 54H101.333C99.4924 54 98 55.477 98 57.299V130.701C98 132.523 99.4924 134 101.333 134H144.667C146.508 134 148 132.523 148 130.701V57.299C148 55.477 146.508 54 144.667 54Z" fill="white"/>
|
||||
<path d="M130.333 46H115.667C114.194 46 113 47.4748 113 49.2941V56.7059C113 58.5252 114.194 60 115.667 60H130.333C131.806 60 133 58.5252 133 56.7059V49.2941C133 47.4748 131.806 46 130.333 46Z" fill="#0090ED"/>
|
||||
<g class="animate-grow-and-stay" style="transform-origin: 8rem 6rem;">
|
||||
<path d="M120 75H65C56.7157 75 50 81.7157 50 90C50 98.2843 56.7157 105 65 105H120C128.284 105 135 98.2843 135 90C135 81.7157 128.284 75 120 75Z" fill="#1CC4A0" />
|
||||
<path d="M110.632 84.6318L98 97.2637L110.632 109.896L123.264 97.2637L110.632 84.6318Z" fill="#1CC4A0"/>
|
||||
|
||||
<path class="animate-fade-out-in opacity-20 animation-delay-1200" d="M73.3847 91.8036L74.0891 94.8554H71.095L71.7994 91.8036L69.4594 93.9301L68 91.3282L70.9943 90.4277L68 89.4773L69.535 86.9256L71.7994 89.0518L71.095 86H74.0891L73.3595 89.102L75.7247 86.9256L77.2092 89.5272L74.1144 90.4528L77.2092 91.3784L75.6744 93.9301L73.3847 91.8036Z" fill="white"/>
|
||||
<path class="animate-fade-out-in opacity-20 animation-delay-1000" d="M99.8027 91.8036L100.507 94.8554H97.513L98.2174 91.8036L95.8774 93.9301L94.418 91.3282L97.4122 90.4277L94.418 89.4773L95.9529 86.9256L98.2174 89.0518L97.513 86H100.507L99.7775 89.102L102.143 86.9256L103.627 89.5272L100.532 90.4528L103.627 91.3784L102.092 93.9301L99.8027 91.8036Z" fill="white"/>
|
||||
<path class="animate-fade-out-in opacity-20 animation-delay-1500" d="M86.5937 91.8036L87.2981 94.8554H84.304L85.0084 91.8036L82.6684 93.9301L81.209 91.3282L84.2032 90.4277L81.209 89.4773L82.744 86.9256L85.0084 89.0518L84.304 86H87.2981L86.5685 89.102L88.9337 86.9256L90.4182 89.5272L87.3233 90.4528L90.4182 91.3784L88.8834 93.9301L86.5937 91.8036Z" fill="white"/>
|
||||
<path class="animate-fade-out-in opacity-20 animation-delay-1200" d="M113.013 91.8036L113.717 94.8554H110.723L111.427 91.8036L109.087 93.9301L107.628 91.3282L110.622 90.4277L107.628 89.4773L109.163 86.9256L111.427 89.0518L110.723 86H113.717L112.987 89.102L115.353 86.9256L116.837 89.5272L113.742 90.4528L116.837 91.3784L115.302 93.9301L113.013 91.8036Z" fill="white"/>
|
||||
</g>
|
||||
|
||||
<g class="animate-pulse-twinkle-first" style="transform-origin: 10.5rem 4rem;">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M176.55 63.9444C176.553 63.8348 176.517 63.7278 176.448 63.6425C176.379 63.5572 176.282 63.4991 176.174 63.4785C175.256 63.3123 172.719 62.7128 171.853 61.86C170.987 61.0071 170.401 58.4704 170.24 57.5385C170.22 57.4308 170.163 57.3337 170.078 57.2647C169.993 57.1957 169.886 57.1595 169.777 57.1625V63.9444H176.55Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.807 57.1624C169.697 57.1628 169.59 57.2022 169.507 57.2735C169.423 57.3448 169.367 57.4435 169.349 57.552C169.194 58.4648 168.624 60.9606 167.766 61.8843C166.908 62.808 164.357 63.3448 163.379 63.5192C163.271 63.5402 163.174 63.5984 163.105 63.6835C163.036 63.7687 162.999 63.8754 163 63.9851H169.812L169.807 57.1624Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.771 63.9445V70.7264C169.881 70.7231 169.987 70.6829 170.071 70.6121C170.155 70.5414 170.212 70.4444 170.234 70.3368C170.401 69.4076 171 66.8327 171.853 65.9772C172.706 65.1216 175.245 64.5576 176.163 64.4023C176.271 64.3849 176.369 64.3299 176.44 64.247C176.511 64.1642 176.55 64.059 176.55 63.95L169.771 63.9445Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M163 63.9445C162.996 64.0555 163.034 64.1639 163.106 64.2483C163.178 64.3326 163.28 64.3866 163.39 64.3996C164.316 64.5576 166.899 65.1243 167.766 65.9826C168.632 66.8409 169.194 69.3886 169.349 70.3586C169.365 70.4691 169.419 70.5703 169.503 70.6438C169.587 70.7173 169.695 70.7582 169.807 70.7591V63.9472L163 63.9445Z" fill="#007BED"/>
|
||||
</g>
|
||||
<g class="animate-pulse-twinkle-second" style="transform-origin: 11.5rem 3.2rem;">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M198.918 53.8797C198.921 53.6909 198.858 53.507 198.74 53.3597C198.622 53.2124 198.456 53.1111 198.271 53.0732C196.685 52.7723 192.307 51.7552 190.811 50.2838C189.316 48.8124 188.305 44.4341 188.019 42.8243C187.984 42.6385 187.884 42.4713 187.736 42.3527C187.589 42.2341 187.404 42.1719 187.215 42.1773V53.8797H198.918Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M187.279 42.177C187.089 42.1769 186.906 42.2444 186.762 42.3674C186.618 42.4905 186.523 42.6609 186.493 42.848C186.222 44.4248 185.241 48.7308 183.758 50.3256C182.274 51.9204 177.887 52.8442 176.19 53.1301C176.003 53.1655 175.835 53.2659 175.715 53.4135C175.595 53.5611 175.531 53.7463 175.534 53.9365H187.269L187.279 42.177Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M187.215 53.8794V65.5817C187.404 65.5761 187.586 65.5067 187.731 65.3849C187.875 65.2631 187.975 65.096 188.013 64.9107C188.299 63.3069 189.334 58.8654 190.805 57.388C192.277 55.9105 196.658 54.9386 198.247 54.6798C198.432 54.6481 198.6 54.5523 198.721 54.4093C198.843 54.2663 198.91 54.0851 198.912 53.8975L187.215 53.8794Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M175.534 53.8794C175.529 54.071 175.595 54.2577 175.719 54.4033C175.844 54.549 176.018 54.6432 176.208 54.6678C177.803 54.9386 182.262 55.9135 183.758 57.397C185.253 58.8805 186.222 63.2738 186.493 64.9498C186.519 65.14 186.613 65.3143 186.757 65.4409C186.902 65.5675 187.087 65.6378 187.279 65.6389V53.8794H175.534Z" fill="#007BED"/>
|
||||
</g>
|
||||
|
||||
<g class="animate-pulse-twinkle-third" style="transform-origin: 11rem 2.5rem;">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M177.649 41.4659C177.65 41.3942 177.626 41.3243 177.581 41.2682C177.537 41.212 177.474 41.1731 177.404 41.158C176.796 41.049 175.126 40.6567 174.556 40.0926C173.987 39.5286 173.6 37.8611 173.488 37.2453C173.475 37.1753 173.437 37.1124 173.382 37.0675C173.326 37.0227 173.257 36.9988 173.186 37V41.4659H177.649Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.207 37.0026C173.135 37.0029 173.065 37.0287 173.01 37.0756C172.954 37.1224 172.917 37.1873 172.905 37.2588C172.804 37.8609 172.428 39.5039 171.864 40.1116C171.3 40.7192 169.619 41.0734 168.973 41.1851C168.902 41.1985 168.838 41.2364 168.793 41.2922C168.747 41.348 168.722 41.4181 168.723 41.4903H173.207V37.0026Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.186 41.4659V45.9345C173.258 45.9317 173.326 45.905 173.381 45.8586C173.436 45.8122 173.474 45.7487 173.488 45.6784C173.6 45.0653 173.992 43.3705 174.556 42.8011C175.12 42.2316 176.791 41.8665 177.396 41.7657C177.467 41.754 177.531 41.7174 177.577 41.6625C177.624 41.6076 177.649 41.5379 177.649 41.4659H173.186Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.723 41.4659C168.721 41.5395 168.746 41.6111 168.794 41.667C168.842 41.7228 168.909 41.759 168.981 41.7684C169.589 41.8692 171.292 42.2425 171.864 42.8092C172.436 43.376 172.804 45.0544 172.905 45.692C172.914 45.7665 172.949 45.8352 173.005 45.8854C173.061 45.9355 173.133 45.9637 173.208 45.9645V41.4659H168.723Z" fill="#007BED"/>
|
||||
</g>
|
||||
|
||||
<g filter="url(#filter1_d_5165_12110)">
|
||||
<path d="M139.191 120.333C139.321 120.333 139.45 120.34 139.579 120.343C139.579 120.34 139.579 120.337 139.579 120.333C139.579 109.104 148.888 100 160.371 100C169.696 100 177.587 106.003 180.224 114.273C182.214 113.248 184.48 112.665 186.886 112.665C194.795 112.665 201.207 118.935 201.207 126.67C201.207 127.93 201.034 129.15 200.715 130.311C202.151 129.687 203.738 129.333 205.411 129.333C211.811 129.333 217 134.407 217 140.667C217 146.926 211.811 152 205.411 152H139.191C130.249 152 123 144.911 123 136.167C123 127.422 130.249 120.333 139.191 120.333Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_5165_12110" x="0" y="0" width="168" height="122" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_12110"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_12110" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_5165_12110" x="91" y="66" width="158" height="116" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_12110"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_12110" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 9.9 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 5.4 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
<svg width="252" height="161" viewBox="0 0 252 161" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_5446_43042)" class="animate-subtle-move">
|
||||
<path d="M147.886 50.891C147.692 50.891 147.5 50.9011 147.307 50.9056C147.307 50.9007 147.308 50.8959 147.308 50.891C147.308 33.8304 133.443 20 116.341 20C102.452 20 90.7 29.1205 86.7729 41.6845C83.8083 40.1271 80.4339 39.2413 76.8505 39.2413C65.0711 39.2413 55.5221 48.7669 55.5221 60.5175C55.5221 62.4317 55.7796 64.2852 56.2548 66.0498C54.1152 65.1017 51.7524 64.5641 49.2603 64.5641C39.7277 64.5641 32 72.2729 32 81.782C32 91.2912 39.7277 99 49.2603 99H147.886C161.204 99 172 88.2305 172 74.9455C172 61.6604 161.204 50.891 147.886 50.891Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_5446_43042)" class="animate-subtle-move animation-delay-500">
|
||||
<path d="M143.018 98.7244C143.147 98.7244 143.275 98.7311 143.403 98.7341C143.403 98.7309 143.403 98.7276 143.403 98.7244C143.403 87.2786 152.613 78 163.974 78C173.199 78 181.006 84.1188 183.615 92.5479C185.584 91.503 187.826 90.9087 190.206 90.9087C198.031 90.9087 204.375 97.2993 204.375 105.183C204.375 106.467 204.204 107.71 203.888 108.894C205.309 108.258 206.879 107.897 208.534 107.897C214.867 107.897 220 113.069 220 119.449C220 125.828 214.867 131 208.534 131H143.018C134.172 131 127 123.775 127 114.862C127 105.949 134.172 98.7244 143.018 98.7244Z" fill="white"/>
|
||||
</g>
|
||||
<path d="M101.424 43.8599H150.832C154.672 43.8599 158 46.9319 158 51.0279V140.884C158 144.724 154.928 148.052 150.832 148.052H101.168C97.328 148.052 94 144.98 94 140.884V51.0279C94.256 47.1879 97.328 43.8599 101.424 43.8599Z" fill="#DABDFF"/>
|
||||
<path d="M104.64 51.0275H149.44C149.952 51.0275 150.72 51.2835 151.232 51.7955C151.744 52.3075 152 52.8195 152 53.5875V136.275C152 136.787 151.744 137.555 151.232 138.067C150.72 138.579 150.208 138.835 149.44 138.835H104.64C103.36 138.835 102.336 137.811 102.336 136.531V53.3315C102.336 52.8195 102.592 52.0515 103.104 51.5395C103.36 51.2835 103.872 51.0275 104.64 51.0275Z" fill="#0190ED"/>
|
||||
<path d="M122.064 144.467H128.72C129.488 144.467 130 143.955 130 143.187C130 142.419 129.488 141.907 128.72 141.907H122.064C121.296 141.907 120.784 142.419 120.784 143.187C120.784 143.955 121.296 144.467 122.064 144.467Z" fill="#0190ED"/>
|
||||
<path d="M127.248 134.168C125.269 134.168 123.664 132.563 123.664 130.584C123.664 128.605 125.269 127 127.248 127C129.227 127 130.832 128.605 130.832 130.584C130.832 132.563 129.227 134.168 127.248 134.168Z" fill="#DABDFF"/>
|
||||
<path d="M136.416 134.168C134.437 134.168 132.832 132.563 132.832 130.584C132.832 128.605 134.437 127 136.416 127C138.395 127 140 128.605 140 130.584C140 132.563 138.395 134.168 136.416 134.168Z" fill="#DABDFF"/>
|
||||
<path d="M118.08 134.168C116.101 134.168 114.496 132.563 114.496 130.584C114.496 128.605 116.101 127 118.08 127C120.059 127 121.664 128.605 121.664 130.584C121.664 132.563 120.059 134.168 118.08 134.168Z" fill="#DABDFF"/>
|
||||
|
||||
<path d="M113.601 97.1143L114.464 100.855H110.794L111.658 97.1143L108.789 99.7212L107 96.5316L110.671 95.4277L107 94.2627L108.882 91.1347L111.658 93.7411L110.794 90H114.464L113.57 93.8026L116.469 91.1347L118.289 94.3238L114.495 95.4585L118.289 96.5931L116.408 99.7212L113.601 97.1143Z" fill="white" class="animate-fade-out-in opacity-20 animation-delay-1200"/>
|
||||
<path d="M142.179 97.1143L143.042 100.855H139.372L140.236 97.1143L137.367 99.7212L135.578 96.5316L139.249 95.4277L135.578 94.2627L137.46 91.1347L140.236 93.7411L139.372 90H143.042L142.148 93.8026L145.047 91.1347L146.867 94.3238L143.073 95.4585L146.867 96.5931L144.986 99.7212L142.179 97.1143Z" fill="white" class="animate-fade-out-in opacity-20 animation-delay-1000"/>
|
||||
<path d="M127.89 97.1143L128.753 100.855H125.083L125.947 97.1143L123.078 99.7212L121.289 96.5316L124.96 95.4277L121.289 94.2627L123.171 91.1347L125.947 93.7411L125.083 90H128.753L127.859 93.8026L130.758 91.1347L132.578 94.3238L128.784 95.4585L132.578 96.5931L130.697 99.7212L127.89 97.1143Z" fill="white" class="animate-fade-out-in opacity-20 animation-delay-700"/>
|
||||
|
||||
<g filter="url(#filter2_d_5446_43042)">
|
||||
<circle cx="178.5" cy="64.5" r="30.5" fill="white"/>
|
||||
</g>
|
||||
<g class="animate-spin-xl" style="transform-origin: 11rem 4rem;">
|
||||
<path d="M192.998 59.6405C192.998 59.3856 192.897 59.1412 192.717 58.961C192.537 58.7808 192.292 58.6796 192.037 58.6796H165.144C164.889 58.6799 164.645 58.7813 164.465 58.9614C164.285 59.1416 164.184 59.3858 164.184 59.6405V61.5611H192.998V59.6405Z" fill="#FF4AA2"/>
|
||||
<path d="M164.184 79.9483C164.184 80.203 164.285 80.4472 164.465 80.6272C164.645 80.8073 164.889 80.9084 165.144 80.9084H192.037C192.163 80.9086 192.288 80.8839 192.405 80.8357C192.522 80.7875 192.628 80.7168 192.717 80.6276C192.806 80.5385 192.877 80.4326 192.925 80.316C192.974 80.1995 192.998 80.0745 192.998 79.9483V78.0269H164.184V79.9483Z" fill="#E31587"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.185 61.4843H193V69.4448H164.185V61.4843ZM164.185 69.4451H193V77.9332H164.185V69.4451Z" fill="#FF4AA2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M179.769 68.7833C180.697 68.3304 181.337 67.3773 181.337 66.2749C181.337 64.7344 180.088 63.4855 178.547 63.4855C177.007 63.4855 175.758 64.7344 175.758 66.2749C175.758 67.3773 176.397 68.3303 177.325 68.7833L175.817 71.9699C175.772 72.0696 175.752 72.1792 175.759 72.2886C175.767 72.3981 175.802 72.5039 175.861 72.5963C175.92 72.6888 176.001 72.765 176.097 72.818C176.193 72.871 176.301 72.8991 176.41 72.8997H180.688C180.797 72.8991 180.905 72.871 181.001 72.818C181.097 72.765 181.178 72.6888 181.237 72.5963C181.296 72.5039 181.331 72.3981 181.339 72.2886C181.347 72.1792 181.327 72.0696 181.281 71.9699L179.769 68.7833Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M172.628 54.4599C172.628 52.8676 173.26 51.3406 174.386 50.2147C175.512 49.0889 177.039 48.4564 178.631 48.4564C180.223 48.4564 181.75 49.0889 182.876 50.2147C184.002 51.3406 184.635 52.8676 184.635 54.4599V55.719H184.634V58.6H189.436V55.7195H189.437V54.4599C189.437 53.0409 189.157 51.6357 188.614 50.3248C188.071 49.0138 187.275 47.8226 186.272 46.8192C185.268 45.8158 184.077 45.0199 182.766 44.4768C181.455 43.9338 180.05 43.6543 178.631 43.6543C175.765 43.6543 173.017 44.7927 170.99 46.8192C168.964 48.8456 167.825 51.5941 167.825 54.4599V55.719V55.7195V58.6H172.628L172.628 55.7195L172.628 55.719L172.628 54.4599Z" fill="#FF4AA2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_5446_43042" x="0" y="-14" width="204" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5446_43042"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5446_43042" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_5446_43042" x="95" y="44" width="157" height="117" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5446_43042"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5446_43042" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_5446_43042" x="116" y="4" width="125" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5446_43042"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5446_43042" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 8.3 KiB |
|
|
@ -12,12 +12,14 @@ import {
|
|||
LightbulbImage,
|
||||
PasswordImage,
|
||||
MailImage,
|
||||
RecoveryCodesImage,
|
||||
BackupCodesImage,
|
||||
RecoveryKeyImage,
|
||||
TwoFactorAuthImage,
|
||||
CheckmarkCircleOutlineIcon,
|
||||
CheckmarkCircleFullIcon,
|
||||
PasswordSuccessImage,
|
||||
BackupRecoveryPhoneImage,
|
||||
BackupRecoveryPhoneCodeImage,
|
||||
} from '.';
|
||||
import { withLocalization } from 'fxa-react/lib/storybooks';
|
||||
|
||||
|
|
@ -30,12 +32,14 @@ export default {
|
|||
LightbulbImage,
|
||||
PasswordImage,
|
||||
MailImage,
|
||||
RecoveryCodesImage,
|
||||
BackupCodesImage,
|
||||
RecoveryKeyImage,
|
||||
TwoFactorAuthImage,
|
||||
CheckmarkCircleOutlineIcon,
|
||||
CheckmarkCircleFullIcon,
|
||||
PasswordSuccessImage,
|
||||
BackupRecoveryPhoneImage,
|
||||
BackupRecoveryPhoneCodeImage,
|
||||
},
|
||||
decorators: [withLocalization],
|
||||
} as Meta;
|
||||
|
|
@ -54,7 +58,7 @@ export const Password = () => <PasswordImage />;
|
|||
|
||||
export const Mail = () => <MailImage />;
|
||||
|
||||
export const RecoveryCodes = () => <RecoveryCodesImage />;
|
||||
export const BackupCodes = () => <BackupCodesImage />;
|
||||
|
||||
export const TwoFactorAuth = () => <TwoFactorAuthImage />;
|
||||
|
||||
|
|
@ -63,3 +67,7 @@ export const CircleCheckOutline = () => <CheckmarkCircleOutlineIcon />;
|
|||
export const CircleCheckFull = () => <CheckmarkCircleFullIcon />;
|
||||
|
||||
export const PasswordSuccess = () => <PasswordSuccessImage />;
|
||||
|
||||
export const BackupRecoveryPhone = () => <BackupRecoveryPhoneImage />;
|
||||
|
||||
export const BackupRecoveryPhoneCode = () => <BackupRecoveryPhoneCodeImage />;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import React from 'react';
|
||||
import { ReactComponent as HeartsBroken } from './graphic_hearts_broken.svg';
|
||||
import { ReactComponent as HeartsVerified } from './graphic_hearts_verified.svg';
|
||||
import { ReactComponent as RecoveryCodes } from './graphic_recovery_codes.svg';
|
||||
import { ReactComponent as BackupCodes } from './graphic_backup_codes.min.svg';
|
||||
import { ReactComponent as TwoFactorAuth } from './graphic_two_factor_auth.svg';
|
||||
import { ReactComponent as PushFactorAuth } from './graphic_push_factor_auth.svg';
|
||||
import { ReactComponent as Mail } from './graphic_mail.svg';
|
||||
|
|
@ -16,6 +16,8 @@ import { ReactComponent as EmailCode } from './graphic_email_code.svg';
|
|||
import { ReactComponent as CircleCheckOutline } from './icon_checkmark_circle_outline.svg';
|
||||
import { ReactComponent as CircleCheckFull } from './icon_checkmark_circle_full.svg';
|
||||
import { ReactComponent as PasswordSuccess } from './graphic_password_success.min.svg';
|
||||
import { ReactComponent as BackupRecoveryPhone } from './graphic_backup_recovery_phone.min.svg';
|
||||
import { ReactComponent as BackupRecoveryPhoneCode } from './graphic_phone_code.min.svg';
|
||||
|
||||
import { FtlMsg } from 'fxa-react/lib/utils';
|
||||
|
||||
|
|
@ -85,11 +87,35 @@ export const HeartsVerifiedImage = ({ className, ariaHidden }: ImageProps) => (
|
|||
/>
|
||||
);
|
||||
|
||||
export const RecoveryCodesImage = ({ className, ariaHidden }: ImageProps) => (
|
||||
export const BackupCodesImage = ({ className, ariaHidden }: ImageProps) => (
|
||||
<PreparedImage
|
||||
ariaLabel="Document that contains hidden text."
|
||||
ariaLabelFtlId="signin-recovery-code-image-description"
|
||||
Image={RecoveryCodes}
|
||||
Image={BackupCodes}
|
||||
{...{ className, ariaHidden }}
|
||||
/>
|
||||
);
|
||||
|
||||
export const BackupRecoveryPhoneImage = ({
|
||||
className,
|
||||
ariaHidden,
|
||||
}: ImageProps) => (
|
||||
<PreparedImage
|
||||
ariaLabel="Mobile device that receives a code by text message."
|
||||
ariaLabelFtlId="recovery-phone-image-description"
|
||||
Image={BackupRecoveryPhone}
|
||||
{...{ className, ariaHidden }}
|
||||
/>
|
||||
);
|
||||
|
||||
export const BackupRecoveryPhoneCodeImage = ({
|
||||
className,
|
||||
ariaHidden,
|
||||
}: ImageProps) => (
|
||||
<PreparedImage
|
||||
ariaLabel="Code received on a mobile device."
|
||||
ariaLabelFtlId="recovery-phone-code-image-description"
|
||||
Image={BackupRecoveryPhoneCode}
|
||||
{...{ className, ariaHidden }}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { RouteComponentProps } from '@reach/router';
|
|||
import { FtlMsg } from 'fxa-react/lib/utils';
|
||||
import { useFtlMsgResolver } from '../../models';
|
||||
import DataBlock from '../../components/DataBlock';
|
||||
import { RecoveryCodesImage } from '../../components/images';
|
||||
import { BackupCodesImage } from '../../components/images';
|
||||
import CardHeader from '../../components/CardHeader';
|
||||
import AppLayout from '../../components/AppLayout';
|
||||
import Banner, { BannerType } from '../../components/Banner';
|
||||
|
|
@ -143,7 +143,7 @@ const InlineRecoverySetup = ({
|
|||
{showBannerError()}
|
||||
<section>
|
||||
<div>
|
||||
<RecoveryCodesImage className="mx-auto" />
|
||||
<BackupCodesImage className="mx-auto" />
|
||||
<FtlMsg id="inline-recovery-confirmation-description">
|
||||
<p className="text-sm mb-6">
|
||||
To ensure that you will be able to regain access to your
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useState } from 'react';
|
|||
import { Link, RouteComponentProps, useLocation } from '@reach/router';
|
||||
import { FtlMsg } from 'fxa-react/lib/utils';
|
||||
import { isWebIntegration, useFtlMsgResolver } from '../../../models';
|
||||
import { RecoveryCodesImage } from '../../../components/images';
|
||||
import { BackupCodesImage } from '../../../components/images';
|
||||
import CardHeader from '../../../components/CardHeader';
|
||||
import LinkExternal from 'fxa-react/components/LinkExternal';
|
||||
import FormVerifyCode, {
|
||||
|
|
@ -167,7 +167,7 @@ const SigninRecoveryCode = ({
|
|||
<Banner type={BannerType.error}>{bannerErrorMessage}</Banner>
|
||||
)}
|
||||
<div className="flex justify-center mx-auto">
|
||||
<RecoveryCodesImage className="w-3/5" />
|
||||
<BackupCodesImage className="w-3/5" />
|
||||
</div>
|
||||
|
||||
<FtlMsg id="signin-recovery-code-instruction">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
const { resolve } = require('path');
|
||||
const extractImportedComponents = require('fxa-react/extract-imported-components');
|
||||
const config = require('fxa-react/configs/tailwind');
|
||||
const { transform } = require('typescript');
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
const matches = extractImportedComponents(
|
||||
|
|
@ -142,6 +141,47 @@ config.theme.extend = {
|
|||
transform: 'translateY(0) scale(1)',
|
||||
},
|
||||
},
|
||||
'spin-xl': {
|
||||
'0%': {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'rotate(720deg)',
|
||||
},
|
||||
},
|
||||
'fade-out-in': {
|
||||
'0%, 100%': {
|
||||
opacity: 1,
|
||||
},
|
||||
'50%': {
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
grow: {
|
||||
'0%': {
|
||||
transform: 'scale(.3)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
},
|
||||
},
|
||||
'subtle-move': {
|
||||
'0%': {
|
||||
transform: 'translate(0px, 0px)',
|
||||
},
|
||||
'25%': {
|
||||
transform: 'translate(2px, -1px)',
|
||||
},
|
||||
'50%': {
|
||||
transform: 'translate(-2px, 1px)',
|
||||
},
|
||||
'75%': {
|
||||
transform: 'translate(2px, 1px)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate(0px, 0px)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
animation: {
|
||||
|
|
@ -171,6 +211,16 @@ config.theme.extend = {
|
|||
'pulse-stroke': 'pulse-stroke 2s linear infinite',
|
||||
'wait-and-rotate': 'wait-and-rotate 5s infinite ease-out',
|
||||
'fade-in': 'fade-in 1s 1 ease-in',
|
||||
'spin-xl': 'spin-xl 1s forwards ease-in-out',
|
||||
'fade-out-in': 'fade-out-in 2s forwards',
|
||||
'grow-and-stay': 'grow 1s ease-in-out forwards',
|
||||
'pulse-twinkle-first':
|
||||
'sparkle 2s ease-in-out infinite, twinkle 2s infinite ease-in-out',
|
||||
'pulse-twinkle-second':
|
||||
'sparkle 1s ease-in-out infinite, twinkle 2.5s infinite ease-in-out',
|
||||
'pulse-twinkle-third':
|
||||
'sparkle 3s ease-in-out infinite, twinkle 3s infinite ease-in-out',
|
||||
'subtle-move': 'subtle-move ease-in-out infinite 5s',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче