style: create project modal (#1628)

* style: create project modal

* fix: build error

* fix: modal width

apps/app/components/analytics/custom-analytics/sidebar.tsx

@@ -360,11 +360,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-custom-text-200">Network</h6>
                       <span>
-                        {
+                        {NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ??
-                          NETWORK_CHOICES[
+                          ""}
-                            `${projectDetails?.network}` as keyof typeof NETWORK_CHOICES
-                          ]
-                        }
                       </span>
                     </div>
                   </div>

apps/app/components/core/image-picker-popover.tsx

@@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-custom-border-200 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
+        className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -77,7 +77,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-200 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
+          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => (

apps/app/components/emoji-icon-picker/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 // headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
 // react colors
@@ -11,8 +11,6 @@ import icons from "./icons.json";
 // helpers
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
 import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const tabOptions = [
   {
@@ -26,8 +24,6 @@ const tabOptions = [
 ];
 
 const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
   const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
@@ -38,20 +34,13 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
     setRecentEmojis(getRecentEmojis());
   }, []);
 
-  useOutsideClickDetector(ref, () => {
-    setIsOpen(false);
-  });
-
   useEffect(() => {
     if (!value || value?.length === 0) onChange(getRandomEmoji());
   }, [value, onChange]);
 
   return (
-    <Popover className="relative z-[1]" ref={ref}>
+    <Popover className="relative z-[1]">
-      <Popover.Button
+      <Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none">
-        className="rounded-full bg-custom-background-90 p-2 outline-none sm:text-sm"
-        onClick={() => setIsOpen((prev) => !prev)}
-      >
         {label}
       </Popover.Button>
       <Transition

apps/app/components/emoji-icon-picker/types.d.ts

@@ -1,5 +1,5 @@
 export type Props = {
-  label: string | React.ReactNode;
+  label: React.ReactNode;
   value: any;
   onChange: (
     data:

apps/app/components/integration/jira/import-users.tsx

@@ -30,7 +30,7 @@ export const JiraImportUsers: FC = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString());
+  const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
 
   const options = members?.map((member) => ({
     value: member.member.email,

apps/app/components/issues/select/assignee.tsx

@@ -21,7 +21,6 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  // fetching project members
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId

apps/app/components/modules/sidebar-select/select-members.tsx

@@ -55,7 +55,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       </div>
       <div className="sm:basis-1/2">
         <CustomSearchSelect
-          value={value}
+          value={value ?? []}
           label={
             <div className="flex items-center gap-2 text-custom-text-200">
               {value && value.length > 0 && Array.isArray(value) ? (

apps/app/components/project/create-project-modal.tsx

@@ -2,19 +2,29 @@ import React, { useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 
+// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-
 // services
 import projectServices from "services/project.service";
-import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
+import useWorkspaceMembers from "hooks/use-workspace-members";
 // ui
-import { Input, TextArea, CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
+import {
+  Input,
+  TextArea,
+  CustomSelect,
+  PrimaryButton,
+  SecondaryButton,
+  Icon,
+  Avatar,
+  CustomSearchSelect,
+} from "components/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 // components
@@ -25,7 +35,7 @@ import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 // types
 import { ICurrentUserResponse, IProject } from "types";
 // fetch-keys
-import { PROJECTS_LIST, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
+import { PROJECTS_LIST } from "constants/fetch-keys";
 // constants
 import { NETWORK_CHOICES } from "constants/project";
 
@@ -36,13 +46,14 @@ type Props = {
 };
 
 const defaultValues: Partial<IProject> = {
-  name: "",
-  identifier: "",
-  description: "",
-  network: 2,
-  emoji_and_icon: getRandomEmoji(),
   cover_image:
     "https://images.unsplash.com/photo-1575116464504-9e7652fddcb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyODUyNTV8MHwxfHNlYXJjaHwxOHx8cGxhbmV8ZW58MHx8fHwxNjgxNDY4NTY5&ixlib=rb-4.0.3&q=80&w=1080",
+  description: "",
+  emoji_and_icon: getRandomEmoji(),
+  identifier: "",
+  name: "",
+  network: 2,
+  project_lead: null,
 };
 
 const IsGuestCondition: React.FC<{
@@ -52,6 +63,7 @@ const IsGuestCondition: React.FC<{
 
   useEffect(() => {
     setIsOpen(false);
+
     setToastAlert({
       title: "Error",
       type: "error",
@@ -62,31 +74,22 @@ const IsGuestCondition: React.FC<{
   return null;
 };
 
-export const CreateProjectModal: React.FC<Props> = (props) => {
+export const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen, user }) => {
-  const { isOpen, setIsOpen, user } = props;
-
   const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
 
   const { setToastAlert } = useToast();
 
-  const {
+  const router = useRouter();
-    query: { workspaceSlug },
+  const { workspaceSlug } = router.query;
-  } = useRouter();
 
-  const { data: myWorkspaceMembership } = useSWR(
+  const { memberDetails } = useWorkspaceMyMembership();
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug as string) : null,
-    {
-      shouldRetryOnError: false,
-    }
-  );
 
   const {
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
-    setError,
     control,
     watch,
     setValue,
@@ -96,8 +99,8 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
     reValidateMode: "onChange",
   });
 
-  const projectName = watch("name") ?? "";
+  const projectName = watch("name");
-  const projectIdentifier = watch("identifier") ?? "";
+  const projectIdentifier = watch("identifier");
 
   useEffect(() => {
     if (projectName && isChangeIdentifierRequired)
@@ -120,10 +123,10 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
     else payload.emoji = formData.emoji_and_icon;
 
     await projectServices
-      .createProject(workspaceSlug as string, payload, user)
+      .createProject(workspaceSlug.toString(), payload, user)
       .then((res) => {
         mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
           (prevData) => [res, ...(prevData ?? [])],
           false
         );
@@ -135,28 +138,40 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
         handleClose();
       })
       .catch((err) => {
-        if (err.status === 403) {
+        Object.keys(err.data).map((key) =>
           setToastAlert({
             type: "error",
             title: "Error!",
-            message: "You don't have permission to create project.",
+            message: err.data[key],
-          });
+          })
-          handleClose();
+        );
-          return;
-        }
-        err = err.data;
-        Object.keys(err).map((key) => {
-          const errorMessages = err[key];
-          setError(key as keyof IProject, {
-            message: Array.isArray(errorMessages) ? errorMessages.join(", ") : errorMessages,
-          });
-        });
       });
   };
 
-  if (myWorkspaceMembership && isOpen) {
+  const options = workspaceMembers?.map((member) => ({
-    if (myWorkspaceMembership.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
+    value: member.member.id,
-  }
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
+
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  if (memberDetails && isOpen)
+    if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -184,12 +199,12 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all p-3 w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
-                <div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
+                <div className="group relative h-36 w-full rounded-lg bg-custom-background-80">
                   {watch("cover_image") !== null && (
                     <img
                       src={watch("cover_image")!}
-                      className="absolute top-0 left-0 h-full w-full object-cover rounded-t-lg"
+                      className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                       alt="Cover Image"
                     />
                   )}
@@ -199,87 +214,85 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                       <XMarkIcon className="h-5 w-5 text-white" />
                     </button>
                   </div>
-                  <div className="absolute bottom-0 left-0 flex w-full justify-between px-6 py-5">
+                  <div className="hidden group-hover:block absolute bottom-2 right-2">
-                    <div className="absolute left-0 bottom-0 h-16 w-full bg-gradient-to-t from-black opacity-60" />
+                    <ImagePickerPopover
-                    <h3 className="z-[1] text-xl text-white">Create Project</h3>
+                      label="Change Cover"
-                    <div>
+                      onChange={(image) => {
-                      <ImagePickerPopover
+                        setValue("cover_image", image);
-                        label="Change Cover"
+                      }}
-                        onChange={(image) => {
+                      value={watch("cover_image")}
-                          setValue("cover_image", image);
+                    />
-                        }}
+                  </div>
-                        value={watch("cover_image")}
+                  <div className="absolute -bottom-[22px] left-3">
-                      />
+                    <Controller
-                    </div>
+                      name="emoji_and_icon"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <EmojiIconPicker
+                          label={
+                            <div className="h-[44px] w-[44px] grid place-items-center rounded-md bg-custom-background-80 outline-none text-lg">
+                              {value ? (
+                                typeof value === "object" ? (
+                                  <span
+                                    style={{ color: value.color }}
+                                    className="material-symbols-rounded text-lg"
+                                  >
+                                    {value.name}
+                                  </span>
+                                ) : (
+                                  renderEmoji(value)
+                                )
+                              ) : (
+                                "Icon"
+                              )}
+                            </div>
+                          }
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
                   </div>
                 </div>
-                <form onSubmit={handleSubmit(onSubmit)}>
+                <form
-                  <div className="mt-5 space-y-4 px-4 py-3">
+                  onSubmit={handleSubmit(onSubmit)}
-                    <div className="flex items-center gap-x-2">
+                  className="divide-y-[0.5px] divide-custom-border-100 px-3"
-                      <div>
+                >
-                        <Controller
+                  <div className="mt-9 space-y-6 pb-5">
-                          name="emoji_and_icon"
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
-                          control={control}
+                      <div className="md:col-span-3">
-                          render={({ field: { value, onChange } }) => (
-                            <EmojiIconPicker
-                              label={
-                                value ? (
-                                  typeof value === "object" ? (
-                                    <span
-                                      style={{ color: value.color }}
-                                      className="material-symbols-rounded text-lg"
-                                    >
-                                      {value.name}
-                                    </span>
-                                  ) : (
-                                    renderEmoji(value)
-                                  )
-                                ) : (
-                                  "Icon"
-                                )
-                              }
-                              onChange={onChange}
-                              value={value}
-                            />
-                          )}
-                        />
-                      </div>
-
-                      <div className="flex-shrink-0 flex-grow">
                         <Input
                           id="name"
                           name="name"
                           type="name"
-                          placeholder="Enter name"
+                          placeholder="Project Title"
                           error={errors.name}
                           register={register}
-                          className="text-xl"
                           validations={{
-                            required: "Name is required",
+                            required: "Title is required",
                             maxLength: {
                               value: 255,
-                              message: "Name should be less than 255 characters",
+                              message: "Title should be less than 255 characters",
                             },
                           }}
+                          autoComplete="off"
+                          tabIndex={1}
                         />
                       </div>
-                    </div>
+                      <div>
-
-                    <div className="grid grid-cols-4 gap-4">
-                      <div className="col-span-3">
                         <Input
                           id="identifier"
                           name="identifier"
                           type="text"
                           className="text-sm"
-                          placeholder="Enter Project Identifier"
+                          placeholder="Identifier"
                           error={errors.identifier}
                           register={register}
                           onChange={() => setIsChangeIdentifierRequired(false)}
                           validations={{
                             required: "Identifier is required",
                             validate: (value) =>
-                              /^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
+                              /^[A-Z]+$/.test(value) || "Identifier must be in uppercase.",
                             minLength: {
                               value: 1,
                               message: "Identifier must at least be of 1 character",
@@ -291,47 +304,110 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                           }}
                         />
                       </div>
-                      <Controller
+                      <div className="md:col-span-4">
-                        name="network"
+                        <TextArea
-                        control={control}
+                          id="description"
-                        render={({ field: { onChange, value } }) => (
+                          name="description"
-                          <CustomSelect
+                          className="text-sm !h-[8rem]"
-                            value={value}
+                          placeholder="Description..."
-                            onChange={onChange}
+                          error={errors.description}
-                            label={
+                          register={register}
-                              Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
+                        />
-                                ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
+                      </div>
-                                : "Select network"
-                            }
-                            width="w-full"
-                            input
-                          >
-                            {Object.keys(NETWORK_CHOICES).map((key) => (
-                              <CustomSelect.Option key={key} value={parseInt(key)}>
-                                {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
-                              </CustomSelect.Option>
-                            ))}
-                          </CustomSelect>
-                        )}
-                      />
                     </div>
 
-                    <div>
+                    <div className="flex items-center gap-2 flex-wrap">
-                      <TextArea
+                      <div className="flex-shrink-0">
-                        id="description"
+                        <Controller
-                        name="description"
+                          name="network"
-                        className="text-sm"
+                          control={control}
-                        placeholder="Enter description"
+                          render={({ field: { onChange, value } }) => (
-                        error={errors.description}
+                            <CustomSelect
-                        register={register}
+                              value={value}
-                      />
+                              onChange={onChange}
+                              label={
+                                <div className="flex items-center gap-2 -mb-0.5 py-1">
+                                  {currentNetwork ? (
+                                    <>
+                                      <Icon iconName={currentNetwork?.icon} className="!text-xs" />
+                                      {currentNetwork.label}
+                                    </>
+                                  ) : (
+                                    <span className="text-custom-text-400">Select Network</span>
+                                  )}
+                                </div>
+                              }
+                              noChevron
+                            >
+                              {NETWORK_CHOICES.map((network) => (
+                                <CustomSelect.Option
+                                  key={network.key}
+                                  value={network.key}
+                                  className="flex items-center gap-1"
+                                >
+                                  <Icon iconName={network.icon} className="!text-xs" />
+                                  {network.label}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                      <div className="flex-shrink-0">
+                        <Controller
+                          name="project_lead"
+                          control={control}
+                          render={({ field: { value, onChange } }) => {
+                            const selectedMember = workspaceMembers?.find(
+                              (m) => m.member.id === value
+                            );
+
+                            return (
+                              <CustomSearchSelect
+                                value={value}
+                                onChange={onChange}
+                                options={options}
+                                label={
+                                  <div className="flex items-center justify-center gap-2 py-[1px]">
+                                    {value ? (
+                                      <>
+                                        <Avatar user={selectedMember?.member} />
+                                        <span>
+                                          {selectedMember?.member.first_name}{" "}
+                                          {selectedMember?.member.last_name}
+                                        </span>
+                                        <span onClick={() => onChange(null)}>
+                                          <Icon
+                                            iconName="close"
+                                            className="!text-xs -mb-0.5 text-custom-text-200 hover:text-custom-text-100"
+                                          />
+                                        </span>
+                                      </>
+                                    ) : (
+                                      <>
+                                        <Icon
+                                          iconName="group"
+                                          className="!text-sm text-custom-text-400"
+                                        />
+                                        <span className="text-custom-text-400">Lead</span>
+                                      </>
+                                    )}
+                                  </div>
+                                }
+                                verticalPosition="top"
+                                noChevron
+                              />
+                            );
+                          }}
+                        />
+                      </div>
                     </div>
                   </div>
 
-                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-custom-border-200 px-4 py-3">
+                  <div className="flex justify-end gap-2 pt-5">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
-                      {isSubmitting ? "Adding project..." : "Add Project"}
+                      {isSubmitting ? "Creating..." : "Create Project"}
                     </PrimaryButton>
                   </div>
                 </form>

apps/app/components/project/delete-project-modal.tsx

@@ -58,6 +58,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
 
   const handleClose = () => {
     setIsDeleteLoading(false);
+
     const timer = setTimeout(() => {
       setConfirmProjectName("");
       setConfirmDeleteMyProject(false);
@@ -71,20 +72,27 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
 
     setIsDeleteLoading(true);
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
-      false
-    );
-
     await projectService
       .deleteProject(workspaceSlug as string, data.id, user)
       .then(() => {
         handleClose();
 
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+          (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
+          false
+        );
+
         if (onSuccess) onSuccess();
       })
-      .catch(() => setIsDeleteLoading(false));
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again later.",
+        })
+      )
+      .finally(() => setIsDeleteLoading(false));
   };
 
   return (

apps/app/components/project/single-project-card.tsx

@@ -138,7 +138,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   alt={project.name}
                   className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
                 />
-                <div className="absolute left-7 bottom-4 flex items-center gap-3 text-white">
+                <div className="absolute bottom-4 left-4 flex items-center gap-3 text-white">
                   {!hasJoined ? (
                     <button
                       type="button"

apps/app/components/ui/dropdowns/custom-search-select.tsx

@@ -10,17 +10,21 @@ import { DropdownProps } from "./types";
 
 export type CustomSearchSelectProps = DropdownProps & {
   footerOption?: JSX.Element;
-  multiple?: boolean;
-  value: any;
   onChange: any;
   options:
     | {
         value: any;
         query: string;
-        content: JSX.Element;
+        content: React.ReactNode;
       }[]
     | undefined;
-};
+} & (
+    | { multiple?: false; value: any } // if multiple is false, value can be anything
+    | {
+        multiple?: true;
+        value: any[]; // if multiple is true, value should be an array
+      }
+  );
 
 export const CustomSearchSelect = ({
   buttonClassName = "",
@@ -103,7 +107,7 @@ export const CustomSearchSelect = ({
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder="Type to search..."
                   displayValue={(assigned: any) => assigned?.name}

apps/app/components/ui/dropdowns/custom-select.tsx

@@ -89,7 +89,7 @@ const CustomSelect = ({
 );
 
 type OptionProps = {
-  children: string | JSX.Element;
+  children: React.ReactNode;
   value: any;
   className?: string;
 };

apps/app/components/ui/text-area/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useRef, useEffect } from "react";
 import { Props } from "./types";
 
 // Updates the height of a <textarea> when the value changes.
-const useAutosizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
+const useAutoSizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
   useEffect(() => {
     if (textAreaRef) {
       // We need to reset the height momentarily to get the correct scrollHeight for the textarea
@@ -40,7 +40,7 @@ export const TextArea: React.FC<Props> = ({
 
   const textAreaRef = useRef<any>(null);
 
-  useAutosizeTextArea(textAreaRef.current, textareaValue);
+  useAutoSizeTextArea(textAreaRef.current, textareaValue);
 
   return (
     <>

apps/app/constants/project.ts

@@ -1,4 +1,15 @@
-export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: string }[] = [
+  {
+    key: 0,
+    label: "Private",
+    icon: "lock",
+  },
+  {
+    key: 2,
+    label: "Public",
+    icon: "public",
+  },
+];
 
 export const GROUP_CHOICES = {
   backlog: "Backlog",

apps/app/hooks/use-workspace-members.tsx

@@ -6,7 +6,7 @@ import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // hooks
 import useUser from "./use-user";
 
-const useWorkspaceMembers = (workspaceSlug?: string) => {
+const useWorkspaceMembers = (workspaceSlug: string) => {
   const { user } = useUser();
 
   const { data: workspaceMembers, error: workspaceMemberErrors } = useSWR(

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx

@@ -19,7 +19,7 @@ import { SettingsHeader } from "components/project";
 import { CustomSelect, Loader, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import { IProject, IWorkspace } from "types";
+import { IProject, IUserLite, IWorkspace } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -93,7 +93,7 @@ const ControlSettings: NextPage = () => {
       reset({
         ...projectDetails,
         default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
-        project_lead: projectDetails.project_lead?.id ?? projectDetails.project_lead,
+        project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
         workspace: (projectDetails.workspace as IWorkspace).id,
       });
   }, [projectDetails, reset]);

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -145,6 +145,8 @@ const GeneralSettings: NextPage = () => {
     else await updateProject(payload);
   };
 
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -336,16 +338,12 @@ const GeneralSettings: NextPage = () => {
                     <CustomSelect
                       value={value}
                       onChange={onChange}
-                      label={
+                      label={currentNetwork?.label ?? "Select network"}
-                        Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
-                          ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
-                          : "Select network"
-                      }
                       input
                     >
-                      {Object.keys(NETWORK_CHOICES).map((key) => (
+                      {NETWORK_CHOICES.map((network) => (
-                        <CustomSelect.Option key={key} value={parseInt(key)}>
+                        <CustomSelect.Option key={network.key} value={network.key}>
-                          {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
+                          {network.label}
                         </CustomSelect.Option>
                       ))}
                     </CustomSelect>

apps/app/types/projects.d.ts

@@ -44,7 +44,7 @@ export interface IProject {
   name: string;
   network: number;
   page_view: boolean;
-  project_lead: IUser | string | null;
+  project_lead: IUserLite | string | null;
   slug: string;
   total_cycles: number;
   total_members: number;