Separate animations

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;
     `};
 `;

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};
+    }
+`;

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -150,31 +150,13 @@ export class DeviceDropdown extends Component<Props> {
             if (!a.instance || !b.instance) return -1;
             return a.instance > b.instance ? 1 : -1;
         };
-        const deviceList = devices.sort(sortByInstance).map((dev, index) => {
+
+        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 (
                     <DeviceHeader
+                        key={`${dev.instanceLabel}`}
                         onClickWrapper={() => this.props.onSelectDevice(dev)}
                         onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
                         icon={(