diff --git a/src/pages/Welcome.js b/src/pages/Welcome.js
index 57ea0cb..42474d3 100644
--- a/src/pages/Welcome.js
+++ b/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() {
Thanks for visiting! Feel free to peruse below:
-
-
-
+
diff --git a/src/styles/Style.js b/src/styles/Style.js
index 68f999b..d58b27a 100644
--- a/src/styles/Style.js
+++ b/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],
+ }
}
}