added card

src/themes/Theme.js

@@ -33,6 +33,8 @@ export const TumbleWeed = '#CEA07E';
 export const TwilightLavander = '#754668';
 export const UARed = '#E01A4F';
 export const White = '#ffffff';
+export const VioletColorWheel = '#7E0FFF';
+export const SeaGreenCrayola = '#0FFFC1';
 
 // Main layout
 export const MainTheme = (mode) => ({
@@ -55,7 +57,10 @@ export const MainTheme = (mode) => ({
 			  }
 			: {
 					// palette values for dark mode
-					primary: { main: GrannySmithApple },
+					primary: {
+						main: GrannySmithApple,
+						contrastText: White,
+					},
 					secondary: {
 						main: UARed,
 						contrastText: White,
@@ -75,7 +80,9 @@ export const MainTheme = (mode) => ({
 		contrastThreshold: 3,
 		tonalOffset: 0.2,
 	},
-	overrides,
+	components: {
+		...overrides,
+	},
 });
 
 // Landing page
@@ -89,6 +96,8 @@ export const LandingWhite = (theme) =>
 			palette: {
 				mode: theme.palette.mode,
 			},
-			overrides,
+			components: {
+				...overrides,
+			},
 		})
 	);

src/themes/overrides/MuiButtonBase.js

@@ -0,0 +1,8 @@
+const MuiButtonBase = {
+	defaultProps: {
+		// The props to change the default for.
+		disableRipple: true, // No more ripple, on the whole application 💣!
+	},
+};
+
+export default MuiButtonBase;

src/themes/overrides/MuiCard.js

@@ -0,0 +1,15 @@
+const MuiCard = {
+	styleOverrides: {
+		root: {
+			// maxWidth: '420px',
+			// marginLeft: 'auto',
+			// marginRight: 'auto',
+			// '&:hover': {
+			// 	transition: 'all .7s ease',
+			// 	boxShadow: '1px 1px 20px 10px rgba(15,255,193,0.75)',
+			// },
+		},
+	},
+};
+
+export default MuiCard;

src/themes/overrides/MuiCardActionArea.js

@@ -0,0 +1,14 @@
+const MuiCardActionArea = {
+	styleOverrides: {
+		root: {
+			filter: 'grayscale(1);',
+			'&:hover': {
+				filter: 'grayscale(0);',
+				transition: 'all .3s ease',
+			
+			},
+		},
+	},
+};
+
+export default MuiCardActionArea;

src/themes/overrides/index.js

@@ -1,3 +1,6 @@
+import MuiCard from './MuiCard';
+import MuiCardActionArea from './MuiCardActionArea';
+import MuiButtonBase from './MuiButtonBase';
 // import MuiAlert from './MuiAlert';
 // import MuiInputBase from './MuiInputBase';
 // import MuiMenuItem from './MuiMenuItem';
@@ -5,11 +8,15 @@
 // import MuiSelect from './MuiSelect';
 // import MuiSwitch from './MuiSwitch';
 
-// export default {
-//   MuiAlert,
-//   MuiInputBase,
-//   MuiMenuItem,
-//   MuiOutlinedInput,
-//   MuiSelect,
-//   MuiSwitch,
-// };
+/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
+export default {
+	MuiCard,
+	MuiCardActionArea,
+	MuiButtonBase,
+	// MuiAlert,
+	// MuiInputBase,
+	// MuiMenuItem,
+	// MuiOutlinedInput,
+	// MuiSelect,
+	// MuiSwitch,
+};