improve cert restart button style

This commit is contained in:
miloschwartz
2026-04-26 16:50:40 -07:00
parent 5695137280
commit 6befdfe01e
2 changed files with 42 additions and 21 deletions

View File

@@ -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>
);
}