feat: board settings (#137)

* refactor: improve user feedback for general board settings section * wip: add board settings for background and colors, move danger zone to own file, refactor code * feat: add shade selector * feat: add slider for opacity * fix: issue with invalid hex values for color preview * refactor: add shared mutation hook for saving partial board settings with invalidate query * fix: add cleanup for not applied changes to logo and page title * feat: add layout settings * feat: add empty custom css section to board settings * refactor: improve layout of board logo on mobile * feat: add theme provider for board colors * refactor: add auto contrast for better contrast of buttons with low primary shade * feat: add background for boards * feat: add opacity for boards * feat: add rename board * feat: add visibility and delete of board settings * fix: issue that wrong data is updated with update board method * refactor: improve danger zone button placement for mobile * fix: board not revalidated when already in boards layout * refactor: improve board color preview * refactor: change save button color to teal, add placeholders for general board settings * chore: update initial migration * refactor: remove unnecessary div * chore: address pull request feedback * fix: ci issues * fix: deepsource issues * chore: address pull request feedback * fix: formatting issue * chore: address pull request feedback
2024-03-03 16:01:32 +01:00
parent 2a83df3485
commit bb02163e25
49 changed files with 1620 additions and 406 deletions
--- a/apps/nextjs/src/app/[locale]/boards/_theme.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/_theme.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import type { MantineColorsTuple } from "@homarr/ui";
+import { createTheme, darken, lighten, MantineProvider } from "@homarr/ui";
+
+import { useRequiredBoard } from "./_context";
+
+export const BoardMantineProvider = ({ children }: PropsWithChildren) => {
+  const board = useRequiredBoard();
+
+  const theme = createTheme({
+    colors: {
+      primaryColor: generateColors(board.primaryColor),
+      secondaryColor: generateColors(board.secondaryColor),
+    },
+    primaryColor: "primaryColor",
+    autoContrast: true,
+  });
+
+  return <MantineProvider theme={theme}>{children}</MantineProvider>;
+};
+
+export const generateColors = (hex: string) => {
+  const lightnessForColors = [
+    -0.25, -0.2, -0.15, -0.1, -0.05, 0, 0.05, 0.1, 0.15, 0.2,
+  ] as const;
+  const rgbaColors = lightnessForColors.map((lightness) => {
+    if (lightness < 0) {
+      return lighten(hex, -lightness);
+    }
+    return darken(hex, lightness);
+  });
+
+  return rgbaColors.map((color) => {
+    return (
+      "#" +
+      color
+        .split("(")[1]!
+        .replaceAll(" ", "")
+        .replace(")", "")
+        .split(",")
+        .map((color) => parseInt(color, 10))
+        .slice(0, 3)
+        .map((color) => color.toString(16).padStart(2, "0"))
+        .join("")
+    );
+  }) as unknown as MantineColorsTuple;
+};