Fix ActionButton colors via theme (orcasound#68)

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 (
     <div>
@@ -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 }) => {
     </div>
   )
 }
-
 export default ActionButton

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