From 6befdfe01e432229a385a9ce14b7748af95343fd Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Sun, 26 Apr 2026 16:50:40 -0700
Subject: [PATCH] improve cert restart button style

---
 messages/en-US.json                  |  2 +-
 src/components/CertificateStatus.tsx | 61 +++++++++++++++++++---------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index c566d500e..5d4facf1c 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1596,7 +1596,7 @@
     "initialSetupDescription": "Create the intial server admin account. Only one server admin can exist. You can always change these credentials later.",
     "createAdminAccount": "Create Admin Account",
     "setupErrorCreateAdmin": "An error occurred while creating the server admin account.",
-    "certificateStatus": "Certificate Status",
+    "certificateStatus": "Certificate",
     "loading": "Loading",
     "loadingAnalytics": "Loading Analytics",
     "restart": "Restart",
diff --git a/src/components/CertificateStatus.tsx b/src/components/CertificateStatus.tsx
index 7dd9c5dd2..daf373783 100644
--- a/src/components/CertificateStatus.tsx
+++ b/src/components/CertificateStatus.tsx
@@ -117,6 +117,8 @@ export default function CertificateStatus({
         );
     }
 
+    const isPending = cert.status === "pending";
+
     return (
         <div className={`flex items-center gap-2 ${className}`}>
             {showLabel && (
@@ -124,27 +126,46 @@ export default function CertificateStatus({
                     {t("certificateStatus")}:
                 </span>
             )}
-            <span className={`text-sm ${getStatusColor(cert.status)}`}>
-                <span className="inline-flex items-center">
-                    {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
-                    {shouldShowRefreshButton(cert.status, cert.updatedAt) && (
-                        <Button
-                            size="icon"
-                            variant="ghost"
-                            className="ml-2 p-0 h-auto align-middle"
-                            onClick={handleRefresh}
-                            disabled={refreshing}
-                            title={t("restartCertificate", {
-                                defaultValue: "Restart Certificate"
-                            })}
-                        >
-                            <RotateCw
-                                className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`}
-                            />
-                        </Button>
-                    )}
+            {isPending ? (
+                <Button
+                    variant="ghost"
+                    className={`h-auto p-0 text-sm ${getStatusColor(cert.status)}`}
+                    onClick={handleRefresh}
+                    disabled={refreshing}
+                    title={t("restartCertificate", {
+                        defaultValue: "Restart Certificate"
+                    })}
+                >
+                    <span className="inline-flex items-center gap-1">
+                        {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
+                        <RotateCw
+                            className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`}
+                        />
+                    </span>
+                </Button>
+            ) : (
+                <span className={`text-sm ${getStatusColor(cert.status)}`}>
+                    <span className="inline-flex items-center gap-1">
+                        {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
+                        {shouldShowRefreshButton(cert.status, cert.updatedAt) && (
+                            <Button
+                                size="icon"
+                                variant="ghost"
+                                className="p-0 w-3 h-auto align-middle"
+                                onClick={handleRefresh}
+                                disabled={refreshing}
+                                title={t("restartCertificate", {
+                                    defaultValue: "Restart Certificate"
+                                })}
+                            >
+                                <RotateCw
+                                    className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
+                                />
+                            </Button>
+                        )}
+                    </span>
                 </span>
-            </span>
+            )}
         </div>
     );
 }