Make countdown timer bigger, easier to read from a glance

package.json

@@ -8,8 +8,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.2",
+    "firebase": "^10.7.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.2",
+    "react-countdown-clock": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -3,6 +3,7 @@ import CountdownTimer from './CountdownTimer';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
 
+
 // Set your target date here
 
 function App() {

src/CountdownTimer.js

@@ -13,16 +13,15 @@ import Card from 'react-bootstrap/Card';
 const CountdownTimer = ({ targetDate }) => {
   const [days, hours, minutes, seconds] = useCountdown(targetDate);
 
-//  Return the JSX to display the countdown timer, this function will return the ExpiredNotice component if the countdown has finished,
+  // Return the JSX to display the countdown timer, this function will return the ExpiredNotice component if the countdown has finished,
-//  otherwise it will return the ShowCounter component
+  // otherwise it will return the ShowCounter component
-// The component below display's the simple text stating the purpose of the timer, and the countdown box itself.
+  // The component below display's the simple text stating the purpose of the timer, and the countdown box itself.
-
   return (
     <Container fluid className="countdown-container">
       <Row className="justify-content-center align-items-center">
         <Col xs={12} sm={8} md={6}>
           <h1 className="title">Countdown to TomBay's Retirement</h1>
-     <Card className="border-0 shadow-lg mt-4"> 
+          <Card className="border-0 shadow-lg mt-4 countdown-card countdown-card--big"> {/* Updated CSS class */}
             {days + hours + minutes + seconds <= 0 ? (
               <Card.Body className="d-flex flex-column justify-content-center align-items-center">
                 <ExpiredNotice />
@@ -30,6 +29,7 @@ const CountdownTimer = ({ targetDate }) => {
             ) : (
               <Card.Body className="d-flex flex-column justify-content-center align-items-center">
                 <ShowCounter days={days} hours={hours} minutes={minutes} seconds={seconds} />
+                
               </Card.Body>
             )}
           </Card>

src/ShowCounter.js

@@ -3,7 +3,7 @@
 import React from 'react';
 
 const ShowCounter = ({ days, hours, minutes, seconds }) => (
- <div>
+ <div style={{ fontSize: '4rem' }}>
    {days} days, {hours} hours, {minutes} minutes, {seconds} seconds
  </div>
 );

src/index.css

@@ -10,4 +10,6 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
+
+    
 }

src/styles.css

@@ -0,0 +1,5 @@
+/* styles.css */
+
+.ShowCounter {
+    font-size: 3em;
+   }