grediend in workspace

src/pages/taskmanager/components/HeaderWorkspace.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, InfoCircle, Setting2 } from "iconsax-react";
+import { ArrowRight, Setting2 } from "iconsax-react";
 import type { FC } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -10,13 +10,13 @@ const HeaderWorkspace: FC<HeaderWorkspaceProps> = ({ projectName }) => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex justify-between items-center bg-primary h-14 sm:h-16 xl:h-[102px] px-3 sm:px-6 xl:px-8 shrink-0 gap-3">
+    <div className="flex justify-between items-center bg-primary h-14 sm:h-16 xl:h-[80px] px-3 sm:px-6 xl:px-8 shrink-0 gap-3">
       <div className="flex gap-2 sm:gap-4 items-center min-w-0">
         <div className="text-white text-base sm:text-lg xl:text-xl truncate">{projectName}</div>
-        <InfoCircle
+        {/* <InfoCircle
           size={18}
           color="white"
-        />
+        /> */}
       </div>
 
       <div className="flex gap-2 sm:gap-4 items-center shrink-0">

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

@@ -1,7 +1,8 @@
-import { CSSProperties, FC } from "react";
+import { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Pages } from "../../../../config/Pages";
 import type { ProjectItem } from "../types/ProjectTypes";
+import { getProjectBackgroundStyle } from "../utils/getProjectBackgroundStyle";
 import ProjectCardMenu from "./ProjectCardMenu";
 
 type Props = {
@@ -9,30 +10,6 @@ type Props = {
   onDelete: (id: string) => void;
 };
 
-const hexToRgba = (hex: string, alpha: number) => {
-  const normalized = hex.replace("#", "");
-  const r = parseInt(normalized.slice(0, 2), 16);
-  const g = parseInt(normalized.slice(2, 4), 16);
-  const b = parseInt(normalized.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
-const getCardBackgroundStyle = (project: ProjectItem): CSSProperties => {
-  if (project.backgroundPicture) {
-    return {
-      backgroundImage: `url(${project.backgroundPicture})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-    };
-  }
-
-  const color = project.backgroundColor ?? "#A8E6CF";
-
-  return {
-    background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`,
-  };
-};
-
 const ProjectCard: FC<Props> = ({ project, onDelete }) => {
   const navigate = useNavigate();
 
@@ -43,7 +20,7 @@ const ProjectCard: FC<Props> = ({ project, onDelete }) => {
   return (
     <div className="bg-white rounded-[20px] overflow-hidden shadow-sm border border-border/40 p-3">
       <Link to={Pages.taskmanager.workspace + project.id}>
-        <div className="h-[84px] w-full rounded-[16px]" style={getCardBackgroundStyle(project)} />
+        <div className="h-[84px] w-full rounded-[16px]" style={getProjectBackgroundStyle(project)} />
       </Link>
 
       <div className="flex items-center justify-between mt-3.5">

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

@@ -1,7 +1,7 @@
-import { Add, Setting2 } from "iconsax-react";
+import { Add, ArrowRight } from "iconsax-react";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Button from "../../../../components/Button";
 import { Pages } from "../../../../config/Pages";
 
@@ -13,23 +13,33 @@ type Props = {
 
 const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) => {
   const { t } = useTranslation("global");
-  const createProjectLink = workspaceId
+  const createProjectLink = workspaceId ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}` : Pages.taskmanager.createProject;
-    ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}`
+  const navigate = useNavigate();
-    : Pages.taskmanager.createProject;
-
   return (
     <div className="flex w-full justify-between items-center">
       <h1>{title}</h1>
 
       <div className="flex items-center gap-3">
-        <Button onClick={onSettingsClick} className="flex items-center gap-2 bg-[#C3C7DD] text-black whitespace-nowrap px-4">
+        <Button
-          <Setting2 size={18} color="black" />
+          onClick={() => navigate(-1)}
-          <span>{t("sidebar.setting")}</span>
+          className="flex items-center gap-2 bg-[#C3C7DD] text-black whitespace-nowrap px-4"
+        >
+          <ArrowRight
+            size={18}
+            color="black"
+          />
+          <span>برگشت</span>
         </Button>
 
         <Link to={createProjectLink}>
-          <Button onClick={onSettingsClick} className="flex items-center gap-2 whitespace-nowrap px-4">
+          <Button
-            <Add size={18} color="white" />
+            onClick={onSettingsClick}
+            className="flex items-center gap-2 whitespace-nowrap px-4"
+          >
+            <Add
+              size={18}
+              color="white"
+            />
             <span>{t("taskmanager.new_project")}</span>
           </Button>
         </Link>

src/pages/taskmanager/project/utils/getProjectBackgroundStyle.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from "react";
+
+type ProjectBackground = {
+  backgroundColor?: string;
+  backgroundPicture?: string;
+};
+
+const hexToRgba = (hex: string, alpha: number) => {
+  const normalized = hex.replace("#", "");
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export const getProjectBackgroundStyle = (project: ProjectBackground): CSSProperties => {
+  if (project.backgroundPicture) {
+    return {
+      backgroundImage: `url(${project.backgroundPicture})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+    };
+  }
+
+  const color = project.backgroundColor ?? "#A8E6CF";
+
+  return {
+    background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`,
+  };
+};

src/pages/taskmanager/workspace.tsx

@@ -9,7 +9,9 @@ import AddNewColumn from "./components/AddNewColumn";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
 import TaskDetailModal from "./components/task-detail/TaskDetailModal";
-import { useGetProject } from "./project/hooks/useProjectData";
+import { useGetProject, useGetProjectDetail } from "./project/hooks/useProjectData";
+import type { ProjectDetailType } from "./project/types/ProjectTypes";
+import { getProjectBackgroundStyle } from "./project/utils/getProjectBackgroundStyle";
 import { useUpdateTaskPhase } from "./task-phase/hooks/useTaskPhaseData";
 import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes";
 import { useChangeTaskPhase, useChangeTaskPriority } from "./task/hooks/useTaskData";
@@ -25,6 +27,9 @@ const Workspace: FC = () => {
   const queryClient = useQueryClient();
   const { slug: projectId = "" } = useParams<{ slug: string }>();
   const { data: project, isPending } = useGetProject(projectId);
+  const { data: projectDetailData } = useGetProjectDetail(projectId);
+  const projectDetail: ProjectDetailType | undefined =
+    projectDetailData?.data?.project ?? projectDetailData?.data;
   const { mutate: changeTaskPhase } = useChangeTaskPhase();
   const { mutate: changeTaskPriority } = useChangeTaskPriority();
   const { mutate: updateTaskPhase } = useUpdateTaskPhase();
@@ -236,7 +241,13 @@ const Workspace: FC = () => {
   }
 
   return (
-    <div className="bg-[#01347A] h-full min-h-0 rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
+    <div
+      className="h-full min-h-0 rounded-none xl:rounded-[32px] overflow-hidden flex flex-col"
+      style={getProjectBackgroundStyle({
+        backgroundColor: projectDetail?.backgroundColor,
+        backgroundPicture: projectDetail?.backgroundPicture,
+      })}
+    >
       <HeaderWorkspace projectName={project?.data?.name ?? ""} />
       <div className="flex-1 min-h-0 flex flex-col px-3 sm:px-4 xl:px-8 py-4 xl:py-6">
         <DragDropContext onDragStart={handleTaskDragStart} onDragEnd={handleTaskDragEnd}>

src/pages/taskmanager/workspace/List.tsx

@@ -73,12 +73,7 @@ const WorkspaceList: FC = () => {
                         className="size-4 rounded-full shrink-0"
                         style={{ backgroundColor: item.color }}
                       />
-                      <Link
+                      {item.name}
-                        to={Pages.taskmanager.workspace + item.id}
-                        className="text-[#0047FF] hover:opacity-70 transition-opacity"
-                      >
-                        {item.name}
-                      </Link>
                     </div>
                   </Td>
                   <Td text={item.description ?? ""} />