Updates react-scripts to v4, eslint to v7 (#137)

This PR does a couple of things:

* update `react-scripts` (the package for create-react-app) to `v4.0.3` - this is a major breaking change, but also helps with #130 
* update `eslint` to v7+, to resolve newly-created peer-dependency mismatches 
* removes some unused CSS I forgot to remove from #148 
* changes the about diamond to a `src/assets`-imported image rather than using a `background-image` hack (the nice externality is that it's also more accessible)!

Closes #136.

Author: mattxwang

package-lock.json

@@ -15,7 +15,7 @@
     "react-countdown": "^2.2.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3"
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -55,7 +55,7 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^6.6.0",
+    "eslint": "^7.26.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.3.6"
   }

package.json

@@ -1,4 +1,5 @@
 import React from 'react';
+import AboutSplashImage from '../../assets/about1.png';
 import Config from '../../config';
 
 import Banner from '../Banner/Banner';
@@ -11,7 +12,7 @@ function About() {
 			<Banner decorative />
 			<div className="content-section">
 				<div className="ornament square-ornament">
-					<div className="square-splash" />
+					<img className="square-splash" src={AboutSplashImage} alt="a picture of acm students at our annual CS BBQ!" />
 					<div className="square-small" />
 					<div className="square-tiny" />
 				</div>

public/images/about1.png renamed to src/assets/about1.png

@@ -40,9 +40,6 @@
 	left: 30px;
 	top: -65px;
 	border-radius: 50px;
-	background-image: url(/images/about1.png);
-	background-size: cover;
-	background-color: $acm-cobalt;
 }
 
 .square-small {
@@ -108,4 +105,4 @@
 			text-align: center;
 		}
 	}
-}
+}

src/components/About/About.js

@@ -7,10 +7,8 @@
     width: 35px;
     border-radius: 2px;
     margin: 0px 3px;
-     display: inline-block;
-    vertical-align: middle; 
-
-    &#youtube { background-image: url(/images/social_media/youtubeDark.svg); }
+    display: inline-block;
+    vertical-align: middle;
 
     &:hover {
         transform: scale(1.03);