From a4e2ad6176bed389f13edaf2726651693d5c117f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 20 Feb 2024 16:12:01 +0530
Subject: [PATCH 1/4] chore: project access specifier description added

---
 packages/ui/src/dropdowns/custom-select.tsx     |  8 ++++----
 .../core/filters/date-filter-select.tsx         |  4 ++--
 .../modules/sidebar-select/select-status.tsx    |  4 ++--
 web/components/project/create-project-modal.tsx | 17 +++++++++--------
 web/constants/project.ts                        |  9 ++++++++-
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 0fa183cb2ce..37608ea8db6 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -122,7 +122,7 @@ const Option = (props: ICustomSelectItemProps) => {
       value={value}
       className={({ active }) =>
         cn(
-          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200 flex items-center justify-between gap-2",
           {
             "bg-custom-background-80": active,
           },
@@ -131,10 +131,10 @@ const Option = (props: ICustomSelectItemProps) => {
       }
     >
       {({ selected }) => (
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">{children}</div>
+        <>
+          {children}
           {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-        </div>
+        </>
       )}
     </Listbox.Option>
   );
diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
index 2585e2f9575..9bb10f800d0 100644
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -51,10 +51,10 @@ export const DateFilterSelect: React.FC<Props> = ({ title, value, onChange }) =>
   >
     {dueDateRange.map((option, index) => (
       <CustomSelect.Option key={index} value={option.value}>
-        <>
+        <div className="flex items-center gap-2">
           <span>{option.icon}</span>
           {title} {option.name}
-        </>
+        </div>
       </CustomSelect.Option>
     ))}
   </CustomSelect>
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index 0eb60ebb271..b8c337fd489 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -46,10 +46,10 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
           >
             {MODULE_STATUS.map((option) => (
               <CustomSelect.Option key={option.value} value={option.value}>
-                <>
+                <div className="flex items-center gap-2">
                   <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
                   {option.label}
-                </>
+                </div>
               </CustomSelect.Option>
             ))}
           </CustomSelect>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index db0c284f234..cae875c8273 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -160,7 +160,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
             payload: {
               ...payload,
               state: "FAILED",
-            }
+            },
           });
         });
       });
@@ -365,13 +365,14 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               tabIndex={4}
                             >
                               {NETWORK_CHOICES.map((network) => (
-                                <CustomSelect.Option
-                                  key={network.key}
-                                  value={network.key}
-                                  className="flex items-center gap-1"
-                                >
-                                  <network.icon className="h-4 w-4" />
-                                  {network.label}
+                                <CustomSelect.Option key={network.key} value={network.key}>
+                                  <div className="flex items-start gap-2">
+                                    <network.icon className="h-3.5 w-3.5" />
+                                    <div className="-mt-1">
+                                      <p>{network.label}</p>
+                                      <p className="text-xs text-custom-text-400">{network.description}.</p>
+                                    </div>
+                                  </div>
                                 </CustomSelect.Option>
                               ))}
                             </CustomSelect>
diff --git a/web/constants/project.ts b/web/constants/project.ts
index f9819c780e6..9e7bdee9ef5 100644
--- a/web/constants/project.ts
+++ b/web/constants/project.ts
@@ -11,15 +11,22 @@ export enum EUserProjectRoles {
   ADMIN = 20,
 }
 
-export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: LucideIcon }[] = [
+export const NETWORK_CHOICES: {
+  key: 0 | 2;
+  label: string;
+  description: string;
+  icon: LucideIcon;
+}[] = [
   {
     key: 0,
     label: "Private",
+    description: "Accessible only by invite",
     icon: Lock,
   },
   {
     key: 2,
     label: "Public",
+    description: "Anyone in the workspace can join",
     icon: Globe2,
   },
 ];

From 5b4af91d0e370f7b0aceaa2eb47745a118500ebf Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 20 Feb 2024 16:19:26 +0530
Subject: [PATCH 2/4] chore: project access specifier description added to the
 project settings form

---
 .../project/create-project-modal.tsx          |  3 +-
 web/components/project/form.tsx               | 57 +++++++++++++------
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index cae875c8273..586950b2151 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // hooks
-import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useProject, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
@@ -66,7 +66,6 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const { currentWorkspace } = useWorkspace();
   const { addProjectToFavorites, createProject } = useProject();
   // states
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 58515d030f8..af0d3f434a9 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -132,7 +132,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     }, 300);
   };
   const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
-  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="relative mt-6 h-44 w-full">
@@ -269,23 +269,44 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             <Controller
               name="network"
               control={control}
-              render={({ field: { value, onChange } }) => (
-                <CustomSelect
-                  value={value}
-                  onChange={onChange}
-                  label={selectedNetwork?.label ?? "Select network"}
-                  buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md"
-                  input
-                  disabled={!isAdmin}
-                  optionsClassName="w-full"
-                >
-                  {NETWORK_CHOICES.map((network) => (
-                    <CustomSelect.Option key={network.key} value={network.key}>
-                      {network.label}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              )}
+              render={({ field: { value, onChange } }) => {
+                const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+
+                return (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={
+                      <div className="flex items-center gap-1">
+                        {selectedNetwork ? (
+                          <>
+                            <selectedNetwork.icon className="h-3.5 w-3.5" />
+                            {selectedNetwork.label}
+                          </>
+                        ) : (
+                          <span className="text-custom-text-400">Select network</span>
+                        )}
+                      </div>
+                    }
+                    buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md"
+                    input
+                    disabled={!isAdmin}
+                    optionsClassName="w-full"
+                  >
+                    {NETWORK_CHOICES.map((network) => (
+                      <CustomSelect.Option key={network.key} value={network.key}>
+                        <div className="flex items-start gap-2">
+                          <network.icon className="h-3.5 w-3.5" />
+                          <div className="-mt-1">
+                            <p>{network.label}</p>
+                            <p className="text-xs text-custom-text-400">{network.description}.</p>
+                          </div>
+                        </div>
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                );
+              }}
             />
           </div>
         </div>

From 3e3e73521255d93ea0c33fe08c95ef20806ceb4e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 20 Feb 2024 17:58:02 +0530
Subject: [PATCH 3/4] chore: remove fullstop

---
 web/components/project/create-project-modal.tsx | 2 +-
 web/components/project/form.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 586950b2151..83589795e19 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -369,7 +369,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                                     <network.icon className="h-3.5 w-3.5" />
                                     <div className="-mt-1">
                                       <p>{network.label}</p>
-                                      <p className="text-xs text-custom-text-400">{network.description}.</p>
+                                      <p className="text-xs text-custom-text-400">{network.description}</p>
                                     </div>
                                   </div>
                                 </CustomSelect.Option>
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index af0d3f434a9..4af55b70a69 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -299,7 +299,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                           <network.icon className="h-3.5 w-3.5" />
                           <div className="-mt-1">
                             <p>{network.label}</p>
-                            <p className="text-xs text-custom-text-400">{network.description}.</p>
+                            <p className="text-xs text-custom-text-400">{network.description}</p>
                           </div>
                         </div>
                       </CustomSelect.Option>

From 037e6b17e698e581d9b23e8c525bedddd3da5b51 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 20 Feb 2024 18:01:17 +0530
Subject: [PATCH 4/4] fix: dropdown width

---
 web/components/project/form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 4af55b70a69..267103dc8ba 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -291,7 +291,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                     buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md"
                     input
                     disabled={!isAdmin}
-                    optionsClassName="w-full"
+                    // optionsClassName="w-full"
                   >
                     {NETWORK_CHOICES.map((network) => (
                       <CustomSelect.Option key={network.key} value={network.key}>