update background color

src/pages/taskmanager/project/Create.tsx

@@ -14,7 +14,6 @@ import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useSingleUpload } from "../../service/hooks/useServiceData";
 import CreateProjectSidebar, {
-  BACKGROUND_PRESETS,
   SelectedUser,
 } from "./components/CreateProjectSidebar";
 import { useCreateProject } from "./hooks/useProjectData";
@@ -30,7 +29,7 @@ const CreateProject: FC = () => {
   const [isActive, setIsActive] = useState(true);
   const [selectedColor, setSelectedColor] = useState("#A8E6CF");
   const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
-  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
+  const [selectedBackground, setSelectedBackground] = useState<string | null>(null);
   const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
   const [workspaceId, setWorkspaceId] = useState(searchParams.get("workspaceId") ?? "");
 

src/pages/taskmanager/project/Update.tsx

@@ -15,7 +15,7 @@ import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useSingleUpload } from "../../service/hooks/useServiceData";
 import CreateProjectSidebar, {
-  BACKGROUND_PRESETS,
+  findMatchingBackgroundPreset,
   SelectedUser,
 } from "./components/CreateProjectSidebar";
 import { useGetProjectDetail, useUpdateProject } from "./hooks/useProjectData";
@@ -32,7 +32,7 @@ const UpdateProject: FC = () => {
   const [isActive, setIsActive] = useState(true);
   const [selectedColor, setSelectedColor] = useState("#A8E6CF");
   const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
-  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
+  const [selectedBackground, setSelectedBackground] = useState<string | null>(null);
   const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
   const [workspaceId, setWorkspaceId] = useState("");
   const [existingBackgroundPicture, setExistingBackgroundPicture] = useState("");
@@ -119,7 +119,9 @@ const UpdateProject: FC = () => {
         : "",
     });
     setIsActive(project.isActive);
-    setSelectedColor(project.backgroundColor ?? "#A8E6CF");
+    const backgroundColor = project.backgroundColor ?? "#A8E6CF";
+    setSelectedBackground(findMatchingBackgroundPreset(backgroundColor));
+    setSelectedColor(backgroundColor);
     setWorkspaceId(project.workspaceId);
     setExistingBackgroundPicture(project.backgroundPicture ?? "");
     setStartDateDefault(

src/pages/taskmanager/project/components/CreateProjectSidebar.tsx

@@ -23,6 +23,14 @@ export const BACKGROUND_PRESETS = [
   "linear-gradient(45deg, #2c3e50, #4ca1af)",
 ] as const;
 
+export const getPresetPrimaryColor = (preset: string) =>
+  preset.match(/#[0-9a-fA-F]{6}/)?.[0] ?? "#A8E6CF";
+
+export const findMatchingBackgroundPreset = (color: string) =>
+  BACKGROUND_PRESETS.find(
+    (preset) => getPresetPrimaryColor(preset).toLowerCase() === color.toLowerCase(),
+  ) ?? null;
+
 type Props = {
   isActive: boolean;
   onIsActiveChange: (value: boolean) => void;
@@ -30,8 +38,8 @@ type Props = {
   onColorChange: (color: string) => void;
   selectedUsers: SelectedUser[];
   onSelectedUsersChange: (users: SelectedUser[]) => void;
-  selectedBackground: string;
-  onBackgroundChange: (background: string) => void;
+  selectedBackground: string | null;
+  onBackgroundChange: (background: string | null) => void;
   backgroundImage: File | null;
   onBackgroundImageChange: (file: File | null) => void;
   workspaceId: string;
@@ -154,7 +162,10 @@ const CreateProjectSidebar: FC<Props> = ({
                 background,
                 borderColor: selectedBackground === background ? "#000" : "#E2E8F0",
               }}
-              onClick={() => onBackgroundChange(background)}
+              onClick={() => {
+                onBackgroundChange(background);
+                onColorChange(getPresetPrimaryColor(background));
+              }}
             />
           ))}
         </div>
@@ -162,7 +173,13 @@ const CreateProjectSidebar: FC<Props> = ({
 
       <div className="mt-8">
         <div className="text-sm mb-3">{t("taskmanager.choose_color")}</div>
-        <WorkspaceColorPicker selectedColor={selectedColor} onChange={onColorChange} />
+        <WorkspaceColorPicker
+          selectedColor={selectedColor}
+          onChange={(color) => {
+            onBackgroundChange(findMatchingBackgroundPreset(color));
+            onColorChange(color);
+          }}
+        />
       </div>
 
       <div className="mt-8">