From 4f0ae434110d65ba5b4e835a28bcd8290ca831e6 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Tue, 21 May 2024 23:07:41 -0500
Subject: [PATCH] refactor: Update spinner design (#223)

---
 ...Spinner.stories.ts => Spinner.stories.tsx} |  6 +++--
 src/views/components/common/Spinner.tsx       | 21 +++++++++++++++++
 .../common/Spinner/Spinner.module.scss        | 23 -------------------
 .../components/common/Spinner/Spinner.tsx     | 17 --------------
 .../Description.tsx                           |  2 +-
 .../GradeDistribution.tsx                     |  2 +-
 6 files changed, 27 insertions(+), 44 deletions(-)
 rename src/stories/components/{Spinner.stories.ts => Spinner.stories.tsx} (72%)
 create mode 100644 src/views/components/common/Spinner.tsx
 delete mode 100644 src/views/components/common/Spinner/Spinner.module.scss
 delete mode 100644 src/views/components/common/Spinner/Spinner.tsx

diff --git a/src/stories/components/Spinner.stories.ts b/src/stories/components/Spinner.stories.tsx
similarity index 72%
rename from src/stories/components/Spinner.stories.ts
rename to src/stories/components/Spinner.stories.tsx
index 2ce320ec1..56bb050ab 100644
--- a/src/stories/components/Spinner.stories.ts
+++ b/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;
diff --git a/src/views/components/common/Spinner.tsx b/src/views/components/common/Spinner.tsx
new file mode 100644
index 000000000..6a4b8caa4
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/views/components/common/Spinner/Spinner.module.scss b/src/views/components/common/Spinner/Spinner.module.scss
deleted file mode 100644
index ca7e87118..000000000
--- a/src/views/components/common/Spinner/Spinner.module.scss
+++ /dev/null
@@ -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);
-    }
-}
diff --git a/src/views/components/common/Spinner/Spinner.tsx b/src/views/components/common/Spinner/Spinner.tsx
deleted file mode 100644
index 9421bfd8b..000000000
--- a/src/views/components/common/Spinner/Spinner.tsx
+++ /dev/null
@@ -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)} />;
-}
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
index f00688af2..a385230d7 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
+++ b/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';
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
index bc18d6007..b1cb8d4bb 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
+++ b/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,