added upcomingEvents: css started need to add button to previous events

src/Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents.css

@@ -1,8 +1,81 @@
-#upcomingEvents a {
-	text-decoration: none;
-	color: inherit;
+:root {
+	--upcomingEventsTextColour: whitesmoke;
+	--sizeUpcomingEvents: 2%;
+	--upcomingEventsBorderWidth: 2px;
+	--upcomingEventsBorderStyle: solid;
+	--upcomingEventsBorderColour: black;
+	--upcomingEventsBorder: var(--upcomingEventsBorderWidth)
+		var(--upcomingEventsBorderStyle) var(--upcomingEventsBorderColour);
 }
-
 #upcomingEvents {
 	text-decoration: none;
 }
+
+#upcomingEvents #Events {
+	display: flex;
+	flex-direction: column;
+	margin-left: var(--sizeUpcomingEvents);
+	margin-right: var(--sizeUpcomingEvents);
+	flex: 1;
+}
+
+#upcomingEvents a {
+	text-decoration: none;
+	color: inherit;
+	width: 100%;
+}
+
+#upcomingEvents table {
+	width: inherit;
+	/* margin-left: 5svw; */
+	margin-bottom: 5svh;
+	border: 2px solid black;
+	border-radius: 5px;
+}
+
+#upcomingEvents table tr {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-left: var(--sizeUpcomingEvents);
+	margin-right: var(--sizeUpcomingEvents);
+}
+
+#upcomingEvents table h2 {
+	background-color: var(--upcomingEventsTextColour);
+	border-radius: 5px;
+}
+
+#upcomingEvents table time {
+	background-color: var(--upcomingEventsTextColour);
+	border-radius: 5px;
+	justify-content: end;
+	text-align: end;
+}
+#Events a table tbody tr:nth-child(2) td {
+	width: 100%;
+}
+
+#upcomingEventsSideBorder {
+	display: flex;
+	flex-direction: row;
+	padding-top: 2svh;
+	padding-bottom: 2svh;
+	margin-top: 1svh;
+	margin-bottom: 3svh;
+	align-items: center;
+}
+
+#upcomingEventsSideBorder h1 {
+	padding-right: 2svw;
+	padding-left: 2svw;
+	margin: 0px;
+	width: fit-content;
+	border: none;
+}
+#upcomingEventsSideBorder div {
+	background-color: var(--upcomingEventsBorderColour);
+	flex: 1;
+	height: var(--upcomingEventsBorderWidth);
+}

src/Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents.js

@@ -9,7 +9,7 @@ import CountDownTimer from "../../CountDown/CountDownTimer";
  * @returns {JSX.Element} PageContent - gets a Dictionary of our sponsors from synology drive
  * @description The Upcoming Events Page
  * @author Brock <darkicewolf50@gmail.com>
- * @todo css and change to Openpage on merge
+ * @todo previous events button
  */
 const UpcominEvents = () => {
 	const [competitionsDict, setCompetitionsDict] = useState();
@@ -41,8 +41,11 @@ const UpcominEvents = () => {
 	if (competitionsDict) {
 		return (
 			<div id="upcomingEvents">
-				<h2>Upcoming Competitions</h2>
-				<div>
+				<div id="upcomingEventsSideBorder">
+					<h1>Upcoming Competitions</h1>
+					<div></div>
+				</div>
+				<div id="Events">
 					{Object.keys(competitionsDict).map((competitionKey) => {
 						//Selects make a dictionary of only that event to pull from
 						const competition = competitionsDict[competitionKey];
@@ -73,7 +76,7 @@ const UpcominEvents = () => {
 									<tbody>
 										<tr>
 											<td>
-												<h3>{competition.Name}</h3>
+												<h2>{competition.Name}</h2>
 											</td>
 											<td>
 												<time>{competition.Date}</time>
@@ -91,8 +94,11 @@ const UpcominEvents = () => {
 					})}
 				</div>
 				<div>
-					<h2>Previous Events</h2>
-					<button>Previuos Events</button>
+					<div id="upcomingEventsSideBorder">
+						<div></div>
+						<h1>Previous Events</h1>
+					</div>
+					<button>Previous Events</button>
 					{/* will change to thing below when merged onto dev branch */}
 					{/* <OpenPage pageToGoTo={"/PreviuosEvents"} textOnButton={"Previous Events"} /> */}
 				</div>

src/CountDown/CountDownTimer.css

@@ -1,15 +1,33 @@
 #afterTime {
-	color: red;
+	color: darkred;
+	background-color: red;
+}
+
+#counter.dangerDays {
+	background-color: red;
 }
 
 #counter {
 	display: flex;
 	flex-direction: row;
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
-	padding-top: 0.5rem;
+	padding-left: 1svw;
+	padding-right: 1svw;
+	padding-top: 1svw;
 	text-align: center;
-	background-color: grey;
+	background-color: whitesmoke;
+	border: 2px solid black;
+	border-radius: 5px;
+	justify-content: space-between;
+	font-size: x-large;
+}
+
+#counter div {
+	display: flex;
+	flex-direction: row;
+}
+
+#counter div p {
+	padding-left: 1svw;
 }
 
 #counter .countdown-link {
@@ -28,7 +46,7 @@
 }
 
 #counter .countdown {
-	line-height: 1.25rem;
+	line-height: 1.25svb;
 	padding: 0 0.75rem 0 0.75rem;
 	align-items: center;
 	display: flex;
@@ -38,13 +56,3 @@
 #counter .countdownDanger {
 	color: #ff0000;
 }
-
-#counter .countdown p {
-	margin: 0;
-}
-
-#counter .countdown span {
-	text-transform: uppercase;
-	font-size: 0.75rem;
-	line-height: 1rem;
-}

src/CountDown/CountDownTimer.js

@@ -77,8 +77,11 @@ const getReturnValues = (countDown) => {
 };
 
 const ShowCounter = ({ days, hours, minutes, seconds }) => {
+	let dangerDays = days > 10 ? "" : "dangerDays";
 	return (
-		<div id="counter">
+		<div
+			className={dangerDays}
+			id="counter">
 			<DateTimeDisplay
 				valueAwayFrom={days}
 				discriptor={"Days"}
@@ -106,7 +109,7 @@ const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => {
 	return (
 		<div>
 			<p>{valueAwayFrom}</p>
-			<span>{discriptor}</span>
+			<p>{discriptor}</p>
 		</div>
 	);
 };