Merge pull request #4984 from OneCommunityGlobal/venkataramanan_fix_countdown_formatting

Venkataramanan 🔥 countdown formatting

Author: one-community

src/components/Timer/Countdown.jsx

@@ -66,8 +66,8 @@ export default function Countdown({
   const remainingSecondsDisplay = remainingSeconds.toString().padStart(2, '0');
 
   const shouldDisplay = {
-    hour: !!remainingHours,
-    minute: !!remainingHours || !!remainingMinutes,
+    hour: true,
+    minute: true,
   };
 
   const forceMinMax = (event, ref) => {

src/components/Timer/Countdown.module.css

@@ -55,12 +55,16 @@
 }
 
 .countdownCircle .content {
+  width: 74%;
+  max-width: 190px;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.3rem;
   text-align: center;
+  box-sizing: border-box;
 }
 
 .countdownCircle .content > span {
@@ -71,37 +75,47 @@
 }
 
 .content .remainingTime {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 0.2rem;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  place-items: center;
+  column-gap: 0.1rem;
   margin-top: 0.05rem;
 }
 
+.content .remainingTime > div {
+  min-width: 0;
+  width: 100%;
+}
+
 .content .timeDisplay {
-  min-width: 2.8rem;
+  width: 100%;
+  min-width: 0;
   font-weight: 800;
-  font-size: 2.5rem;
+  font-size: 1.7rem;
   line-height: 1;
   text-align: center;
+  white-space: nowrap;
 }
 
 .content .label {
-  margin-top: 0.25rem;
-  font-size: 0.72rem;
+  margin-top: 0.2rem;
+  font-size: 0.42rem;
   font-weight: 800;
   text-align: center;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  line-height: 1.1;
+  letter-spacing: 0.03em;
+  line-height: 1.05;
   opacity: 0.95;
+  white-space: nowrap;
 }
 
 .content .timeColon {
-  margin-top: 0.05rem;
-  font-size: 2rem;
+  font-size: 1.1rem;
   font-weight: 800;
   line-height: 1;
+  align-self: center;
+  width: auto;
 }
 
 .content .operators {

src/components/Timer/__test__/Countdown.test.jsx

@@ -36,8 +36,11 @@ describe('Countdown Component', () => {
     expect(screen.getByText('Goal: 01:00:00')).toBeInTheDocument();
     expect(screen.getByText('Elapsed: 00:30:00')).toBeInTheDocument();
     expect(screen.getByText('Time Remaining')).toBeInTheDocument();
-    expect(screen.getByText('00')).toBeInTheDocument();
+    expect(screen.getAllByText('00')).toHaveLength(2);
     expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('Hours')).toBeInTheDocument();
+    expect(screen.getByText('minutes')).toBeInTheDocument();
+    expect(screen.getByText('seconds')).toBeInTheDocument();
   });
 
   it('calls toggleTimer when the close button is clicked', () => {
@@ -51,9 +54,8 @@ describe('Countdown Component', () => {
   it('displays correct remaining time based on props', () => {
     // eslint-disable-next-line react/jsx-props-no-spreading
     const { rerender } = render(<Countdown {...defaultProps} />);
-    expect(screen.getByText('00')).toBeInTheDocument(); // Hours
+    expect(screen.getAllByText('00')).toHaveLength(2); // Hours and Seconds
     expect(screen.getByText('30')).toBeInTheDocument(); // Minutes
-    expect(screen.getByText('00')).toBeInTheDocument(); // Seconds
 
     rerender(
       <Countdown