Update our current Spinner to use live logo

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}

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

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>
 )