From 4656823645f7aabedf6c6aba85874c70e1eda76a Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Thu, 2 Aug 2018 16:40:22 -0400
Subject: [PATCH] Clean up radar CSS
---
.../connection-modal/auto-scanning-step.jsx | 5 +++--
.../connection-modal/connection-modal.css | 21 ++++++++-----------
.../connection-modal/scanning-step.jsx | 3 ++-
3 files changed, 14 insertions(+), 15 deletions(-)
diff --git a/src/components/connection-modal/auto-scanning-step.jsx b/src/components/connection-modal/auto-scanning-step.jsx
index 6b283e0d6..208ea848f 100644
--- a/src/components/connection-modal/auto-scanning-step.jsx
+++ b/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
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index 7fec455ff..b1e99f37a 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/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;
}
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index 0b0b4999d..cadee33c3 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/src/components/connection-modal/scanning-step.jsx
@@ -1,6 +1,7 @@
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
--
GitLab