From abc6c011ea7189df4775f7d3b9e892774cdff885 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Mon, 5 Jan 2026 05:06:30 +0000
Subject: [PATCH] phase 1 complete

---
 frontend/src/components/common/SiteCard.tsx | 77 ++++++++-------------
 frontend/src/components/ui/badge/Badge.tsx  |  6 +-
 frontend/src/components/ui/card/Card.tsx    |  3 +-
 frontend/src/pages/Sites/List.tsx           | 44 ++++++------
 4 files changed, 58 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/common/SiteCard.tsx b/frontend/src/components/common/SiteCard.tsx
index 09a378d6..2c0f8071 100644
--- a/frontend/src/components/common/SiteCard.tsx
+++ b/frontend/src/components/common/SiteCard.tsx
@@ -28,22 +28,6 @@ export default function SiteCard({
     onToggle(site.id, enabled);
   };
 
-  const getStatusColor = () => {
-    if (site.is_active) {
-      return 'bg-success-500 dark:bg-success-600';
-    }
-    return 'bg-gray-400 dark:bg-gray-500';
-  };
-
-  const getStatusText = () => {
-    if (site.is_active) {
-      return { text: 'Active', color: 'text-success-600 dark:text-success-400', bold: true };
-    }
-    return { text: 'Inactive', color: 'text-gray-400 dark:text-gray-500', bold: false };
-  };
-
-  const statusText = getStatusText();
-
   // Setup checklist state derived from site data
   const hasIndustry = !!site.industry || !!site.industry_name;
   const hasSectors = site.active_sectors_count > 0;
@@ -52,26 +36,28 @@ export default function SiteCard({
 
   return (
     <article className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3">
-      <div className="relative p-3 pb-5">
+      <div className="relative p-3">
         <div className="flex items-center gap-2 mb-1">
-          <div className="inline-flex items-center justify-center">
+          <div className="inline-flex items-center justify-center text-lg">
             {icon}
           </div>
-          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
-            {site.name}
-          </h3>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+              {site.name}
+            </h3>
+            {site.domain && (
+              <p className="text-xs text-gray-400 dark:text-gray-500 truncate">
+                {site.domain}
+              </p>
+            )}
+          </div>
         </div>
-        {site.domain && (
-          <p className="text-xs text-gray-400 dark:text-gray-500 mb-2 ml-8">
-            {site.domain}
-          </p>
-        )}
         {site.description && (
-          <p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
+          <p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2 ml-8">
             {site.description}
           </p>
         )}
-        <div className="flex items-center gap-1.5 mb-2 flex-wrap">
+        <div className="flex items-center gap-1.5 mt-2 mb-2 flex-wrap">
           <SiteTypeBadge hostingType={site.hosting_type} size="xs" />
           {site.industry_name && (
             <Badge variant="soft" color="warning" size="xs">
@@ -81,11 +67,6 @@ export default function SiteCard({
           <Badge variant="soft" color="neutral" size="xs">
             {site.active_sectors_count} / 5 Sectors
           </Badge>
-          {site.status && (
-            <Badge variant={site.is_active ? 'solid' : 'soft'} color={site.status === 'active' ? 'success' : 'neutral'} size="xs">
-              {site.status}
-            </Badge>
-          )}
         </div>
         {/* Setup Checklist - Compact View */}
         <div className="mt-2">
@@ -99,19 +80,25 @@ export default function SiteCard({
             compact={true}
           />
         </div>
-        {/* Status Text and Circle - Same row */}
+        {/* Status badge and toggle in top right */}
         <div className="absolute top-3 right-3 flex items-center gap-2">
-          <span className={`text-sm ${statusText.color} ${statusText.bold ? 'font-bold' : ''} transition-colors duration-200`}>
-            {statusText.text}
-          </span>
-          <div
-            className={`w-[20px] h-[20px] rounded-full ${getStatusColor()} transition-colors duration-200`}
-            title={site.is_active ? 'Active site' : 'Inactive site'}
+          <Switch
+            label=""
+            checked={site.is_active}
+            disabled={isToggling}
+            onChange={handleToggle}
           />
+          <Badge 
+            variant="solid"
+            color={site.is_active ? "success" : "error"} 
+            size="xs"
+          >
+            {site.is_active ? 'Active' : 'Inactive'}
+          </Badge>
         </div>
       </div>
-      <div className="flex items-center justify-between border-t border-gray-200 p-2 dark:border-gray-800">
-        <div className="flex gap-1.5 flex-1">
+      <div className="flex items-center justify-center border-t border-gray-200 p-2 dark:border-gray-800">
+        <div className="flex gap-1.5">
           <Button
             variant="primary"
             tone="brand"
@@ -140,12 +127,6 @@ export default function SiteCard({
             Settings
           </Button>
         </div>
-        <Switch
-          label=""
-          checked={site.is_active}
-          disabled={isToggling}
-          onChange={handleToggle}
-        />
       </div>
     </article>
   );
diff --git a/frontend/src/components/ui/badge/Badge.tsx b/frontend/src/components/ui/badge/Badge.tsx
index 417dd37c..b18f8ea7 100644
--- a/frontend/src/components/ui/badge/Badge.tsx
+++ b/frontend/src/components/ui/badge/Badge.tsx
@@ -105,9 +105,9 @@ const toneStyles: Record<
 };
 
 const sizeClasses: Record<BadgeSize, string> = {
-  xs: "min-h-[20px] px-2.5 py-1 leading-[1.4]",
-  sm: "min-h-[24px] px-3 py-1 leading-[1.4]",
-  md: "min-h-[28px] px-3.5 py-1.5 leading-[1.4]",
+  xs: "min-h-[18px] px-1.5 py-0.5 text-xs leading-tight",
+  sm: "min-h-[22px] px-2 py-0.5 text-xs leading-tight",
+  md: "min-h-[26px] px-3 py-1 text-sm leading-tight",
 };
 
 const Badge: React.FC<BadgeProps> = ({
diff --git a/frontend/src/components/ui/card/Card.tsx b/frontend/src/components/ui/card/Card.tsx
index 4735f20d..f0ca72ed 100644
--- a/frontend/src/components/ui/card/Card.tsx
+++ b/frontend/src/components/ui/card/Card.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import Button from "../button/Button";
 
 type CardVariant = "surface" | "panel" | "frosted" | "borderless" | "gradient";
-type CardPadding = "none" | "sm" | "md" | "lg";
+type CardPadding = "none" | "xs" | "sm" | "md" | "lg";
 type CardShadow = "none" | "sm" | "md";
 
 interface CardProps {
@@ -37,6 +37,7 @@ export const Card: React.FC<CardProps> = ({
 
   const paddingClasses: Record<CardPadding, string> = {
     none: "p-0",
+    xs: "p-3",
     sm: "p-4 sm:p-5",
     md: "p-5 sm:p-6",
     lg: "p-6 sm:p-8",
diff --git a/frontend/src/pages/Sites/List.tsx b/frontend/src/pages/Sites/List.tsx
index c7a9f050..36d63b27 100644
--- a/frontend/src/pages/Sites/List.tsx
+++ b/frontend/src/pages/Sites/List.tsx
@@ -393,37 +393,41 @@ export default function SiteList() {
   const renderGridView = () => (
     <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
       {filteredSites.map((site) => (
-        <Card key={site.id} className="rounded-xl border-2 border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
-          <div className="relative p-4 pb-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="size-6 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md flex-shrink-0">
-                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <Card key={site.id} padding="xs" className="rounded-xl border-2 border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
+          <div className="relative">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="size-8 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md flex-shrink-0">
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
-              <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
-                {site.name}
-              </h3>
+              <div className="flex-1 min-w-0">
+                <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+                  {site.name}
+                </h3>
+                {site.domain && (
+                  <p className="text-xs text-gray-400 dark:text-gray-500 truncate">
+                    {site.domain}
+                  </p>
+                )}
+              </div>
             </div>
-            <p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
-              {site.description || 'No description'}
-            </p>
-            {site.domain && (
-              <p className="text-xs text-gray-400 dark:text-gray-500 mb-2">
-                {site.domain}
+            {site.description && (
+              <p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2 ml-10">
+                {site.description}
               </p>
             )}
-            {/* Centered badges with uniform size */}
-            <div className="flex items-center justify-center gap-2 mb-2 flex-wrap">
-              <SiteTypeBadge hostingType={site.hosting_type} size="sm" />
+            {/* Centered badges with smaller size */}
+            <div className="flex items-center justify-center gap-1.5 mt-3 mb-2 flex-wrap">
+              <SiteTypeBadge hostingType={site.hosting_type} size="xs" />
               {site.industry_name && (
-                <Badge variant="soft" color="warning" size="sm">
+                <Badge variant="soft" color="warning" size="xs">
                   {site.industry_name}
                 </Badge>
               )}
             </div>
             {/* Status badge and toggle in top right */}
-            <div className="absolute top-4 right-4 flex items-center gap-3">
+            <div className="absolute top-0 right-0 flex items-center gap-2">
               <Switch
                 checked={site.is_active}
                 onChange={(enabled) => handleToggle(site.id, enabled)}
@@ -439,7 +443,7 @@ export default function SiteList() {
             </div>
           </div>
           {/* Centered button row */}
-          <div className="border-t border-gray-200 p-3 dark:border-gray-800">
+          <div className="border-t border-gray-200 mt-3 -mx-3 -mb-3 px-3 py-2 dark:border-gray-800">
             <div className="flex justify-center gap-2">
               <Button
                 onClick={() => navigate(`/sites/${site.id}`)}