fix: countdown on mobile (#4228)

src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx

@@ -30,12 +30,12 @@ export const ProjectHeaderCountdown: React.FC<ProjectHeaderCountdownProps> = ({
   return (
     <div
       className={twMerge(
-        'absolute bottom-5 left-1/2 mx-auto flex w-full max-w-6xl -translate-x-1/2 items-center justify-end pr-4 md:pr-5 xl:pr-0',
+        'absolute bottom-5 left-1/2 mx-auto flex w-full max-w-6xl -translate-x-1/2 flex-col items-end pr-2 sm:flex-row sm:items-center sm:justify-end sm:pr-4 md:pr-5 xl:pr-0',
         className,
       )}
     >
       <div className="mr-3 text-lg text-white">Closing in</div>
-      <div className="flex gap-3">
+      <div className="flex gap-1 sm:gap-3">
         <CountdownCard label="DAYS" unit={days} />
         <CountdownCard label="HRS" unit={hours} />
         <CountdownCard label="MINS" unit={minutes} />
@@ -52,8 +52,8 @@ export const CountdownCard = ({
   label: ReactNode
   unit: number
 }) => (
-  <div className="flex w-11 flex-1 flex-col items-center rounded-lg border border-smoke-75 bg-smoke-50 py-1 px-1.5 text-black drop-shadow dark:border-slate-400 dark:bg-slate-700 dark:text-white">
-    <div className="text-xl">{unit}</div>
+  <div className="flex w-11 flex-1 flex-col items-center rounded-lg border border-smoke-75 bg-smoke-50 py-1 px-1 text-black drop-shadow dark:border-slate-400 dark:bg-slate-700 dark:text-white sm:px-1.5">
+    <div className="text-sm sm:text-xl">{unit}</div>
     <div className="text-xs font-medium text-grey-500 dark:text-slate-200">
       {label}
     </div>

src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useCountdownClock.test.ts

@@ -9,21 +9,30 @@ describe('useCountdownClock', () => {
   })
   it('returns empty string if endSeconds is undefined', () => {
     const { result } = renderHook(() => useCountdownClock(undefined))
-    expect(result.current).toEqual('')
+    expect(result.current).toEqual({
+      remainingTimeText: '',
+      secondsRemaining: 0,
+    })
   })
 
   it('returns remaining time', () => {
     const now = Date.now() / 1000
     const tenSecondsFromNow = now + 10
     const { result } = renderHook(() => useCountdownClock(tenSecondsFromNow))
-    expect(result.current).toEqual('0d 0h 0m 10s')
+    expect(result.current).toEqual({
+      remainingTimeText: '0d 0h 0m 10s',
+      secondsRemaining: 10,
+    })
   })
   it('updates every second', () => {
     const now = Date.now() / 1000
     const tenSecondsFromNow = now + 10
     const { result } = renderHook(() => useCountdownClock(tenSecondsFromNow))
     for (let i = 10; i >= 0; i--) {
-      expect(result.current).toEqual(`0d 0h 0m ${i}s`)
+      expect(result.current).toEqual({
+        remainingTimeText: `0d 0h 0m ${i}s`,
+        secondsRemaining: i,
+      })
       act(() => jest.advanceTimersByTime(1000))
     }
   })
@@ -32,7 +41,10 @@ describe('useCountdownClock', () => {
     const now = Date.now() / 1000
     const tenSecondsAgo = now - 10
     const { result } = renderHook(() => useCountdownClock(tenSecondsAgo))
-    expect(result.current).toEqual('0d 0h 0m 0s')
+    expect(result.current).toEqual({
+      remainingTimeText: '0d 0h 0m 0s',
+      secondsRemaining: 0,
+    })
   })
 
   test('timer is cleared on unmount', () => {
@@ -41,15 +53,24 @@ describe('useCountdownClock', () => {
     const { result, unmount } = renderHook(() =>
       useCountdownClock(tenSecondsFromNow),
     )
-    expect(result.current).toEqual('0d 0h 0m 10s')
+    expect(result.current).toEqual({
+      remainingTimeText: '0d 0h 0m 10s',
+      secondsRemaining: 10,
+    })
     act(() => {
       jest.advanceTimersByTime(1000)
     })
-    expect(result.current).toEqual('0d 0h 0m 9s')
+    expect(result.current).toEqual({
+      remainingTimeText: '0d 0h 0m 9s',
+      secondsRemaining: 9,
+    })
     unmount()
     act(() => {
       jest.advanceTimersByTime(1000)
     })
-    expect(result.current).toEqual('0d 0h 0m 9s')
+    expect(result.current).toEqual({
+      remainingTimeText: '0d 0h 0m 9s',
+      secondsRemaining: 9,
+    })
   })
 })