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], + } } }