From 5a8653d8500388d9392b150d62a56474c05843d7 Mon Sep 17 00:00:00 2001
From: Andre Silva <32734153+Aandree5@users.noreply.github.com>
Date: Fri, 11 Jul 2025 17:39:12 +0100
Subject: [PATCH] feat(icon-color): add icon color clear button (#3593)

---
 .../boards/[name]/settings/_appereance.tsx    | 26 ++++++++++++++-----
 packages/translation/src/lang/en.json         |  3 +++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
index 706ca27df..95b3602e6 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
@@ -17,6 +17,7 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
 
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
@@ -102,12 +103,25 @@ export const ColorSettingsContent = ({ board }: Props) => {
             </InputWrapper>
           </Grid.Col>
           <Grid.Col span={{ sm: 12, md: 6 }}>
-            <ColorInput
-              label={t("board.field.iconColor.label")}
-              format="hex"
-              swatches={Object.values(theme.colors).map((color) => color[6])}
-              {...form.getInputProps("iconColor")}
-            />
+            <Group align="end">
+              <ColorInput
+                label={t("board.field.iconColor.label")}
+                format="hex"
+                swatches={Object.values(theme.colors).map((color) => color[6])}
+                flex={1}
+                {...form.getInputProps("iconColor")}
+              />
+              <Button
+                variant="subtle"
+                leftSection={<IconX />}
+                onClick={() => form.setFieldValue("iconColor", "")}
+                disabled={!form.values.iconColor}
+              >
+                {t("board.field.clearColor.label")}
+              </Button>
+            </Group>
+          </Grid.Col>
+          <Grid.Col span={{ sm: 12, md: 6 }}>
             <Select
               label={t("board.field.itemRadius.label")}
               description={t("board.field.itemRadius.description")}
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index a419b7659..ede271c0b 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2556,6 +2556,9 @@
       "iconColor": {
         "label": "Icon color"
       },
+      "clearColor": {
+        "label": "Clear color"
+      },
       "customCss": {
         "label": "Custom css for this board",
         "description": "Further, customize your dashboard using CSS, only recommended for experienced users",