feat(icon-color): add icon color clear button (#3593)

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
+            <Group align="end">
-              label={t("board.field.iconColor.label")}
+              <ColorInput
-              format="hex"
+                label={t("board.field.iconColor.label")}
-              swatches={Object.values(theme.colors).map((color) => color[6])}
+                format="hex"
-              {...form.getInputProps("iconColor")}
+                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")}

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",