refactor: delete CircularProgress (commaai#519)

Author: greatgitsby

src/components/material/Button.tsx

@@ -3,7 +3,7 @@ import { Show, splitProps } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase, { ButtonBaseProps } from './ButtonBase'
-import CircularProgress from './CircularProgress'
+import Icon from './Icon'
 
 type ButtonProps = ButtonBaseProps & {
   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
@@ -42,7 +42,7 @@ const Button: ParentComponent<ButtonProps> = (props) => {
       {props.leading}
       <span class={clsx('text-label-lg', props.loading && 'invisible')}>{props.children}</span>
       <Show when={props.loading}>
-        <CircularProgress class="absolute left-1/2 top-1/2 ml-[-10px] mt-[-10px]" color="inherit" size={20} />
+        <Icon name="autorenew" class="absolute left-1/2 top-1/2 ml-[-10px] mt-[-10px] animate-spin" size="20" />
       </Show>
       {props.trailing}
     </ButtonBase>

src/components/material/CircularProgress.tsx

@@ -5,7 +5,7 @@ import QrScanner from 'qr-scanner'
 
 import { pairDevice } from '~/api/devices'
 import Button from '~/components/material/Button'
-import CircularProgress from '~/components/material/CircularProgress'
+import Icon from '~/components/material/Icon'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 
@@ -96,8 +96,8 @@ const PairActivity: VoidComponent<{ onPaired: () => void }> = (props) => {
             <TopAppBar>Add new device</TopAppBar>
 
             <div class="flex flex-col items-center gap-4">
-              <CircularProgress class="m-4" color="primary" size={64} />
-              Pairing your device...
+              <Icon name="autorenew" class="animate-spin" size="40" />
+              <span class="text-title-md">Pairing your device...</span>
             </div>
           </>
         )

src/pages/dashboard/activities/PairActivity.tsx

@@ -16,7 +16,6 @@ import { formatDate } from '~/utils/format'
 
 import ButtonBase from '~/components/material/ButtonBase'
 import Button from '~/components/material/Button'
-import CircularProgress from '~/components/material/CircularProgress'
 import Icon from '~/components/material/Icon'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
@@ -281,8 +280,8 @@ const PrimeManage: VoidComponent<{ dongleId: string }> = (props) => {
       <Suspense
         fallback={
           <div class="my-2 flex flex-col items-center gap-4">
-            <CircularProgress />
-            Fetching subscription status...
+            <Icon name="autorenew" class="animate-spin" size="40" />
+            <span class="text-title-md">Fetching subscription status...</span>
           </div>
         }
       >

src/pages/dashboard/activities/SettingsActivity.tsx

@@ -226,28 +226,6 @@ export default {
             right: '-8%',
           },
         },
-        'circular-rotate': {
-          '0%': {
-            transform: 'rotate(0deg)',
-          },
-          '100%': {
-            transform: 'rotate(360deg)',
-          },
-        },
-        'circular-dash': {
-          '0%': {
-            strokeDasharray: '1px, 200px',
-            strokeDashoffset: '0',
-          },
-          '50%': {
-            strokeDasharray: '100px, 200px',
-            strokeDashoffset: '-15',
-          },
-          '100%': {
-            strokeDasharray: '100px, 200px',
-            strokeDashoffset: '-125',
-          },
-        },
       },
       screens: {
         // Larger screen phones (iPhone Pro/Max, Galaxy Ultra, Pixel XL/Pro...)
@@ -256,8 +234,6 @@ export default {
       animation: {
         indeterminate1: 'indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
         indeterminate2: 'indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite',
-        'circular-rotate': 'circular-rotate 1.4s linear infinite',
-        'circular-dash': 'circular-dash 1.4s ease-in-out infinite',
       },
       transitionProperty: {
         indeterminate: 'transform, background-color',