From f03389a9a002b5c35f63a3f17b28898786c64c8f Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Wed, 29 Apr 2026 12:14:21 -0700
Subject: [PATCH] fix cert styling

---
 src/components/CertificateStatus.tsx    | 58 +++++++++++++++++--------
 src/components/InternalResourceForm.tsx |  4 +-
 src/components/ResourceInfoBox.tsx      |  6 +--
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/components/CertificateStatus.tsx b/src/components/CertificateStatus.tsx
index 660fad62b..0d4fa9026 100644
--- a/src/components/CertificateStatus.tsx
+++ b/src/components/CertificateStatus.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Loader2, RotateCw } from "lucide-react";
+import { CheckCircle2, Clock, Loader2, RotateCw, XCircle } from "lucide-react";
 import { useCertificate } from "@app/hooks/useCertificate";
 import { useTranslations } from "next-intl";
 
@@ -59,6 +59,21 @@ export default function CertificateStatus({
         }
     };
 
+    const getStatusIcon = (status: string) => {
+        switch (status) {
+            case "valid":
+                return CheckCircle2;
+            case "pending":
+            case "requested":
+                return Clock;
+            case "expired":
+            case "failed":
+                return XCircle;
+            default:
+                return Clock;
+        }
+    };
+
     const shouldShowRefreshButton = (status: string, updatedAt: number) => {
         return (
             status === "failed" ||
@@ -78,9 +93,9 @@ export default function CertificateStatus({
                         {t("certificateStatus")}:
                     </span>
                 )}
-                <span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5 text-sm">
                     <Loader2
-                        className="h-3.5 w-3.5 shrink-0 animate-spin"
+                        className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground"
                         aria-hidden
                     />
                     {t("loading")}
@@ -97,7 +112,10 @@ export default function CertificateStatus({
                         {t("certificateStatus")}:
                     </span>
                 )}
-                <span className="text-sm text-red-500">{certError}</span>
+                <span className="inline-flex items-center gap-1.5 text-sm">
+                    <XCircle className="h-4 w-4 shrink-0 text-red-500" />
+                    {certError}
+                </span>
             </div>
         );
     }
@@ -110,7 +128,8 @@ export default function CertificateStatus({
                         {t("certificateStatus")}:
                     </span>
                 )}
-                <span className="text-sm text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5 text-sm">
+                    <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
                     {t("none", { defaultValue: "None" })}
                 </span>
             </div>
@@ -119,6 +138,7 @@ export default function CertificateStatus({
 
     const isPending = cert.status === "pending";
     const disableRestartButton = cert.domainType === "wildcard";
+    const StatusIcon = getStatusIcon(cert.status);
 
     return (
         <div className={`flex items-center gap-2 ${className}`}>
@@ -127,17 +147,20 @@ export default function CertificateStatus({
                     {t("certificateStatus")}:
                 </span>
             )}
-            {isPending ? (
+            {isPending && !disableRestartButton ? (
                 <Button
                     variant="ghost"
-                    className={`h-auto p-0 text-sm ${getStatusColor(cert.status)}`}
+                    className="h-auto p-0 text-sm font-normal"
                     onClick={handleRefresh}
-                    disabled={refreshing || disableRestartButton}
+                    disabled={refreshing}
                     title={t("restartCertificate", {
                         defaultValue: "Restart Certificate"
                     })}
                 >
-                    <span className="inline-flex items-center gap-1">
+                    <span className="inline-flex items-center gap-2">
+                        <StatusIcon
+                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
+                        />
                         {cert.status.charAt(0).toUpperCase() +
                             cert.status.slice(1)}
                         <RotateCw
@@ -146,20 +169,21 @@ export default function CertificateStatus({
                     </span>
                 </Button>
             ) : (
-                <span className={`text-sm ${getStatusColor(cert.status)}`}>
-                    <span className="inline-flex items-center gap-1">
+                <span className="text-sm">
+                    <span className="inline-flex items-center gap-2">
+                        <StatusIcon
+                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
+                        />
                         {cert.status.charAt(0).toUpperCase() +
                             cert.status.slice(1)}
-                        {shouldShowRefreshButton(
-                            cert.status,
-                            cert.updatedAt
-                        ) && (
+                        {shouldShowRefreshButton(cert.status, cert.updatedAt) &&
+                        !disableRestartButton ? (
                             <Button
                                 size="icon"
                                 variant="ghost"
                                 className="p-0 w-3 h-auto align-middle"
                                 onClick={handleRefresh}
-                                disabled={refreshing || disableRestartButton}
+                                disabled={refreshing}
                                 title={t("restartCertificate", {
                                     defaultValue: "Restart Certificate"
                                 })}
@@ -168,7 +192,7 @@ export default function CertificateStatus({
                                     className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
                                 />
                             </Button>
-                        )}
+                        ) : null}
                     </span>
                 </span>
             )}
diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx
index 56bca891f..62e4fc611 100644
--- a/src/components/InternalResourceForm.tsx
+++ b/src/components/InternalResourceForm.tsx
@@ -1154,8 +1154,8 @@ export function InternalResourceForm({
                                             resource.fullDomain &&
                                         build != "oss" &&
                                         form.watch("ssl") && (
-                                            <div className="flex items-center gap-1 pt-1">
-                                                <span className="text-sm font-medium text-muted-foreground">
+                                            <div className="flex items-center gap-2 pt-1">
+                                                <span className="text-sm font-medium">
                                                     {t("certificateStatus")}:
                                                 </span>
                                                 <CertificateStatus
diff --git a/src/components/ResourceInfoBox.tsx b/src/components/ResourceInfoBox.tsx
index de600a237..cd8e6ec8b 100644
--- a/src/components/ResourceInfoBox.tsx
+++ b/src/components/ResourceInfoBox.tsx
@@ -69,12 +69,12 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     authInfo.whitelist ||
                                     authInfo.headerAuth ? (
                                         <div className="flex items-start space-x-2">
-                                            <ShieldCheck className="w-4 h-4 mt-0.5 flex-shrink-0 text-green-500" />
+                                            <ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" />
                                             <span>{t("protected")}</span>
                                         </div>
                                     ) : (
-                                        <div className="flex items-center space-x-2 text-yellow-500">
-                                            <ShieldOff className="w-4 h-4 flex-shrink-0" />
+                                        <div className="flex items-center space-x-2">
+                                            <ShieldOff className="w-4 h-4 flex-shrink-0 text-yellow-500" />
                                             <span>{t("notProtected")}</span>
                                         </div>
                                     )}