chore: padding in table rows (#1313)

GaloyMoney · Feb 4, 2025 · dbebd53 · dbebd53
1 parent 3fb50fd
commit dbebd53
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 27 deletions.
diff --git a/apps/admin-panel/app/credit-facilities/list.tsx b/apps/admin-panel/app/credit-facilities/list.tsx
@@ -121,7 +121,12 @@ const columns: Column<CreditFacility>[] = [
   {
     key: "status",
     label: "Status",
-    render: (status) => <LoanAndCreditFacilityStatusBadge status={status} />,
+    render: (status) => (
+      <LoanAndCreditFacilityStatusBadge
+        className="flex items-center justify-center text-center min-h-full min-w-full"
+        status={status}
+      />
+    ),
     filterValues: Object.values(CreditFacilityStatus),
   },
   {
@@ -133,7 +138,7 @@ const columns: Column<CreditFacility>[] = [
   },
   {
     key: "collateralizationState",
-    label: "Collateralization State",
+    label: "State",
     render: (state) => formatCollateralizationState(state),
     filterValues: Object.values(CollateralizationState),
   },

diff --git a/apps/admin-panel/app/loans/status-badge.tsx b/apps/admin-panel/app/loans/status-badge.tsx
@@ -13,6 +13,8 @@ const getVariant = (status: CreditFacilityStatus) => {
       return "success"
     case CreditFacilityStatus.PendingApproval:
       return "default"
+    case CreditFacilityStatus.PendingCollateralization:
+      return "warning"
     default:
       return "secondary"
   }

diff --git a/apps/admin-panel/components/data-table/index.tsx b/apps/admin-panel/components/data-table/index.tsx
@@ -213,11 +213,8 @@ const DataTable = <T,>({
         ))}
       </div>
     ) : (
-      <div
-        className="w-full overflow-x-auto border rounded-md"
-        data-testid="loading-skeleton"
-      >
-        <Table className={className}>
+      <div className="overflow-x-auto border rounded-md" data-testid="loading-skeleton">
+        <Table className={cn("table-fixed w-full", className)}>
           <TableHeader className="bg-secondary [&_tr:hover]:!bg-secondary">
             <TableRow className={headerClassName}>
               {columns.map((column, index) => (
@@ -229,23 +226,25 @@ const DataTable = <T,>({
                   )}
                   style={{ width: column.width }}
                 >
-                  {column.header}
+                  <div className="flex items-center space-x-2 justify-between">
+                    <span>{column.header}</span>
+                  </div>
                 </TableHead>
               ))}
-              {navigateTo && <TableHead className="w-24"></TableHead>}
+              {navigateTo && <TableHead className="w-24" />}
             </TableRow>
           </TableHeader>
           <TableBody>
             {Array.from({ length: 5 }).map((_, rowIndex) => (
               <TableRow key={rowIndex}>
                 {columns.map((_, colIndex) => (
-                  <TableCell key={colIndex}>
-                    <Skeleton className="h-4 w-full" />
+                  <TableCell key={colIndex} className="h-[3.8rem]">
+                    <Skeleton className="h-9 w-full" />
                   </TableCell>
                 ))}
                 {navigateTo && (
-                  <TableCell>
-                    <Skeleton className="h-4 w-full" />
+                  <TableCell className="h-[3.8rem]">
+                    <Skeleton className="h-9 w-full" />
                   </TableCell>
                 )}
               </TableRow>
@@ -331,7 +330,7 @@ const DataTable = <T,>({
   return (
     <div
       ref={tableRef}
-      className="w-full overflow-x-auto border rounded-md focus:outline-none"
+      className="overflow-x-auto border rounded-md focus:outline-none"
       tabIndex={0}
       role="grid"
       onFocus={() => setIsTableFocused(true)}
@@ -342,7 +341,7 @@ const DataTable = <T,>({
         }
       }}
     >
-      <Table className={className}>
+      <Table className={cn("table-fixed w-full", className)}>
         <TableHeader className="bg-secondary [&_tr:hover]:!bg-secondary">
           <TableRow className={headerClassName}>
             {columns.map((column, index) => (
@@ -354,10 +353,12 @@ const DataTable = <T,>({
                 )}
                 style={{ width: column.width }}
               >
-                {column.header}
+                <div className="flex items-center space-x-2 justify-between">
+                  <span>{column.header}</span>
+                </div>
               </TableHead>
             ))}
-            {navigateTo && <TableHead className="w-24"></TableHead>}
+            {navigateTo && <TableHead className="w-24" />}
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -383,6 +384,7 @@ const DataTable = <T,>({
                 <TableCell
                   key={colIndex}
                   className={cn(
+                    "whitespace-normal break-words h-[3.8rem]",
                     column.align === "center" && "text-center",
                     column.align === "right" && "text-right",
                     typeof cellClassName === "function"
@@ -396,7 +398,7 @@ const DataTable = <T,>({
                 </TableCell>
               ))}
               {shouldShowNavigation(item) && (
-                <TableCell>
+                <TableCell className="h-[3.8rem]">
                   <Link href={getNavigationUrl(item) || ""}>
                     <Button
                       variant="outline"

diff --git a/apps/admin-panel/components/paginated-table/index.tsx b/apps/admin-panel/components/paginated-table/index.tsx
@@ -276,11 +276,37 @@ const PaginatedTable = <T,>({
       </div>
     ) : (
       <div className="overflow-x-auto border rounded-md">
-        <Table>
+        <Table className="table-fixed w-full">
           <TableHeader className="bg-secondary [&_tr:hover]:!bg-secondary">
             <TableRow>
               {columns.map((col) => (
-                <TableHead key={col.key as string}>{col.label}</TableHead>
+                <TableHead key={col.key as string}>
+                  <div className="flex items-center space-x-2 justify-between">
+                    <span>{col.label}</span>
+                    <div className="flex items-center">
+                      {col.sortable && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-9 w-8 p-0"
+                          disabled
+                        >
+                          <HiSelector className="h-4 w-4" />
+                        </Button>
+                      )}
+                      {col.filterValues && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-9 w-8 p-0"
+                          disabled
+                        >
+                          <HiFilter className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                </TableHead>
               ))}
               {navigateTo && <TableHead className="w-24" />}
             </TableRow>
@@ -289,19 +315,31 @@ const PaginatedTable = <T,>({
             {Array.from({ length: pageSize }).map((_, rowIndex) => (
               <TableRow key={rowIndex}>
                 {columns.map((_, colIndex) => (
-                  <TableCell key={colIndex}>
-                    <Skeleton className="h-4 w-full" />
+                  <TableCell key={colIndex} className="h-[3.8rem]">
+                    <Skeleton className="h-9 w-full" />
                   </TableCell>
                 ))}
                 {navigateTo && (
-                  <TableCell>
-                    <Skeleton className="h-4 w-full" />
+                  <TableCell className="h-[3.8rem]">
+                    <Skeleton className="h-9 w-full" />
                   </TableCell>
                 )}
               </TableRow>
             ))}
           </TableBody>
         </Table>
+        <Separator />
+        <div className="flex items-center justify-end space-x-4 py-2 mr-2">
+          <Button variant="outline" size="sm" disabled>
+            <HiChevronLeft className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center gap-1">
+            <span className="text-sm font-medium">1</span>
+          </div>
+          <Button variant="outline" size="sm" disabled>
+            <HiChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
     )
   }
@@ -525,7 +563,7 @@ const PaginatedTable = <T,>({
                 {columns.map((col) => (
                   <TableCell
                     key={col.key as string}
-                    className="whitespace-normal break-words"
+                    className="whitespace-normal break-words h-[3.8rem]"
                   >
                     {col.render ? col.render(node[col.key], node) : String(node[col.key])}
                   </TableCell>

diff --git a/lib/js/shared-web/global.css b/lib/js/shared-web/global.css
@@ -40,8 +40,11 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
 
     /* CUSTOM */
-    --success: 142.1 70.6% 45.3%;
-    --success-foreground: 144.9 80.4% 10%;
+    --success: 173 58% 39%;
+    --success-foreground: 0 0% 98%;
+
+    --warning: 12 76% 61%;
+    --warning-foreground: 0 0% 98%;
   }
 
   .dark {

diff --git a/lib/js/shared-web/src/ui/badge.tsx b/lib/js/shared-web/src/ui/badge.tsx
@@ -17,6 +17,8 @@ const badgeVariants = cva(
         success:
           "border-transparent bg-success text-success-foreground shadow hover:bg-success/80",
         outline: "border-[#343a40] text-[#343a40] bg-[#343a400d]",
+        warning:
+          "border-transparent bg-warning text-primary-foreground shadow hover:bg-warning/80",
       },
     },
     defaultVariants: {

diff --git a/lib/js/shared-web/tailwind.config.ts b/lib/js/shared-web/tailwind.config.ts
@@ -53,6 +53,7 @@ const tailwindConfig = {
         },
         warning: {
           DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
         },
         chart: {
           "1": "hsl(var(--chart-1))",