fix(OurSponsors) refactored code to make css more understandable

src/OurSponsors/OurSponsors.css

@@ -3,53 +3,15 @@
 	flex-direction: column;
 	justify-content: center;
 	background-color: gray;
-	padding-left: 10%;
-	padding-right: 10%;
+	padding-left: 2%;
+	padding-right: 2%;
 }
 
-#OurSponsors div div {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+#Sponsor {
 	background-color: white;
 }
 
-#OurSponsors div div div div div img {
-	display: flex;
-	justify-content: left;
-}
-
-#OurSponsors div div div p {
-	display: flex;
-	justify-content: left;
-}
-
-#OurSponsors div div div div div {
-	padding: 0%;
-	display: flex;
-	flex-direction: column;
-	justify-content: left;
-}
-
-#OurSponsors div div div div {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-	padding: 0%;
-	width: 100%;
-}
-
-#OurSponsors div div h3 {
-	cursor: pointer;
-}
-
-#OurSponsors h2 {
-	background-color: aquamarine;
-	text-align: center;
-	margin: 0px;
-}
-
-#SponsorFlexEnd {
+#SponsorEnd {
 	text-align: end;
 }
 
@@ -57,3 +19,36 @@
 	text-align: left;
 	border-bottom: 2px solid black;
 }
+
+.Sponsors {
+	background-color: inherit;
+}
+
+.Sponsors a {
+	display: flex;
+	flex-direction: column;
+	color: inherit;
+	text-decoration: none;
+	cursor: pointer;
+	background-color: whitesmoke;
+}
+
+.Sponsors a div {
+	display: flex;
+	flex-direction: row;
+}
+
+.Sponsors a div h4 {
+	width: 30%;
+}
+
+.Sponsors a div img {
+	max-height: 8rem;
+	max-width: 70%;
+}
+
+.Sponsors a div p {
+	padding: 2rem;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}

src/OurSponsors/OurSponsors.js

@@ -1,7 +1,7 @@
 import "./OurSponsors.css";
 import { useEffect, useState } from "react";
 import currentSponsorData from "../MockDB/sponsorship.yml";
-import pastSponsorData from "../MockDB/sponsorship.yml";
+import pastSponsorData from "../MockDB/pastSponsors.yml";
 import yaml from "js-yaml";
 import OpenPage from "../Header/OpenPage";
 
@@ -54,20 +54,18 @@ const OurSponsors = () => {
 			const yamlDict = yaml.load(rawText);
 			setPastSponsorsDict(yamlDict);
 		} catch (error) {
-			//error checking
+			// error checking
 			console.error("Error recieving data from server:");
 		}
 	};
-
+	// needs to change into ? : statement and have content above it
 	if (!currentSponsorsDict && !pastSponsorsDict) {
 		//awaiting for a resposne from the backend
 		//add loading notification to user
-		console.log(currentSponsorsDict);
 		return <p>Loading...</p>;
 	}
 	if (currentSponsorsDict && pastSponsorsDict) {
 		//maps out the dictionary and displays the content
-		console.log(currentSponsorsDict);
 		return (
 			<div id="OurSponsors">
 				<div id="BecomeASponsors">
@@ -76,16 +74,89 @@ const OurSponsors = () => {
 						textOnButton={"Become a Sponsor"}
 					/>
 				</div>
-				<div>
-					<h3 className="SponsorsTitle">Current Sponsors</h3>
-					{/* gets the outmost name of the Object {"Name of tier": {...}} */}
+				<div id="Sponsor">
+					<h2 className="SponsorsTitle">Current Sponsors</h2>
+					{/* gets the outmost name of the Object Name of tier*/}
+					{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+						return (
+							<div className="Sponsors">
+								<h3>{sponsorsTier}</h3>
+								{/* gets key form list of tier */}
+								{Object.keys(currentSponsorsDict[sponsorsTier]).map(
+									(sponsorsKey) => {
+										return (
+											<div>
+												{/* gets name out of object and gets data of that sponsor preped */}
+												{Object.keys(
+													currentSponsorsDict[sponsorsTier][sponsorsKey]
+												).map((sponsorName) => {
+													let sponsorData =
+														currentSponsorsDict[sponsorsTier][sponsorsKey][
+															sponsorName
+														];
+													return (
+														<a
+															href={sponsorData.Url}
+															target="_blank"
+															rel="noreferrer">
+															<div>
+																<h4>{sponsorName}</h4>
+																<img
+																	src={sponsorData.LogoUrl}
+																	alt={sponsorName + "'s Logo"}
+																/>
+															</div>
+															{(sponsorsTier !== "Silver Tier" ||
+																sponsorsTier !== "Bronze Tier") && (
+																<div>
+																	<p>{sponsorData.DescriptionAboutSponsor}</p>
+																</div>
+															)}
+														</a>
+													);
+												})}
+											</div>
+										);
+									}
+								)}
+							</div>
+						);
+					})}
 				</div>
-				<div>
-					<h3
+				<div id="Sponsor">
+					<h2
 						className="SponsorsTitle"
-						id="SponsorFlexEnd">
+						id="SponsorEnd">
 						Past Sponsors
-					</h3>
+					</h2>
+					{/* gets keys o objects in list */}
+					{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
+						return (
+							<div className="Sponsors">
+								{/* gets name of sponsor then uses it to get data of past sponsor */}
+								{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
+									(pastSponsorName) => {
+										let pastSponsors =
+											pastSponsorsDict[pastSponsorKey][pastSponsorName];
+										return (
+											<a
+												href={pastSponsors.Url}
+												target="_blank"
+												rel="noreferrer">
+												<div>
+													<h4>{pastSponsorName}</h4>
+													<img
+														src={pastSponsors.LogoUrl}
+														alt={pastSponsorName + "'s Logo"}
+													/>
+												</div>
+											</a>
+										);
+									}
+								)}
+							</div>
+						);
+					})}
 				</div>
 			</div>
 		);