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/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>