From 62ae30182b92c6c11c7d64a10e6d7b9490dcd9df Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Thu, 27 Aug 2020 18:27:39 -0400
Subject: [PATCH 1/3] Add Spinner story

---
 .../ui/{Spinner.scss => Spinner.module.scss}  |  0
 frontend/src/component/ui/Spinner.tsx         | 20 +++++++++----------
 story/src/2-Spinner.stories.tsx               | 11 ++++++++++
 3 files changed, 21 insertions(+), 10 deletions(-)
 rename frontend/src/component/ui/{Spinner.scss => Spinner.module.scss} (100%)
 create mode 100644 story/src/2-Spinner.stories.tsx

diff --git a/frontend/src/component/ui/Spinner.scss b/frontend/src/component/ui/Spinner.module.scss
similarity index 100%
rename from frontend/src/component/ui/Spinner.scss
rename to frontend/src/component/ui/Spinner.module.scss
diff --git a/frontend/src/component/ui/Spinner.tsx b/frontend/src/component/ui/Spinner.tsx
index 0f0372129..e235cb2b6 100644
--- a/frontend/src/component/ui/Spinner.tsx
+++ b/frontend/src/component/ui/Spinner.tsx
@@ -1,19 +1,19 @@
 import React, { Component } from 'react';
 
-import './Spinner.scss';
+import styles from './Spinner.module.scss';
 
 export class Spinner extends Component {
   render() {
     return (
-      <div className={'spinner'}>
-        <div className={'solar-system'}>
-          <div className={'earth-orbit orbit'}>
-            <div className={'planet earth'} />
-            <div className={'venus-orbit orbit'}>
-              <div className={'planet venus'} />
-              <div className={'mercury-orbit orbit'}>
-                <div className={'planet mercury'} />
-                <div className={'sun'} />
+      <div className={styles['spinner']}>
+        <div className={styles['solar-system']}>
+          <div className={`${styles['earth-orbit']} ${styles['orbit']}`}>
+            <div className={`${styles['planet']} ${styles['earth']}`} />
+            <div className={`${styles['venus-orbit']} ${styles['orbit']}`}>
+              <div className={`${styles['planet']} ${styles['venus']}`} />
+              <div className={`${styles['mercury-orbit']} ${styles['orbit']}`}>
+                <div className={`${styles['planet']} ${styles['mercury']}`} />
+                <div className={styles['sun']} />
               </div>
             </div>
           </div>
diff --git a/story/src/2-Spinner.stories.tsx b/story/src/2-Spinner.stories.tsx
new file mode 100644
index 000000000..90a5c991d
--- /dev/null
+++ b/story/src/2-Spinner.stories.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Spinner } from '../../frontend/src/component/ui/Spinner';
+
+export default {
+  title: 'UI/Spinner',
+  component: Spinner
+};
+
+export const spinner = () => {
+  return <Spinner />;
+};

From 1a083158701c2e3f8f524a5b2f7edbbe4d1a674c Mon Sep 17 00:00:00 2001
From: James Cote <3276350+Coteh@users.noreply.github.com>
Date: Fri, 28 Aug 2020 12:53:35 -0400
Subject: [PATCH 2/3] Apply suggestions from code review

Co-authored-by: Harry Liu <byliuyang11@gmail.com>
---
 frontend/src/component/ui/Spinner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/ui/Spinner.tsx b/frontend/src/component/ui/Spinner.tsx
index e235cb2b6..0212381f7 100644
--- a/frontend/src/component/ui/Spinner.tsx
+++ b/frontend/src/component/ui/Spinner.tsx
@@ -5,7 +5,7 @@ import styles from './Spinner.module.scss';
 export class Spinner extends Component {
   render() {
     return (
-      <div className={styles['spinner']}>
+      <div className={styles.spinner}>
         <div className={styles['solar-system']}>
           <div className={`${styles['earth-orbit']} ${styles['orbit']}`}>
             <div className={`${styles['planet']} ${styles['earth']}`} />

From e4122f0fb4b94afcbf3c1712897705e05634313d Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Fri, 4 Sep 2020 01:11:41 -0400
Subject: [PATCH 3/3] Wrap Spinner component in story & rename

---
 .../{2-Spinner.stories.tsx => 4-Spinner.stories.tsx}   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)
 rename story/src/{2-Spinner.stories.tsx => 4-Spinner.stories.tsx} (62%)

diff --git a/story/src/2-Spinner.stories.tsx b/story/src/4-Spinner.stories.tsx
similarity index 62%
rename from story/src/2-Spinner.stories.tsx
rename to story/src/4-Spinner.stories.tsx
index 90a5c991d..ef97ec7fd 100644
--- a/story/src/2-Spinner.stories.tsx
+++ b/story/src/4-Spinner.stories.tsx
@@ -7,5 +7,13 @@ export default {
 };
 
 export const spinner = () => {
-  return <Spinner />;
+  return (
+    <div
+      style={{
+        backgroundColor: '#000'
+      }}
+    >
+      <Spinner />
+    </div>
+  );
 };