refactoring for useStyles hook

src/pages/Welcome.js

@@ -9,7 +9,7 @@ import { DocumentStyle, WelcomePage } from '../styles/Style';
 
 const { pageTheme, galleryTheme, cardTheme } = WelcomePage;
 
-const { colorThemes, linkStyle } = DocumentStyle;
+const { colorThemes, linkStyle, buttonStyle } = DocumentStyle;
 const { themeA } = colorThemes;
 
 
@@ -25,9 +25,7 @@ export default function Welcome() {
             <h3 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h3>
             
             <div style={galleryTheme} className="gallery">
-                <Paper elevation={5} sx={[themeA, cardTheme]}>
-                    <Button href="/projects" sx={linkStyle}>What kinds of things do I do?</Button>
-                </Paper>
+                <Button variant="contained" href="/projects" sx={buttonStyle}>What kinds of things do I do?</Button>
 
                 <Paper elevation={5} sx={[themeA, cardTheme]}>
                     <Button href="/technologies" sx={linkStyle}>What do I use to do it?</Button>

src/styles/Style.js

@@ -1,4 +1,43 @@
-import { red, pink, deepPurple, purple } from '@mui/material/colors';
+import { red, green, pink, deepPurple, purple } from '@mui/material/colors';
+import { makeStyles } from '@mui/material';
+
+export const useStyles = makeStyles({
+    colorThemeA: {
+        backgroundColor: pink[50],
+        color: deepPurple[300]
+    },
+    html: {
+        backgroundColor: purple[200],
+    },
+    muiButton: {
+        backgroundColor: deepPurple[200],
+        color: deepPurple[500],
+        '&:hover': {
+            backgroundColor: green[400],
+        }
+    },
+    welcomePage: {
+        display: 'flex',
+        backgroundColor: purple[100],
+        height: '100vh',
+        flexDirection: 'column',
+        alignItems: 'center',
+        overflowX: 'hidden'
+    },
+    gallery: {
+        display: 'flex',
+        width: '90vw',
+        justifyContent: 'center',
+    },
+    card: {
+        width: '250px',
+        height: '250px',
+        margin: '2rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',  
+    }
+});
 
 export const DocumentStyle = {
     colorThemes: {
@@ -6,9 +45,6 @@ export const DocumentStyle = {
             backgroundColor: pink[50],
             color: deepPurple[300]
         },
-        themeB: {
-
-        }
     },
     htmlTheme: {
         backgroundColor: purple[200]
@@ -16,6 +52,13 @@ export const DocumentStyle = {
     linkStyle: {
         color: deepPurple[300],
         textDecoration: 'none'
+    },
+    buttonStyle: {
+        backgroundColor: deepPurple[200],
+        color: deepPurple[500],
+        '&:hover': {
+            backgroundColor: green[400],
+        }
     }
 }