diff --git a/src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css b/src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css index 2c6bbca..1825f91 100644 --- a/src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css +++ b/src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css @@ -3,6 +3,6 @@ } #message a { - /* text-align: center; */ - width: auto; + text-decoration: none; + color: inherit; } diff --git a/src/CountDown/CountDownTimer.css b/src/CountDown/CountDownTimer.css index cdaaad2..7c89d58 100644 --- a/src/CountDown/CountDownTimer.css +++ b/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; +} diff --git a/src/CountDown/CountDownTimer.js b/src/CountDown/CountDownTimer.js index e73b2bd..5b1a2c6 100644 --- a/src/CountDown/CountDownTimer.js +++ b/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 - * @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 ( -
+
{ ); } else { return ( -
+
+ {messageDisplayBefore}
); }