diff --git a/src/js/components/Loader/index.js b/src/js/components/Loader/index.js index f8629f43..28eadbe5 100644 --- a/src/js/components/Loader/index.js +++ b/src/js/components/Loader/index.js @@ -2,6 +2,7 @@ import React from 'react'; import styled, { css, keyframes } from 'styled-components'; import PropTypes from 'prop-types'; import Paragraph from 'components/Paragraph'; +import { DASH, GREEN_COLOR } from 'config/animations'; import colors from 'config/colors'; const Wrapper = styled.div` @@ -21,36 +22,6 @@ const SvgWrapper = styled.svg` transform-origin: center center; `; -const animationDash = keyframes` - 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -124; - } -`; - -const animationColor = keyframes` - 100%, 0% { - stroke: ${colors.GREEN_PRIMARY}; - } - 40% { - stroke: ${colors.GREEN_PRIMARY}; - } - 66% { - stroke: ${colors.GREEN_SECONDARY}; - } - 80%, 90% { - stroke: ${colors.GREEN_TERTIARY}; - } -`; - const CircleWrapper = styled.circle` ${props => props.isRoute && css` stroke: ${colors.GRAY_LIGHT}; @@ -59,7 +30,7 @@ const CircleWrapper = styled.circle` ${props => props.isPath && css` stroke-dasharray: 1, 200; stroke-dashoffset: 0; - animation: ${animationDash} 1.5s ease-in-out infinite, ${animationColor} 6s ease-in-out infinite; + animation: ${DASH} 1.5s ease-in-out infinite, ${GREEN_COLOR} 6s ease-in-out infinite; stroke-linecap: round; `}; `; diff --git a/src/js/config/animations.js b/src/js/config/animations.js new file mode 100644 index 00000000..674d384f --- /dev/null +++ b/src/js/config/animations.js @@ -0,0 +1,42 @@ +import { keyframes } from 'styled-components'; +import colors from 'config/colors'; + +export const ROTATE_180_UP = keyframes` + from { transform: rotate(0deg) } + to { transform: rotate(180deg) } +`; + +export const ROTATE_180_DOWN = keyframes` + from { transform: rotate(180deg) } + to { transform: rotate(0deg) } +`; + +export const DASH = keyframes` + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124; + } +`; + +export const GREEN_COLOR = keyframes` + 100%, 0% { + stroke: ${colors.GREEN_PRIMARY}; + } + 40% { + stroke: ${colors.GREEN_PRIMARY}; + } + 66% { + stroke: ${colors.GREEN_SECONDARY}; + } + 80%, 90% { + stroke: ${colors.GREEN_TERTIARY}; + } +`; \ No newline at end of file diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 913ac992..48e1c071 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -150,53 +150,35 @@ export class DeviceDropdown extends Component { if (!a.instance || !b.instance) return -1; return a.instance > b.instance ? 1 : -1; }; - const deviceList = devices.sort(sortByInstance).map((dev, index) => { - if (dev === selected) return null; - - let deviceStatus: string = 'Connected'; - let css: string = 'device item'; - if (dev.type === 'unacquired' || (dev.features && dev.status === 'occupied')) { - deviceStatus = 'Used in other window'; - css += ' unacquired'; - } else if (dev.type === 'unreadable') { - deviceStatus = 'Connected'; - css += ' connected'; - } else if (!dev.connected) { - deviceStatus = 'Disconnected'; - css += ' disconnected'; - } else if (!dev.available) { - deviceStatus = 'Unavailable'; - css += ' unavailable'; - } - - if (dev.features && dev.features.major_version > 1) { - css += ' trezor-t'; - } - return ( - this.props.onSelectDevice(dev)} - onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)} - icon={( - { - event.stopPropagation(); - event.preventDefault(); - this.onDeviceMenuClick({ type: 'forget', label: '' }, dev); - }} - > - - - )} - label={dev.instanceLabel} - status={getStatus(dev)} - trezorModel={getVersion(dev)} - /> - ); - }); + const deviceList = devices.sort(sortByInstance) + .map((dev, index) => { + if (dev === selected) return null; + return ( + this.props.onSelectDevice(dev)} + onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)} + icon={( + { + event.stopPropagation(); + event.preventDefault(); + this.onDeviceMenuClick({ type: 'forget', label: '' }, dev); + }} + > + + + )} + label={dev.instanceLabel} + status={getStatus(dev)} + trezorModel={getVersion(dev)} + /> + ); + }); return (