Create project fix design select project

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

@@ -1,5 +1,5 @@
-import { FC, useRef, useState } from "react";
 import { CloseCircle, Gallery } from "iconsax-react";
+import { FC, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Select from "../../../../components/Select";
 import SwitchComponent from "../../../../components/Switch";
@@ -19,8 +19,6 @@ const BACKGROUND_PRESETS = [
   "linear-gradient(45deg, #3f2b96, #a8c0ff)",
   "linear-gradient(45deg, #7f7fd5, #91eae4)",
   "linear-gradient(45deg, #2c3e50, #4ca1af)",
-  "linear-gradient(45deg, #1cb5e0, #000851)",
-  "linear-gradient(45deg, #0052d4, #4364f7)",
 ] as const;
 
 const CreateProjectSidebar: FC = () => {
@@ -31,18 +29,13 @@ const CreateProjectSidebar: FC = () => {
   const [selectedColor, setSelectedColor] = useState("#A8E6CF");
   const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
   const [userSelectValue, setUserSelectValue] = useState("");
-  const [selectedBackground, setSelectedBackground] = useState<string>(
+  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
-    BACKGROUND_PRESETS[0],
-  );
   const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const userItems =
     getUsers.data?.data?.users
-      ?.filter(
+      ?.filter((user: UserItemType) => !selectedUsers.some((selected) => selected.id === user.id))
-        (user: UserItemType) =>
-          !selectedUsers.some((selected) => selected.id === user.id),
-      )
       .map((user: UserItemType) => ({
         label: `${user.firstName} ${user.lastName}`,
         value: user.id,
@@ -52,15 +45,10 @@ const CreateProjectSidebar: FC = () => {
     const value = e.target.value;
     if (!value) return;
 
-    const user = getUsers.data?.data?.users?.find(
+    const user = getUsers.data?.data?.users?.find((item: UserItemType) => item.id === value);
-      (item: UserItemType) => item.id === value,
-    );
 
     if (user) {
-      setSelectedUsers((prev) => [
+      setSelectedUsers((prev) => [...prev, { id: user.id, name: `${user.firstName} ${user.lastName}` }]);
-        ...prev,
-        { id: user.id, name: `${user.firstName} ${user.lastName}` },
-      ]);
     }
 
     setUserSelectValue("");
@@ -70,9 +58,7 @@ const CreateProjectSidebar: FC = () => {
     setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
   };
 
-  const handleBackgroundImageChange = (
+  const handleBackgroundImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
     const file = event.target.files?.[0] ?? null;
     setBackgroundImage(file);
   };
@@ -88,33 +74,16 @@ const CreateProjectSidebar: FC = () => {
       </div>
 
       <div className="mt-8">
-        <Select
+        <Select label={t("taskmanager.users")} placeholder={t("taskmanager.select_user")} items={userItems} value={userSelectValue} onChange={handleUserSelect} className="border" />
-          label={t("taskmanager.users")}
-          placeholder={t("taskmanager.select_user")}
-          items={userItems}
-          value={userSelectValue}
-          onChange={handleUserSelect}
-          className="border"
-        />
 
         <div className="mt-3 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap min-h-[52px]">
           {selectedUsers.length === 0 ? (
-            <div className="text-description w-full text-center">
+            <div className="text-description w-full text-center">{t("taskmanager.no_users_added")}</div>
-              {t("taskmanager.no_users_added")}
-            </div>
           ) : (
             selectedUsers.map((user) => (
-              <div
+              <div key={user.id} className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg">
-                key={user.id}
-                className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg"
-              >
                 <div>{user.name}</div>
-                <CloseCircle
+                <CloseCircle variant="Bold" className="size-4 cursor-pointer" color="red" onClick={() => handleRemoveUser(user.id)} />
-                  variant="Bold"
-                  className="size-4 cursor-pointer"
-                  color="red"
-                  onClick={() => handleRemoveUser(user.id)}
-                />
               </div>
             ))
           )}
@@ -123,16 +92,15 @@ const CreateProjectSidebar: FC = () => {
 
       <div className="mt-8">
         <div className="text-sm mb-3">{t("taskmanager.background")}</div>
-        <div className="grid grid-cols-4 gap-2">
+        <div className="flex flex-wrap gap-2">
           {BACKGROUND_PRESETS.map((background) => (
             <button
               key={background}
               type="button"
-              className="h-8 rounded-md border"
+              className="w-20 h-10 border"
               style={{
                 background,
-                borderColor:
+                borderColor: selectedBackground === background ? "#000" : "#E2E8F0",
-                  selectedBackground === background ? "#000" : "#E2E8F0",
               }}
               onClick={() => setSelectedBackground(background)}
             />
@@ -142,10 +110,7 @@ const CreateProjectSidebar: FC = () => {
 
       <div className="mt-8">
         <div className="text-sm mb-3">{t("taskmanager.choose_color")}</div>
-        <WorkspaceColorPicker
+        <WorkspaceColorPicker selectedColor={selectedColor} onChange={setSelectedColor} />
-          selectedColor={selectedColor}
-          onChange={setSelectedColor}
-        />
       </div>
 
       <div className="mt-8">
@@ -156,19 +121,9 @@ const CreateProjectSidebar: FC = () => {
           className="w-full min-h-[112px] border border-dashed border-border rounded-xl flex flex-col items-center justify-center text-description px-4"
         >
           <Gallery size={26} color="#8C90A3" />
-          <div className="mt-2 text-xs text-center">
+          <div className="mt-2 text-xs text-center">{backgroundImage ? backgroundImage.name : t("taskmanager.upload_background")}</div>
-            {backgroundImage
-              ? backgroundImage.name
-              : t("taskmanager.upload_background")}
-          </div>
         </button>
-        <input
+        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleBackgroundImageChange} />
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          className="hidden"
-          onChange={handleBackgroundImageChange}
-        />
       </div>
     </div>
   );