skills, styling, reducing extraneous code

Author: mathcodes

index.html

@@ -17,12 +17,12 @@ function About() {
             </div>
             <div className="about-body">
                 <div className="about-description">
-                    <h2 style={{color: theme.secondary70}}>{aboutData.title}</h2>
+                    <h2 style={{color: 'darkolivegreen'}}>{aboutData.title}</h2>
                     <p style={{color:theme.tertiary80}}>{aboutData.description1}<br/><br/>{aboutData.description2}<br/><br/>{aboutData.description3}<br/><br/>{aboutData.description4}</p>
                 </div>
                 <div className="about-img">
                     <img 
-                        src={aboutData.image === 1 ? theme.aboutimg1 : theme.aboutimg2}  
+                        src={aboutData.image}  
                         alt="" 
                     />
                 </div>

public/blueBackground.png

@@ -1,12 +1,12 @@
 import React from 'react'
 import Button from '@mui/material/Button';
 
-function ButtonComponent({label, link, width, height}) {
+function ButtonComponent({label, link, width, height, style}) {
   return (
     <div className="formBtn">
       <Button
         style={{
-          backgroundColor: '#232526',
+          backgroundColor: 'darkolivegreen',
           color: '#222',
           width: width ? width : '18rem',          
           height: height ? height : '4rem',

public/greenBackground.png

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
+color: darkolivegreen;
 }
 
 .landing--container {
@@ -64,7 +64,7 @@
 
 .landing--social:hover {
   transform: scale(1.2);
-  color: #4faeba;
+  color: orange;
 }
 
 .landing--social2 {
@@ -78,7 +78,7 @@
 
 .landing--social2:hover {
   transform: scale(1.2);
-  color: #4faeba;
+  color: orange;
 
 }
 
@@ -127,6 +127,7 @@
   align-items: center;
   justify-content: space-between;
   font-family: "var(--primaryFont)", sans-serif;
+  color: darkolivegreen;
 }
 
 .lcl--content2{
@@ -281,9 +282,14 @@
 }
 
 .MuiButton-label {
-  color: #4faeba;
+  color: orange;
 }
 
 .MuiButton-label:hover{
-  color: #4faeba;
+  color: orange;
+}
+
+
+h2:hover{
+  color:orange;
 }

public/jcircle3Dorange.svg

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { Button } from '@material-ui/core';
 import './Landing.css';
+import { useTheme } from '@material-ui/core/styles';
 import { ThemeContext } from '../../contexts/ThemeContext';
 import { headerData } from '../../data/headerData';
 import { socialsData } from '../../data/socialsData';
@@ -14,11 +15,8 @@ import {
 } from 'react-icons/fa';
 import { SiReplit } from 'react-icons/si';
 function Landing() {
-	const { theme, drawerOpen } = useContext(ThemeContext);
-	let randomColor = Math.floor(Math.random() * 16777215).toString(16);
-	console.log(randomColor)
-	console.log(`#,${randomColor}`)
-
+	const theme = useTheme();
+	const { drawerOpen } = useContext(ThemeContext);
 
 	return (
 		<div className='landing'>
@@ -207,7 +205,7 @@ function Landing() {
 								<Button
 									className='landing--button'
 									style={{
-										backgroundColor: theme.primary,
+										backgroundColor: 'darkolivegreen',
 										color: theme.secondary70,
 										width: '8rem',
 										display: 'flex',
@@ -220,7 +218,7 @@ function Landing() {
 							</a>
 							<Button
 								style={{
-									backgroundColor: theme.primary,
+									backgroundColor: 'darkolivegreen',
 									color: theme.secondary70,
 									width: '8rem',
 									display: 'flex',

public/orangeJon.png

@@ -1,9 +1,6 @@
-
-
 .service{
-  background-color: #fff444;
+  background-color: white;
 }
-
 paper{
-  background-color: #fff444;
+  background-color: black;
 }