diff --git a/src/components/ActionButton.jsx b/src/components/ActionButton.jsx index ab39e63..c624d89 100644 --- a/src/components/ActionButton.jsx +++ b/src/components/ActionButton.jsx @@ -3,6 +3,7 @@ import Button from '@mui/material/Button' // ActionButton receives `link` and `text` as props. // `text` receives the text you want to place inside of the button. // `link` determines the href that the user is directed to after clicking the button. +// 'accent1' is a custom variable declared in theme.ts through a custom value and module delcaration. const ActionButton = ({ link, text }) => { return (
@@ -11,12 +12,12 @@ const ActionButton = ({ link, text }) => { variant="contained" sx={(theme) => ({ margin: '1rem', - color: theme.palette.text.primary, - bgcolor: theme.palette.primary.main, + bgcolor: 'accents.accent1', + color: 'accents.contrastText', width: '12rem', borderRadius: 40, ':hover': { - color: theme.palette.text.primary, + bgcolor: 'accents.accent1', }, })} size="small" @@ -26,5 +27,4 @@ const ActionButton = ({ link, text }) => {
) } - export default ActionButton diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 166f2d6..5e2ea52 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,6 +1,16 @@ import { red } from '@mui/material/colors' import { createTheme } from '@mui/material/styles' +//Augmentation allows for custom color additions to theme (TypeScript specific) +declare module '@mui/material/styles' { + interface Palette { + accent1: Palette['primary'] + } + interface PaletteOptions { + accent1: PaletteOptions['primary'] + } +} + // Create a theme instance. const theme = createTheme({ palette: { @@ -13,6 +23,9 @@ const theme = createTheme({ error: { main: red.A400, }, + accent1: { + main: '#007bff', + }, }, typography: { fontFamily: 'Montserrat',