refactor: Update spinner design (#223)

src/stories/components/Spinner.stories.tsx

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Spinner from '@views/components/common/Spinner/Spinner';
+import Spinner from '@views/components/common/Spinner';
 
 const meta = {
     title: 'Components/Common/Spinner',
     component: Spinner,
     tags: ['autodocs'],
-    argTypes: {},
+    parameters: {
+        layout: 'centered',
+    },
 } satisfies Meta<typeof Spinner>;
 
 export default meta;

src/views/components/common/Spinner.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+
+/**
+ * A simple spinner component that can be used to indicate loading.
+ */
+export default function Spinner({ className, ...rest }: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <div
+            className={`will-change-transform animate-spin w-16 h-16 text-ut-orange ${className ?? ''}`}
+            style={{ animationDuration: '225ms' }}
+        >
+            <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...rest}>
+                <path
+                    fill='currentColor'
+                    d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+                />
+            </svg>
+        </div>
+    );
+}

src/views/components/common/Spinner/Spinner.module.scss

@@ -1,23 +0,0 @@
-@use 'src/views/styles/colors.module.scss';
-
-$spinner-border-width: 10px;
-
-.spinner {
-    border: 1px solid colors.$charcoal;
-    border-width: $spinner-border-width;
-    border-top: $spinner-border-width solid colors.$tangerine;
-    margin: 0 auto 15px auto;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}

src/views/components/common/Spinner/Spinner.tsx

@@ -1,17 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import styles from './Spinner.module.scss';
-
-type Props = {
-    testId?: string;
-    className?: string;
-    style?: React.CSSProperties;
-};
-
-/**
- * A simple spinner component that can be used to indicate loading.
- */
-export default function Spinner({ className, testId, style }: Props): JSX.Element {
-    return <div data-testid={testId} style={style} className={clsx(styles.spinner, className)} />;
-}

src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx

@@ -1,5 +1,5 @@
 import type { Course } from '@shared/types/Course';
-import Spinner from '@views/components/common/Spinner/Spinner';
+import Spinner from '@views/components/common/Spinner';
 import Text from '@views/components/common/Text/Text';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import { SiteSupport } from '@views/lib/getSiteSupport';

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -1,7 +1,7 @@
 import type { Course } from '@shared/types/Course';
 import type { Distribution, LetterGrade } from '@shared/types/Distribution';
 import { extendedColors } from '@shared/types/ThemeColors';
-import Spinner from '@views/components/common/Spinner/Spinner';
+import Spinner from '@views/components/common/Spinner';
 import Text from '@views/components/common/Text/Text';
 import {
     NoDataError,