From 94af512180c4969cf50dcf0affd8d87a6b9a9f20 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 21 Jun 2018 15:05:42 +0200
Subject: [PATCH 1/2] Update our current Spinner to use live logo

---
 src/components/TopBar/ActivityIndicator.js | 6 +++---
 src/components/base/Spinner.js             | 4 ++--
 src/icons/Loader.js                        | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/TopBar/ActivityIndicator.js b/src/components/TopBar/ActivityIndicator.js
index 64de8714..5e1bed58 100644
--- a/src/components/TopBar/ActivityIndicator.js
+++ b/src/components/TopBar/ActivityIndicator.js
@@ -17,7 +17,7 @@ import { Rotating } from 'components/base/Spinner'
 import Tooltip from 'components/base/Tooltip'
 import TranslatedError from 'components/TranslatedError'
 import Box from 'components/base/Box'
-import IconRefresh from 'icons/Refresh'
+import IconLoader from 'icons/Loader'
 import IconExclamationCircle from 'icons/ExclamationCircle'
 import IconCheckCircle from 'icons/CheckCircle'
 import ItemContainer from './ItemContainer'
@@ -93,13 +93,13 @@ class ActivityIndicatorInner extends PureComponent<Props, State> {
           {isError ? (
             <IconExclamationCircle size={16} />
           ) : isRotating ? (
-            <IconRefresh size={16} />
+            <IconLoader size={16} />
           ) : (
             <IconCheckCircle size={16} />
           )}
         </Rotating>
         <Box
-          ml={1}
+          ml={isRotating ? 2 : 1}
           ff="Open Sans|SemiBold"
           color={isError ? 'alertRed' : undefined}
           fontSize={4}
diff --git a/src/components/base/Spinner.js b/src/components/base/Spinner.js
index d878f542..1b705724 100644
--- a/src/components/base/Spinner.js
+++ b/src/components/base/Spinner.js
@@ -11,14 +11,14 @@ const rotate = keyframes`
     transform: rotate(0deg);
   }
   100% {
-    transform: rotate(360deg);
+    transform: rotate(-360deg);
   }
 `
 
 export const Rotating = styled(Box)`
   width: ${p => p.size}px;
   height: ${p => p.size}px;
-  animation: ${p => (p.isRotating === false ? 'none' : `${rotate} 1.5s linear infinite`)};
+  animation: ${p => (p.isRotating === false ? 'none' : `${rotate} 1s linear infinite`)};
   transition: 100ms linear transform;
 `
 
diff --git a/src/icons/Loader.js b/src/icons/Loader.js
index 5c205762..921f15c1 100644
--- a/src/icons/Loader.js
+++ b/src/icons/Loader.js
@@ -5,12 +5,12 @@ import React from 'react'
 const path = (
   <path
     fill="currentColor"
-    d="M16.735 2.8c0-.69864021.5663598-1.265 1.265-1.265.6986402 0 1.265.56635979 1.265 1.265v6.4c0 .69864021-.5663598 1.265-1.265 1.265-.6986402 0-1.265-.56635979-1.265-1.265V2.8zm11.118533 3.55748685c.4940132-.49401323 1.2949669-.49401323 1.7889802 0 .4940132.49401323.4940132 1.29496693 0 1.78898016l-4.5254834 4.52548339c-.4940133.4940132-1.294967.4940132-1.7889802 0-.4940132-.4940132-.4940132-1.2949669 0-1.7889802l4.5254834-4.52548335zM33.2 16.735c.6986402 0 1.265.5663598 1.265 1.265 0 .6986402-.5663598 1.265-1.265 1.265h-6.4c-.6986402 0-1.265-.5663598-1.265-1.265 0-.6986402.5663598-1.265 1.265-1.265h6.4zm-3.5574868 11.118533c.4940132.4940132.4940132 1.2949669 0 1.7889802-.4940133.4940132-1.294967.4940132-1.7889802 0l-4.5254834-4.5254834c-.4940132-.4940133-.4940132-1.294967 0-1.7889802.4940132-.4940132 1.2949669-.4940132 1.7889802 0l4.5254834 4.5254834zM19.265 33.2c0 .6986402-.5663598 1.265-1.265 1.265-.6986402 0-1.265-.5663598-1.265-1.265v-6.4c0-.6986402.5663598-1.265 1.265-1.265.6986402 0 1.265.5663598 1.265 1.265v6.4zM8.14646701 29.6425132c-.49401323.4940132-1.29496693.4940132-1.78898016 0-.49401323-.4940133-.49401323-1.294967 0-1.7889802l4.52548335-4.5254834c.4940133-.4940132 1.294967-.4940132 1.7889802 0 .4940132.4940132.4940132 1.2949669 0 1.7889802l-4.52548339 4.5254834zM2.8 19.265c-.69864021 0-1.265-.5663598-1.265-1.265 0-.6986402.56635979-1.265 1.265-1.265h6.4c.69864021 0 1.265.5663598 1.265 1.265 0 .6986402-.56635979 1.265-1.265 1.265H2.8zM6.35748685 8.14646701c-.49401323-.49401323-.49401323-1.29496693 0-1.78898016.49401323-.49401323 1.29496693-.49401323 1.78898016 0l4.52548339 4.52548335c.4940132.4940133.4940132 1.294967 0 1.7889802-.4940132.4940132-1.2949669.4940132-1.7889802 0L6.35748685 8.14646701z"
+    d="M6.21808178,10.568167 C6.29564085,10.646177 6.29564085,10.7721786 6.21808178,10.8501886 L3.41980765,13.6647327 C3.11714476,13.9691553 2.62761129,13.9691553 2.3088625,13.648082 C-0.781445169,10.5004576 -0.766649034,5.44541442 2.33562933,2.32509858 C3.62511827,1.02811219 5.29557344,0.224617325 7.0902708,0.0248347769 C7.11281081,0.0223256621 7.14363339,0.0194413329 7.18273852,0.0161817893 C7.18838484,0.0157111502 7.19404861,0.0154808067 7.19971449,0.0154913829 C7.31010352,0.0156974391 7.39942447,0.105352473 7.39921842,0.215741505 L7.39934104,0.215741734 C7.39933225,0.220451344 7.39932355,0.225162829 7.39931495,0.22987619 L7.39917604,0.297792241 L7.39689423,1.39301009 C7.39668097,1.49537103 7.3192192,1.58105138 7.21739792,1.5915507 L7.21739667,1.5915385 C7.08762335,1.6049201 6.99288857,1.61650089 6.9331923,1.62628085 C5.6096232,1.84311957 4.38939863,2.46988645 3.43048859,3.43437186 C1.32425889,5.55284776 0.954959082,8.8321462 2.48386083,11.3559771 L2.87521099,12.0019974 L5.11758667,9.74658395 C5.11785916,9.74630987 5.11813246,9.74603658 5.11840654,9.74576408 C5.19673747,9.66788595 5.32336994,9.66825302 5.40124806,9.74658395 L6.21808178,10.568167 Z M10.8824133,6.25341605 C10.8821408,6.25369013 10.8818675,6.25396342 10.8815935,6.25423592 C10.8032625,6.33211405 10.6766301,6.33174698 10.5987519,6.25341605 L9.78191822,5.43183304 C9.70435915,5.35382302 9.70435915,5.2278214 9.78191822,5.14981139 L12.5801923,2.33526733 C12.8828552,2.03084467 13.3723887,2.03084467 13.6911375,2.35191801 C16.7814452,5.49954242 16.766649,10.5545856 13.6643707,13.6749014 C12.3748817,14.9718878 10.7044266,15.7753827 8.9097292,15.9751652 C8.88719047,15.9776742 8.85637012,15.9805583 8.81726815,15.9838177 C8.81159834,15.9842903 8.80591096,15.9845209 8.8002215,15.984509 C8.68966856,15.9842776 8.60023526,15.8944692 8.60046664,15.7839163 L8.60310406,14.606988 C8.60331829,14.5046269 8.68078047,14.4189469 8.7826019,14.4084476 L8.78260333,14.4084615 C8.91237665,14.3950799 9.00711143,14.3834991 9.0668077,14.3737191 C10.3903768,14.1568804 11.6106014,13.5301135 12.5695114,12.5656281 C14.6757411,10.4471522 15.0450409,7.1678538 13.5161392,4.64402293 L13.124789,3.99800259 L10.8824133,6.25341605 Z"
   />
 )
 
 export default ({ size, ...p }: { size: number }) => (
-  <svg viewBox="0 0 36 36" height={size} width={size} {...p}>
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
     {path}
   </svg>
 )

From d5c98e4d9f2044a960aa6756930800b1b77cb3d6 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 21 Jun 2018 15:53:02 +0200
Subject: [PATCH 2/2] Update spinner color

---
 src/components/DeviceConnect/index.js      | 2 +-
 src/components/TopBar/ActivityIndicator.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DeviceConnect/index.js b/src/components/DeviceConnect/index.js
index 4d784b20..bb94ea8d 100644
--- a/src/components/DeviceConnect/index.js
+++ b/src/components/DeviceConnect/index.js
@@ -131,7 +131,7 @@ const StepCheck = ({ checked, hasErrors }: { checked: boolean, hasErrors?: boole
         <IconExclamationCircle size={16} />
       </Box>
     ) : (
-      <Spinner size={16} />
+      <Spinner color="grey" size={16} />
     )}
   </Box>
 )
diff --git a/src/components/TopBar/ActivityIndicator.js b/src/components/TopBar/ActivityIndicator.js
index 5e1bed58..ee37de73 100644
--- a/src/components/TopBar/ActivityIndicator.js
+++ b/src/components/TopBar/ActivityIndicator.js
@@ -88,7 +88,7 @@ class ActivityIndicatorInner extends PureComponent<Props, State> {
         <Rotating
           size={16}
           isRotating={isRotating}
-          color={isError ? 'alertRed' : isRotating ? undefined : 'positiveGreen'}
+          color={isError ? 'alertRed' : isRotating ? 'grey' : 'positiveGreen'}
         >
           {isError ? (
             <IconExclamationCircle size={16} />