Clean up radar CSS

src/components/connection-modal/auto-scanning-step.jsx

@@ -2,6 +2,7 @@ import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
 import keyMirror from 'keymirror';
+import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
 import Dots from './dots.jsx';
@@ -28,7 +29,7 @@ const AutoScanningStep = props => (
                     {props.phase === PHASES.prescan && (
                         <React.Fragment>
                             <img
-                                className={styles.radarStatic}
+                                className={styles.radarBig}
                                 src={radarIcon}
                             />
                             <img
@@ -40,7 +41,7 @@ const AutoScanningStep = props => (
                     {props.phase === PHASES.pressbutton && (
                         <React.Fragment>
                             <img
-                                className={styles.radarBig}
+                                className={classNames(styles.radarBig, styles.radarSpin)}
                                 src={radarIcon}
                             />
                             <img

src/components/connection-modal/connection-modal.css

@@ -107,30 +107,27 @@
     background-color: $pen-primary;
 }
 
-.radar {
+.radar-small {
     width: 40px;
     height: 40px;
     margin-right: 0.5rem;
-    animation: spin 4s linear infinite;
 }
 
-@keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.radar-static {
+.radar-big {
     width: 120px;
     height: 120px;
 }
 
-.radar-big {
-    width: 120px;
-    height: 120px;
+.radar-spin {
     animation: spin 4s linear infinite;
 }
 
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .device-activity {
     position: relative;
 }

src/components/connection-modal/scanning-step.jsx

 import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
 import DeviceTile from './device-tile.jsx';
@@ -19,7 +20,7 @@ const ScanningStep = props => (
                     <div className={styles.activityAreaInfo}>
                         <div className={styles.centeredRow}>
                             <img
-                                className={styles.radar}
+                                className={classNames(styles.radarSmall, styles.radarSpin)}
                                 src={radarIcon}
                             />
                             <FormattedMessage