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',