Chore: upgrade to tailwind v4 (#4863)

This commit is contained in:
shamoon
2025-03-02 08:42:57 -08:00
committed by GitHub
parent fdf405fe0a
commit d55a5e5efe
28 changed files with 945 additions and 1165 deletions

View File

@@ -34,7 +34,8 @@ export default function Item({ service, groupName, useEqualHeights }) {
<li key={service.name} id={service.id} className="service" data-name={service.name || ""}>
<div
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
settings.cardBlur !== undefined &&
`backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
useEqualHeights && "h-[calc(100%-0.5rem)]",
"transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
)}
@@ -46,13 +47,13 @@ export default function Item({ service, groupName, useEqualHeights }) {
href={service.href}
target={service.target ?? settings.target ?? "_blank"}
rel="noreferrer"
className="flex-shrink-0 flex items-center justify-center w-12 service-icon z-10"
className="shrink-0 flex items-center justify-center w-12 service-icon z-10"
aria-label={service.icon}
>
<ResolvedIcon icon={service.icon} />
</a>
) : (
<div className="flex-shrink-0 flex items-center justify-center w-12 service-icon z-10">
<div className="shrink-0 flex items-center justify-center w-12 service-icon z-10">
<ResolvedIcon icon={service.icon} />
</div>
))}
@@ -88,14 +89,14 @@ export default function Item({ service, groupName, useEqualHeights }) {
} z-10 service-tags`}
>
{service.ping && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
<div className="shrink-0 flex items-center justify-center service-tag service-ping">
<Ping groupName={groupName} serviceName={service.name} style={statusStyle} />
<span className="sr-only">Ping status</span>
</div>
)}
{service.siteMonitor && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-site-monitor">
<div className="shrink-0 flex items-center justify-center service-tag service-site-monitor">
<SiteMonitor groupName={groupName} serviceName={service.name} style={statusStyle} />
<span className="sr-only">Site monitor status</span>
</div>
@@ -105,7 +106,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
>
<Status service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
@@ -115,7 +116,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
>
<KubernetesStatus service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
@@ -127,7 +128,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
{service.container && service.server && (
<div
className={classNames(
showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-[0] opacity-0",
showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-0 opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
)}
>
@@ -139,7 +140,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
{service.app && (
<div
className={classNames(
showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-0 opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
)}
>