From b112f8421012c7eb19e908d7240001a0ca14b149 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 5 Jan 2022 19:03:30 -0500
Subject: [PATCH] refactor(striker-ui): migrate MUI v4->5 on Spinner

---
 striker-ui/components/Spinner.tsx | 35 ++++++++++++++++---------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/striker-ui/components/Spinner.tsx b/striker-ui/components/Spinner.tsx
index 3e09eb8e..f543914d 100644
--- a/striker-ui/components/Spinner.tsx
+++ b/striker-ui/components/Spinner.tsx
@@ -1,28 +1,29 @@
-import { makeStyles } from '@material-ui/core/styles';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { styled } from '@mui/material/styles';
+import { CircularProgress } from '@mui/material';
 import { TEXT } from '../lib/consts/DEFAULT_THEME';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: '3em',
-  },
-  spinner: {
+const PREFIX = 'Spinner';
+
+const classes = {
+  spinner: `${PREFIX}-spinner`,
+};
+
+const StyledDiv = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginTop: '3em',
+
+  [`& .${classes.spinner}`]: {
     color: TEXT,
-    variant: 'indeterminate',
-    size: '50em',
   },
 }));
 
 const Spinner = (): JSX.Element => {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <CircularProgress className={classes.spinner} />
-    </div>
+    <StyledDiv>
+      <CircularProgress variant="indeterminate" className={classes.spinner} />
+    </StyledDiv>
   );
 };