From d6488e69b93f9dcf7d56e7401f059ca177202846 Mon Sep 17 00:00:00 2001
From: Steven Loria <git@stevenloria.com>
Date: Wed, 25 Mar 2026 22:45:27 -0400
Subject: [PATCH] Remove usages of red for non-destructive, reversible UI

---
 ui/src/components/alerts/details.tsx            | 2 +-
 ui/src/components/docker/container-selector.tsx | 4 ++--
 ui/src/components/docker/link.tsx               | 6 +++---
 ui/src/components/log-section.tsx               | 6 +++---
 ui/src/components/stack-service-selector.tsx    | 4 ++--
 ui/src/components/tags/filter.tsx               | 4 ++--
 ui/src/components/updates/details.tsx           | 2 +-
 ui/src/pages/alerts.tsx                         | 4 ++--
 ui/src/pages/profile/index.tsx                  | 1 -
 ui/src/pages/swarm/config/index.tsx             | 2 +-
 ui/src/pages/swarm/secret/index.tsx             | 2 +-
 ui/src/pages/updates.tsx                        | 4 ++--
 ui/src/resources/alerter/index.tsx              | 4 ++--
 ui/src/resources/selector.tsx                   | 4 ++--
 ui/src/resources/server/docker/images.tsx       | 2 +-
 ui/src/resources/server/docker/networks.tsx     | 2 +-
 ui/src/resources/server/docker/volumes.tsx      | 2 +-
 ui/src/resources/swarm/config.tsx               | 2 +-
 ui/src/resources/swarm/docker/configs.tsx       | 2 +-
 ui/src/resources/swarm/docker/secrets.tsx       | 2 +-
 ui/src/ui/enable-switch.tsx                     | 4 +---
 21 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/ui/src/components/alerts/details.tsx b/ui/src/components/alerts/details.tsx
index a99487ea1..a08dfdc91 100644
--- a/ui/src/components/alerts/details.tsx
+++ b/ui/src/components/alerts/details.tsx
@@ -98,7 +98,7 @@ export function AlertDetailsContent({
       {/** HEADER */}
       <Group justify="space-between">
         <Text fz="h1">{fmtUpperCamelcase(alert.data.type)}</Text>
-        <ActionIcon size="lg" variant="filled" color="red" onClick={close}>
+        <ActionIcon size="lg" variant="subtle" color="dimmed" onClick={close}>
           <ICONS.Clear size="1.3rem" />
         </ActionIcon>
       </Group>
diff --git a/ui/src/components/docker/container-selector.tsx b/ui/src/components/docker/container-selector.tsx
index 44e63bf87..3634ce61b 100644
--- a/ui/src/components/docker/container-selector.tsx
+++ b/ui/src/components/docker/container-selector.tsx
@@ -86,8 +86,8 @@ export default function ContainerSelector({
               {clearable && (
                 <ActionIcon
                   size="sm"
-                  variant="filled"
-                  color="red"
+                  variant="subtle"
+                  color="dimmed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onSelect?.("");
diff --git a/ui/src/components/docker/link.tsx b/ui/src/components/docker/link.tsx
index a43752c28..14449a58f 100644
--- a/ui/src/components/docker/link.tsx
+++ b/ui/src/components/docker/link.tsx
@@ -82,7 +82,7 @@ export const DOCKER_LINK_ICONS: {
       : noContainers
         ? ["none", "host", "bridge"].includes(name)
           ? "None"
-          : "Critical"
+          : "Neutral"
         : "Good";
     return <ICONS.Network size={size} color={hexColorByIntention(intention)} />;
   },
@@ -92,7 +92,7 @@ export const DOCKER_LINK_ICONS: {
     const noContainers = !name
       ? false
       : containers.every((container) => container.image_id !== name);
-    const intention = !name ? "Warning" : noContainers ? "Critical" : "Good";
+    const intention = !name ? "Warning" : noContainers ? "Neutral" : "Good";
     return <ICONS.Image size={size} color={hexColorByIntention(intention)} />;
   },
   Volume: ({ serverId, name, size = "1rem" }) => {
@@ -101,7 +101,7 @@ export const DOCKER_LINK_ICONS: {
     const noContainers = !name
       ? false
       : containers.every((container) => !container.volumes?.includes(name));
-    const intention = !name ? "Warning" : noContainers ? "Critical" : "Good";
+    const intention = !name ? "Warning" : noContainers ? "Neutral" : "Good";
     return <ICONS.Volume size={size} color={hexColorByIntention(intention)} />;
   },
 };
diff --git a/ui/src/components/log-section.tsx b/ui/src/components/log-section.tsx
index 07943e6ac..2698fb38a 100644
--- a/ui/src/components/log-section.tsx
+++ b/ui/src/components/log-section.tsx
@@ -135,8 +135,8 @@ export function LogSectionInner({
           {terms.map((term, index) => (
             <Button
               key={term}
-              variant="filled"
-              color="red"
+              variant="outline"
+              color="dimmed"
               rightSection={<ICONS.Remove size="1rem" />}
               onClick={() => setTerms(terms.filter((_, i) => i !== index))}
             >
@@ -157,7 +157,7 @@ export function LogSectionInner({
             rightSection={
               <ActionIcon
                 onClick={clearSearch}
-                color="red"
+                color="dimmed"
                 disabled={!terms.length}
               >
                 <ICONS.Delete size="1rem" />
diff --git a/ui/src/components/stack-service-selector.tsx b/ui/src/components/stack-service-selector.tsx
index e9fe1db5a..b11965755 100644
--- a/ui/src/components/stack-service-selector.tsx
+++ b/ui/src/components/stack-service-selector.tsx
@@ -105,8 +105,8 @@ export default function StackServiceSelector({
               {clearable && (
                 <ActionIcon
                   size="sm"
-                  variant="filled"
-                  color="red"
+                  variant="subtle"
+                  color="dimmed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onSelect?.("");
diff --git a/ui/src/components/tags/filter.tsx b/ui/src/components/tags/filter.tsx
index 129483023..ebbe07df8 100644
--- a/ui/src/components/tags/filter.tsx
+++ b/ui/src/components/tags/filter.tsx
@@ -14,7 +14,7 @@ export default function TagsFilter() {
     <>
       <Group gap="xs" visibleFrom="xs">
         {tags.length > 0 && (
-          <ActionIcon color="red" onClick={clear_tags} opacity={0.7}>
+          <ActionIcon color="dimmed" onClick={clear_tags}>
             <ICONS.Clear size="1rem" />{" "}
           </ActionIcon>
         )}
@@ -51,7 +51,7 @@ export default function TagsFilter() {
             />
 
             {tags.length > 0 && (
-              <ActionIcon color="red" onClick={clear_tags} opacity={0.7}>
+              <ActionIcon color="dimmed" onClick={clear_tags}>
                 <ICONS.Clear size="1rem" />{" "}
               </ActionIcon>
             )}
diff --git a/ui/src/components/updates/details.tsx b/ui/src/components/updates/details.tsx
index c69f47279..f971fb361 100644
--- a/ui/src/components/updates/details.tsx
+++ b/ui/src/components/updates/details.tsx
@@ -86,7 +86,7 @@ export function UpdateDetailsContent({ id }: { id: string }) {
           {fmtOperation(update.operation)}{" "}
           {!versionIsNone(update.version) && fmtVersion(update.version)}
         </Text>
-        <ActionIcon size="lg" variant="filled" color="red" onClick={close}>
+        <ActionIcon size="lg" variant="subtle" color="dimmed" onClick={close}>
           <ICONS.Clear size="1.3rem" />
         </ActionIcon>
       </Group>
diff --git a/ui/src/pages/alerts.tsx b/ui/src/pages/alerts.tsx
index 4e4bd6827..96252a883 100644
--- a/ui/src/pages/alerts.tsx
+++ b/ui/src/pages/alerts.tsx
@@ -139,8 +139,8 @@ export default function Alerts() {
           {/* RESET */}
           <ActionIcon
             onClick={() => setParams({})}
-            variant="filled"
-            color="red"
+            variant="subtle"
+            color="dimmed"
             disabled={!params.size}
           >
             <ICONS.Clear size="1rem" />
diff --git a/ui/src/pages/profile/index.tsx b/ui/src/pages/profile/index.tsx
index 2be9cb11d..0b9a3ec8b 100644
--- a/ui/src/pages/profile/index.tsx
+++ b/ui/src/pages/profile/index.tsx
@@ -128,7 +128,6 @@ export default function Profile() {
                   onCheckedChange={(external_skip_2fa) =>
                     updateExternalSkip2fa({ external_skip_2fa })
                   }
-                  redDisabled={false}
                 />
               )}
             </Group>
diff --git a/ui/src/pages/swarm/config/index.tsx b/ui/src/pages/swarm/config/index.tsx
index 8424c7bd5..a8b96460d 100644
--- a/ui/src/pages/swarm/config/index.tsx
+++ b/ui/src/pages/swarm/config/index.tsx
@@ -50,7 +50,7 @@ export default function SwarmConfig() {
         intent={intent}
         state={
           !inUse && (
-            <Badge variant="filled" color="red">
+            <Badge variant="filled" color="blue">
               Unused
             </Badge>
           )
diff --git a/ui/src/pages/swarm/secret/index.tsx b/ui/src/pages/swarm/secret/index.tsx
index a277d0d0b..e5401f013 100644
--- a/ui/src/pages/swarm/secret/index.tsx
+++ b/ui/src/pages/swarm/secret/index.tsx
@@ -50,7 +50,7 @@ export default function SwarmSecret() {
         intent={intent}
         state={
           !inUse && (
-            <Badge variant="filled" color="red">
+            <Badge variant="filled" color="blue">
               Unused
             </Badge>
           )
diff --git a/ui/src/pages/updates.tsx b/ui/src/pages/updates.tsx
index be1b6adf7..e48663523 100644
--- a/ui/src/pages/updates.tsx
+++ b/ui/src/pages/updates.tsx
@@ -113,8 +113,8 @@ export default function Updates() {
           {/* RESET */}
           <ActionIcon
             onClick={() => setParams({})}
-            variant="filled"
-            color="red"
+            variant="subtle"
+            color="dimmed"
             disabled={!params.size}
           >
             <ICONS.Clear size="1rem" />
diff --git a/ui/src/resources/alerter/index.tsx b/ui/src/resources/alerter/index.tsx
index e9a7917f5..10e015897 100644
--- a/ui/src/resources/alerter/index.tsx
+++ b/ui/src/resources/alerter/index.tsx
@@ -60,7 +60,7 @@ export const AlerterComponents: RequiredResourceComponents<
     const color =
       enabled === undefined || noColor
         ? undefined
-        : hexColorByIntention(enabled ? "Good" : "Critical");
+        : hexColorByIntention(enabled ? "Good" : "Neutral");
     return <ICONS.Alerter size={size} color={color} />;
   },
 
@@ -71,7 +71,7 @@ export const AlerterComponents: RequiredResourceComponents<
         type="Alerter"
         id={id}
         resource={alerter}
-        intent={alerter?.info.enabled ? "Good" : "Critical"}
+        intent={alerter?.info.enabled ? "Good" : "Neutral"}
         icon={ICONS.Alerter}
         name={alerter?.name}
         state={alerter?.info.enabled ? "Enabled" : "Disabled"}
diff --git a/ui/src/resources/selector.tsx b/ui/src/resources/selector.tsx
index a19563575..ac77c81e3 100644
--- a/ui/src/resources/selector.tsx
+++ b/ui/src/resources/selector.tsx
@@ -98,8 +98,8 @@ export default function ResourceSelector({
               {clearable && (
                 <ActionIcon
                   size="sm"
-                  variant="filled"
-                  color="red"
+                  variant="subtle"
+                  color="dimmed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onSelect?.("");
diff --git a/ui/src/resources/server/docker/images.tsx b/ui/src/resources/server/docker/images.tsx
index 58306927a..36797e169 100644
--- a/ui/src/resources/server/docker/images.tsx
+++ b/ui/src/resources/server/docker/images.tsx
@@ -53,7 +53,7 @@ export default function ServerImages({
                 name={row.original.name}
                 id={row.original.id}
                 extra={
-                  !row.original.in_use && <Badge color="red">Unused</Badge>
+                  !row.original.in_use && <Badge color="blue">Unused</Badge>
                 }
               />
             ),
diff --git a/ui/src/resources/server/docker/networks.tsx b/ui/src/resources/server/docker/networks.tsx
index 1b0b72419..84f6eed08 100644
--- a/ui/src/resources/server/docker/networks.tsx
+++ b/ui/src/resources/server/docker/networks.tsx
@@ -68,7 +68,7 @@ export default function ServerNetworks({
                     ) ? (
                       <Badge>System</Badge>
                     ) : (
-                      !row.original.in_use && <Badge color="red">Unused</Badge>
+                      !row.original.in_use && <Badge color="blue">Unused</Badge>
                     )
                   }
                 />
diff --git a/ui/src/resources/server/docker/volumes.tsx b/ui/src/resources/server/docker/volumes.tsx
index ebb0ae07b..cd95343e8 100644
--- a/ui/src/resources/server/docker/volumes.tsx
+++ b/ui/src/resources/server/docker/volumes.tsx
@@ -51,7 +51,7 @@ export default function ServerVolumes({
                 serverId={id}
                 name={row.original.name}
                 extra={
-                  !row.original.in_use && <Badge color="red">Unused</Badge>
+                  !row.original.in_use && <Badge color="blue">Unused</Badge>
                 }
               />
             ),
diff --git a/ui/src/resources/swarm/config.tsx b/ui/src/resources/swarm/config.tsx
index 72fc0f47c..e9a8ec4c3 100644
--- a/ui/src/resources/swarm/config.tsx
+++ b/ui/src/resources/swarm/config.tsx
@@ -80,7 +80,7 @@ export default function SwarmConfig({
                             clearable={false}
                           />
                           {!disabled && (
-                            <ActionIcon variant="filled" color="red">
+                            <ActionIcon variant="subtle" color="dimmed">
                               <ICONS.Remove
                                 size="1rem"
                                 onClick={() =>
diff --git a/ui/src/resources/swarm/docker/configs.tsx b/ui/src/resources/swarm/docker/configs.tsx
index 1b60537bf..341df571e 100644
--- a/ui/src/resources/swarm/docker/configs.tsx
+++ b/ui/src/resources/swarm/docker/configs.tsx
@@ -54,7 +54,7 @@ export default function SwarmConfigs({
                 name={row.original.Name}
                 extra={
                   !row.original.InUse && (
-                    <Badge variant="filled" color="red">
+                    <Badge variant="filled" color="blue">
                       Unused
                     </Badge>
                   )
diff --git a/ui/src/resources/swarm/docker/secrets.tsx b/ui/src/resources/swarm/docker/secrets.tsx
index e82fe7c0d..067b1241c 100644
--- a/ui/src/resources/swarm/docker/secrets.tsx
+++ b/ui/src/resources/swarm/docker/secrets.tsx
@@ -54,7 +54,7 @@ export default function SwarmSecrets({
                 name={row.original.Name}
                 extra={
                   !row.original.InUse && (
-                    <Badge variant="filled" color="red">
+                    <Badge variant="filled" color="blue">
                       Unused
                     </Badge>
                   )
diff --git a/ui/src/ui/enable-switch.tsx b/ui/src/ui/enable-switch.tsx
index 5caac7a8a..b67c3c3cd 100644
--- a/ui/src/ui/enable-switch.tsx
+++ b/ui/src/ui/enable-switch.tsx
@@ -3,7 +3,6 @@ import { Badge, Group, GroupProps, Switch, SwitchProps } from "@mantine/core";
 export interface EnableSwitchProps extends SwitchProps {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
-  redDisabled?: boolean;
   labelProps?: GroupProps;
 }
 
@@ -14,7 +13,6 @@ export default function EnableSwitch({
   onChange,
   onCheckedChange,
   disabled,
-  redDisabled = true,
   labelProps,
   ...props
 }: EnableSwitchProps) {
@@ -27,7 +25,7 @@ export default function EnableSwitch({
         <Group gap="sm" wrap="nowrap" {...labelProps}>
           {label}
           <Badge
-            color={checked ? color : redDisabled ? "red" : "gray"}
+            color={checked ? color : "gray"}
             opacity={disabled ? 0.7 : 1}
             style={{ cursor: disabled ? undefined : "pointer" }}
           >