formatting

Author: wraeth-eth

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

@@ -1,6 +1,7 @@
 import { ReactNode, useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useFundingCycleCountdown } from '../hooks/useFundingCycleCountdown'
+import { useProjectMetadata } from '../hooks/useProjectMetadata'
 
 const RS_PROJECT_ID = 618
 
@@ -11,6 +12,7 @@ export type ProjectHeaderCountdownProps = {
 export const ProjectHeaderCountdown: React.FC<ProjectHeaderCountdownProps> = ({
   className,
 }) => {
+  const { projectId } = useProjectMetadata()
   const { secondsRemaining } = useFundingCycleCountdown()
 
   const { days, hours, minutes, seconds } = useMemo(() => {
@@ -21,22 +23,23 @@ export const ProjectHeaderCountdown: React.FC<ProjectHeaderCountdownProps> = ({
     return { days, hours, minutes, seconds }
   }, [secondsRemaining])
 
-  if (RS_PROJECT_ID === 618) return null
+  if (projectId !== RS_PROJECT_ID) return null
 
   if (secondsRemaining === 0) return null
+
   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-5',
+        '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',
         className,
       )}
     >
       <div className="mr-3 text-lg text-white">Closing in</div>
-      <div className="flex gap-1.5">
-        <CountdownCard label="Days" unit={days} />
-        <CountdownCard label="Hrs" unit={hours} />
-        <CountdownCard label="Mins" unit={minutes} />
-        <CountdownCard label="Secs" unit={seconds} />
+      <div className="flex gap-3">
+        <CountdownCard label="DAYS" unit={days} />
+        <CountdownCard label="HRS" unit={hours} />
+        <CountdownCard label="MINS" unit={minutes} />
+        <CountdownCard label="SECS" unit={seconds} />
       </div>
     </div>
   )
@@ -51,6 +54,8 @@ export const CountdownCard = ({
 }) => (
   <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="text-xs">{label}</div>
+    <div className="text-xs font-medium text-grey-500 dark:text-slate-200">
+      {label}
+    </div>
   </div>
 )