poolsummary: fix label and padding

gitcoinco · Jan 27, 2025 · 97b556e · 97b556e
1 parent b86a59a
commit 97b556e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 34 deletions.
diff --git a/src/components/IconLabel/IconLabel.tsx b/src/components/IconLabel/IconLabel.tsx
@@ -72,32 +72,35 @@ export const IconLabel: React.FC<
           ))}
       </IconLabelContainer>
     ))
-    .with({ type: "roundPeriod" }, ({ startDate, endDate = undefined, className, isLoading }) => (
-      <IconLabelContainer
-        type="period"
-        className={className}
-        iconType={IconType.CLOCK}
-        iconVariant={icon({ type: isLoading ? "loading" : "roundPeriod" })}
-      >
-        {match(isLoading)
-          .with(true, () => (
-            <div className="flex items-center gap-1">
-              <span className={text({ type: "roundPeriod" })}>{`Review period:`}</span>
-              <Skeleton className="h-6 w-72 rounded-lg" />
-            </div>
-          ))
-          .otherwise(() => (
-            <span className={text({ type: "roundPeriod" })}>{`Review period: ${formatDate(
-              startDate,
-              DateFormat.ShortMonthDayYear24HourUTC,
-            )} - ${
-              endDate
-                ? formatDate(endDate, DateFormat.ShortMonthDayYear24HourUTC)
-                : "No end date (open round)"
-            }`}</span>
-          ))}
-      </IconLabelContainer>
-    ))
+    .with(
+      { type: "roundPeriod" },
+      ({ startDate, endDate = undefined, className, isLoading, label }) => (
+        <IconLabelContainer
+          type="period"
+          className={className}
+          iconType={IconType.CLOCK}
+          iconVariant={icon({ type: isLoading ? "loading" : "roundPeriod" })}
+        >
+          {match(isLoading)
+            .with(true, () => (
+              <div className="flex items-center gap-1">
+                <span className={text({ type: "roundPeriod" })}>{label}</span>
+                <Skeleton className="h-6 w-72 rounded-lg" />
+              </div>
+            ))
+            .otherwise(() => (
+              <span className={text({ type: "roundPeriod" })}>{`${label}: ${formatDate(
+                startDate,
+                DateFormat.ShortMonthDayYear24HourUTC,
+              )} - ${
+                endDate
+                  ? formatDate(endDate, DateFormat.ShortMonthDayYear24HourUTC)
+                  : "No end date (open round)"
+              }`}</span>
+            ))}
+        </IconLabelContainer>
+      ),
+    )
     .with({ type: "dateWithPrefix" }, ({ date, prefix, className, isLoading }) => (
       <IconLabelContainer
         type="date"

diff --git a/src/components/IconLabel/types.ts b/src/components/IconLabel/types.ts
@@ -21,6 +21,7 @@ interface PeriodProps {
 
 interface RoundPeriodProps {
   type: "roundPeriod";
+  label: string;
   startDate: Date;
   endDate?: Date;
   className?: string;

diff --git a/src/features/pool/components/PoolSummary/PoolSummary.tsx b/src/features/pool/components/PoolSummary/PoolSummary.tsx
@@ -82,10 +82,10 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
     },
   ];
   return (
-    <div className={cn(variants.variants.default, "grid grid-cols-2")}>
+    <div className={cn(variants.variants.default, "grid grid-cols-2 py-6")}>
       <div className="flex flex-col items-start justify-start gap-4">
         <Breadcrumb items={breadcrumbItems} isLoading={pool?.isLoading} />
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           <div>
             <PoolBadge type="poolType" badge={poolType} isLoading={pool?.isLoading} />
           </div>
@@ -98,12 +98,23 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
             isLoading={pool.isLoading}
             laodingSkeletonClassName="h-10 w-72 rounded-lg"
           />
-          <IconLabel
-            type="roundPeriod"
-            startDate={allocationStartDate}
-            endDate={allocationEndDate}
-            isLoading={pool.isLoading}
-          />
+
+          <div className="flex flex-col gap-2">
+            <IconLabel
+              type="roundPeriod"
+              startDate={registerStartDate}
+              endDate={registerEndDate}
+              isLoading={pool.isLoading}
+              label="Review"
+            />
+            <IconLabel
+              type="roundPeriod"
+              startDate={allocationStartDate}
+              endDate={allocationEndDate}
+              isLoading={pool.isLoading}
+              label="Voting"
+            />
+          </div>
         </div>
       </div>
       <div className="flex flex-col items-end justify-between">