feat(Countdown): final css may be required but finished

src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css

@@ -3,6 +3,6 @@
 }
 
 #message a {
-	/* text-align: center; */
-	width: auto;
+	text-decoration: none;
+	color: inherit;
 }

src/CountDown/CountDownTimer.css

@@ -1,5 +1,5 @@
-#afterTime {
-	color: darkred;
+#afterTime #counter {
+	color: black;
 	background-color: red;
 }
 
@@ -10,14 +10,12 @@
 #counter {
 	display: flex;
 	flex-direction: row;
-	padding-left: 1svw;
-	padding-right: 1svw;
-	padding-top: 1svw;
+	padding: 0.5svh 1svw;
 	text-align: center;
 	background-color: whitesmoke;
 	border: 2px solid black;
-	border-radius: 5px;
-	justify-content: space-between;
+	border-radius: 1rem;
+	justify-content: space-evenly;
 	font-size: x-large;
 }
 
@@ -40,14 +38,14 @@
 	line-height: 1.75rem;
 	padding: 0.5rem;
 	border: 1px solid #ebebeb;
-	border-radius: 0.25rem;
+	border-radius: 1rem;
 	text-decoration: none;
 	color: #000;
 }
 
 #counter .countdown {
 	line-height: 1.25svb;
-	padding: 0 0.75rem 0 0.75rem;
+	padding: 0.75rem 0.75rem;
 	align-items: center;
 	display: flex;
 	flex-direction: column;
@@ -56,3 +54,13 @@
 #counter .countdownDanger {
 	color: #ff0000;
 }
+
+.countDownTimer a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.countDownTimer {
+	width: fit-content;
+	margin: 0.5svh 1svw;
+}

src/CountDown/CountDownTimer.js

@@ -3,17 +3,23 @@ import "./CountDownTimer.css";
 
 /**
  * @param {Date} dateFinished - Date object with time that it finishes Date(year, monthNumber, day, hour, minute, second)
- * @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards,
+ * @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards
+ * @param {React.JSX.Element} messageDisplayBefore - The Message to display while it is counting down
  * @returns {React.JSX.Element} page - returns the page content
  * @description A fun countdown timer of how many days, minutesz and seconds until x happens
  * @author Brock <darkicewolf50@gmail.com>
- * @todo change messageDisplayAfter to take in another page
  */
-const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => {
+const CountDownTimer = ({
+	dateFinished,
+	messageDisplayAfter,
+	messageDisplayBefore,
+}) => {
 	const [days, hours, minutes, seconds] = useCountdown(dateFinished);
 	if (days + hours + minutes + seconds <= 0) {
 		return (
-			<div id="afterTime">
+			<div
+				id="afterTime"
+				className="countDownTimer">
 				<ShowCounter
 					days={days}
 					hours={hours}
@@ -25,13 +31,16 @@ const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => {
 		);
 	} else {
 		return (
-			<div>
+			<div
+				id="countDownTimer"
+				className="countDownTimer">
 				<ShowCounter
 					days={days}
 					hours={hours}
 					minutes={minutes}
 					seconds={seconds}
 				/>
+				{messageDisplayBefore}
 			</div>
 		);
 	}