From 10a1d17b820a652775e3795379ce41d9ef22b4f5 Mon Sep 17 00:00:00 2001
From: Maxime Beauchamp <maximebeauchamp7@gmail.com>
Date: Thu, 9 May 2024 12:02:27 -0400
Subject: [PATCH] fix(deploy-web): styling fixes

---
 .../deployments/DeploymentListRow.tsx         | 22 +++++++++++++------
 .../src/components/sdl/GpuFormControl.tsx     |  2 +-
 deploy-web/src/components/shared/Spinner.tsx  |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/deploy-web/src/components/deployments/DeploymentListRow.tsx b/deploy-web/src/components/deployments/DeploymentListRow.tsx
index 9611c782a..ac00d038c 100644
--- a/deploy-web/src/components/deployments/DeploymentListRow.tsx
+++ b/deploy-web/src/components/deployments/DeploymentListRow.tsx
@@ -23,7 +23,7 @@ import { PricePerMonth } from "../shared/PricePerMonth";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { useDenomData } from "@src/hooks/useWalletBalance";
 import { TableCell, TableRow } from "../ui/table";
-import { WarningCircle, MoreHoriz, InfoCircle, NavArrowRight, Plus, Edit, XmarkSquare, Upload } from "iconoir-react";
+import { WarningCircle, MoreHoriz, InfoCircle, NavArrowRight, Plus, Edit, XmarkSquare, Upload, WarningTriangle } from "iconoir-react";
 import { CustomDropdownLinkItem } from "../shared/CustomDropdownLinkItem";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
@@ -62,7 +62,8 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
         <CustomTooltip
           title={
             <>
-              {deployment.name}-{deployment.dseq}
+              <div>{deployment.name}</div>
+              <small>{deployment.dseq}</small>
             </>
           }
         >
@@ -74,7 +75,14 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
           </span>
         </CustomTooltip>
       ) : (
-        <CustomTooltip title={deployment.dseq}>
+        <CustomTooltip
+          title={
+            <>
+              <div>{deployment.name}</div>
+              <small>{deployment.dseq}</small>
+            </>
+          }
+        >
           <span className="text-sm">
             <strong>{deployment.name}</strong>
             <span className="inline text-xs">
@@ -185,8 +193,8 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
         <TableCell className="max-w-[100px] text-center">{deploymentName}</TableCell>
         <TableCell className="text-center">
           {isActive && isValidTimeLeft && realTimeLeft && (
-            <span>
-              ~{formatDistanceToNow(realTimeLeft?.timeLeft)}
+            <div className="inline-flex items-center space-x-2">
+              <span>~{formatDistanceToNow(realTimeLeft?.timeLeft)}</span>
               {showTimeLeftWarning && (
                 <CustomTooltip
                   title={
@@ -199,10 +207,10 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                     </>
                   }
                 >
-                  <WarningCircle className="ml-2 text-xs text-destructive-foreground" />
+                  <WarningTriangle className="text-xs text-warning" />
                 </CustomTooltip>
               )}
-            </span>
+            </div>
           )}
         </TableCell>
         <TableCell className="text-center">
diff --git a/deploy-web/src/components/sdl/GpuFormControl.tsx b/deploy-web/src/components/sdl/GpuFormControl.tsx
index 343b44f1d..67c1583e3 100644
--- a/deploy-web/src/components/sdl/GpuFormControl.tsx
+++ b/deploy-web/src/components/sdl/GpuFormControl.tsx
@@ -48,7 +48,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
   };
 
   return (
-    <FormPaper className="p-4">
+    <FormPaper>
       <div className="flex items-center">
         <Controller
           control={control}
diff --git a/deploy-web/src/components/shared/Spinner.tsx b/deploy-web/src/components/shared/Spinner.tsx
index 1b07cb2d7..49b29c496 100644
--- a/deploy-web/src/components/shared/Spinner.tsx
+++ b/deploy-web/src/components/shared/Spinner.tsx
@@ -13,7 +13,7 @@ export default function Spinner({ className, size = "medium", variant = "primary
       <svg
         aria-hidden="true"
         className={cn("animate-spin ", {
-          "fill-red-200 text-red-500": variant === "primary",
+          "fill-red-200 text-red-500 dark:text-transparent/20 dark:fill-red-500": variant === "primary",
           "fill-red-500 text-white": variant === "dark",
           "h-4 w-4": size === "small",
           "h-8 w-8": size === "medium",