chore: update module status icons and colors (#2011)

* chore: update module status icons and colors

* refactor: import statements

* fix: add default alue to module status

apps/app/components/modules/gantt-chart/blocks.tsx

@@ -2,6 +2,8 @@ import { useRouter } from "next/router";
 
 // ui
 import { Tooltip } from "components/ui";
+// icons
+import { ModuleStatusIcon } from "components/icons";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 // types
@@ -49,6 +51,7 @@ export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
       className="relative w-full flex items-center gap-2 h-full"
       onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
     >
+      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
       <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
     </div>
   );

apps/app/components/modules/select/status.tsx

@@ -6,6 +6,7 @@ import { Controller, FieldError, Control } from "react-hook-form";
 import { CustomSelect } from "components/ui";
 // icons
 import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { ModuleStatusIcon } from "components/icons";
 // types
 import type { IModule } from "types";
 // constants
@@ -31,12 +32,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
             }`}
           >
             {value ? (
-              <span
-                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
-                }}
-              />
+              <ModuleStatusIcon status={value} />
             ) : (
               <Squares2X2Icon
                 className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`}
@@ -53,12 +49,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
         {MODULE_STATUS.map((status) => (
           <CustomSelect.Option key={status.value} value={status.value}>
             <div className="flex items-center gap-2">
-              <span
-                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: status.color,
-                }}
-              />
+              <ModuleStatusIcon status={status.value} />
               {status.label}
             </div>
           </CustomSelect.Option>

apps/app/components/modules/sidebar.tsx

@@ -48,7 +48,7 @@ const defaultValues: Partial<IModule> = {
   members_list: [],
   start_date: null,
   target_date: null,
-  status: null,
+  status: "backlog",
 };
 
 type Props = {