From 2f3fe3c5063ba8874ab1c3196d14ad47268999b3 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 8 Nov 2023 14:50:29 +0530
Subject: [PATCH 1/3] style: create/update issue modal properties ui
 improvement

---
 .../ui/src/dropdowns/custom-search-select.tsx |  4 +--
 packages/ui/src/dropdowns/custom-select.tsx   |  4 +--
 web/components/issues/form.tsx                | 35 +++++++++----------
 web/components/issues/select/assignee.tsx     |  9 +++--
 web/components/issues/select/cycle.tsx        | 16 ++++-----
 web/components/issues/select/date.tsx         | 11 +++---
 web/components/issues/select/estimate.tsx     |  6 ++--
 web/components/issues/select/label.tsx        |  8 ++---
 web/components/issues/select/module.tsx       | 26 +++++---------
 web/components/issues/select/priority.tsx     |  8 ++---
 web/components/issues/select/state.tsx        |  8 ++---
 web/components/ui/labels-list.tsx             |  2 +-
 12 files changed, 59 insertions(+), 78 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 8ba95c28cc6..3f1e503a8a0 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -87,8 +87,8 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <button
                   ref={setReferenceElement}
                   type="button"
-                  className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
-                    input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                  className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
+                    input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                   } ${
                     disabled
                       ? "cursor-not-allowed text-custom-text-200"
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index b48d26aeeef..dd4d1d786e3 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -65,8 +65,8 @@ const CustomSelect = (props: ICustomSelectProps) => {
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
-                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
+                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
               } ${
                 disabled
                   ? "cursor-not-allowed text-custom-text-200"
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index b54ce112183..cb8acd50b05 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -541,27 +541,26 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                       customButton={
                         <button
                           type="button"
-                          className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200"
+                          className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
                         >
-                          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
-                            {watch("parent") ? (
-                              <>
-                                <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
-                                <span className="whitespace-nowrap text-custom-text-100">
-                                  {selectedParentIssue &&
-                                    `${selectedParentIssue.project__identifier}-
+                          {watch("parent") ? (
+                            <div className="flex items-center gap-1 text-custom-text-200">
+                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                              <span className="whitespace-nowrap">
+                                {selectedParentIssue &&
+                                  `${selectedParentIssue.project__identifier}-
                                   ${selectedParentIssue.sequence_id}`}
-                                </span>
-                              </>
-                            ) : (
-                              <>
-                                <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
-                                <span className="whitespace-nowrap">Add Parent</span>
-                              </>
-                            )}
-                          </span>
+                              </span>
+                            </div>
+                          ) : (
+                            <div className="flex items-center gap-1 text-custom-text-300">
+                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                              <span className="whitespace-nowrap">Add Parent</span>
+                            </div>
+                          )}
                         </button>
                       }
+                      placement="bottom-start"
                     >
                       {watch("parent") ? (
                         <>
@@ -599,7 +598,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
           <div
             className="flex cursor-pointer items-center gap-1"
             onClick={() => setCreateMore((prevData) => !prevData)}
diff --git a/web/components/issues/select/assignee.tsx b/web/components/issues/select/assignee.tsx
index 4d7ec27dfb9..8778c6c6208 100644
--- a/web/components/issues/select/assignee.tsx
+++ b/web/components/issues/select/assignee.tsx
@@ -3,8 +3,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
-import { User2 } from "lucide-react";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -58,9 +57,9 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
               </AvatarGroup>
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-              <User2 className="h-4 w-4" />
-              <span className="text-custom-text-200">Assignee</span>
+            <div className="flex items-center justify-center gap-1 w-full text-custom-text-300 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs">
+              <UserGroupIcon className="h-3 w-3" />
+              <span>Assignee</span>
             </div>
           )}
         </div>
diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx
index 3df4948a7c4..742774851a4 100644
--- a/web/components/issues/select/cycle.tsx
+++ b/web/components/issues/select/cycle.tsx
@@ -55,17 +55,15 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = selectedCycle ? (
-    <div className="flex items-center gap-1.5">
-      <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
-        <ContrastIcon />
-      </span>
+    <div className="flex items-center gap-1 text-custom-text-200">
+      <ContrastIcon className="h-3 w-3" />
       <div className="truncate">{selectedCycle.name}</div>
     </div>
   ) : (
-    <>
+    <div className="flex items-center gap-1 text-custom-text-300">
       <ContrastIcon className="h-3 w-3" />
-      <span>Select Cycle</span>
-    </>
+      <span>Cycle</span>
+    </div>
   );
 
   return (
@@ -80,9 +78,7 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
-            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-          }`}
+          className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
           onClick={fetchCycles}
         >
           {label}
diff --git a/web/components/issues/select/date.tsx b/web/components/issues/select/date.tsx
index e3c2b9614ae..a5902635a9e 100644
--- a/web/components/issues/select/date.tsx
+++ b/web/components/issues/select/date.tsx
@@ -30,19 +30,20 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
           <Popover.Button>
             <div
               ref={setReferenceElement}
-              className="cursor-pointer rounded-md border border-custom-border-200 shadow-sm duration-200 flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
+              className="flex items-center justify-center gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
             >
               {value ? (
                 <>
-                  <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
+                  <CalendarDays className="h-3 w-3 flex-shrink-0" />
+                  <span>{renderShortDateWithYearFormat(value)}</span>
                   <button onClick={() => onChange(null)}>
-                    <X className="h-3 w-3" />
+                    <X className="h-3 w-3 flex-shrink-0" />
                   </button>
                 </>
               ) : (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
-                  <span>{label}</span>
+                  <CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
+                  <span className="text-custom-text-300">{label}</span>
                 </>
               )}
             </div>
diff --git a/web/components/issues/select/estimate.tsx b/web/components/issues/select/estimate.tsx
index f2d8750728e..f3da8a12ab9 100644
--- a/web/components/issues/select/estimate.tsx
+++ b/web/components/issues/select/estimate.tsx
@@ -21,9 +21,9 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
     <CustomSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 text-xs">
-          <Triangle className={`h-3.5 w-3.5 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
-          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
+        <div className="flex items-center justify-center gap-1 text-xs">
+          <Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-200" : "text-custom-text-300"}`} />
+          <span className={value !== null ? "text-custom-text-200" : "text-custom-text-300"}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
         </div>
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index 47b1d4e5b02..a85b073ebb3 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -68,10 +68,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   />
                 </span>
               ) : (
-                <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-                  <Tag className="h-3.5 w-3.5 text-custom-text-200" />
-                  <span className=" text-custom-text-200">Label</span>
-                </span>
+                <div className="flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80">
+                  <Tag className="h-3 w-3 text-custom-text-300" />
+                  <span className="text-custom-text-300">Label</span>
+                </div>
               )}
             </div>
           </Combobox.Button>
diff --git a/web/components/issues/select/module.tsx b/web/components/issues/select/module.tsx
index c0d9c6c4c3b..cb9d6252bbc 100644
--- a/web/components/issues/select/module.tsx
+++ b/web/components/issues/select/module.tsx
@@ -55,34 +55,24 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = selectedModule ? (
-    <div className="flex items-center gap-1.5">
-      <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
-        <DiceIcon />
-      </span>
-      <div className="truncate">{selectedModule.name}</div>
+    <div className="flex items-center gap-1 text-custom-text-200">
+      <DiceIcon className="h-3 w-3" />
+      <span className="truncate">{selectedModule.name}</span>
     </div>
   ) : (
-    <>
+    <div className="flex items-center gap-1 text-custom-text-300">
       <DiceIcon className="h-3 w-3" />
-      <span>Select Module</span>
-    </>
+      <span>Module</span>
+    </div>
   );
 
   return (
-    <Combobox
-      as="div"
-      className={`flex-shrink-0 text-left`}
-      value={value}
-      onChange={(val: string) => onChange(val)}
-      disabled={false}
-    >
+    <Combobox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={(val: string) => onChange(val)}>
       <Combobox.Button as={React.Fragment}>
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
-            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-          }`}
+          className="flex items-center justify-between gap-1 w-full text-xs px-2 py-1 cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200  hover:bg-custom-background-80"
           onClick={fetchModules}
         >
           {label}
diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
index 503a6543b4c..03f468b6c86 100644
--- a/web/components/issues/select/priority.tsx
+++ b/web/components/issues/select/priority.tsx
@@ -16,11 +16,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
   <CustomSelect
     value={value}
     label={
-      <div className="flex items-center justify-center gap-2 text-xs">
-        <span className="flex items-center">
-          <PriorityIcon priority={value} className={`h-3.5 w-3.5 ${value ? "" : "text-custom-text-200"}`} />
-        </span>
-        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>{value ?? "Priority"}</span>
+      <div className="flex items-center justify-center gap-1 text-custom-text-200">
+        <PriorityIcon priority={value} className="h-3 w-3" />
+        <span className="text-xs capitalize">{value ?? "Priority"}</span>
       </div>
     }
     onChange={onChange}
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index 024024641fb..4bab99c4a9a 100644
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@@ -56,17 +56,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 text-custom-text-200">
           {selectedOption ? (
             <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
           ) : currentDefaultState ? (
             <StateGroupIcon stateGroup={currentDefaultState.group} color={currentDefaultState.color} />
           ) : (
-            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+            <DoubleCircleIcon className="h-3 w-3" />
           )}
-          {selectedOption?.name
-            ? selectedOption.name
-            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+          {selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? <span>State</span>}
         </div>
       }
       footerOption={
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
index ba054b116aa..c7e4306a2e0 100644
--- a/web/components/ui/labels-list.tsx
+++ b/web/components/ui/labels-list.tsx
@@ -17,7 +17,7 @@ export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
       {labels && (
         <>
           <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labels.map((l) => l?.name).join(", ")}>
-            <div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
+            <div className="flex items-center gap-1 px-2 py-1 text-xs text-custom-text-200 rounded border-[0.5px] border-custom-border-300">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
               {`${labels.length} Labels`}
             </div>

From 4f257f60d2551d2be54e30fda3de68773a978636 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 8 Nov 2023 15:41:07 +0530
Subject: [PATCH 2/3] style: create update issue modal improvement

---
 web/components/issues/form.tsx           | 17 ++++++++++-------
 web/components/issues/modal.tsx          |  2 +-
 web/components/issues/select/project.tsx | 12 ++----------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index cb8acd50b05..264bd8c82e5 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -335,8 +335,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                         onChange={onChange}
                         ref={ref}
                         hasError={Boolean(errors.name)}
-                        placeholder="Title"
-                        className="resize-none text-xl w-full"
+                        placeholder="Issue Title"
+                        className="resize-none text-xl w-full focus:border-blue-400"
                       />
                     )}
                   />
@@ -344,7 +344,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
                 <div className="relative">
-                  <div className="flex justify-end">
+                  <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex rounded bg-custom-background-80">
                     {issueName && issueName !== "" && (
                       <button
                         type="button"
@@ -386,7 +386,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                             ? watch("description_html")
                             : value
                         }
-                        customClassName="min-h-[150px]"
+                        customClassName="min-h-[7rem] border-custom-border-100"
                         onChange={(description: Object, description_html: string) => {
                           onChange(description_html);
                           setValue("description", description);
@@ -600,22 +600,25 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
         </div>
         <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
           <div
-            className="flex cursor-pointer items-center gap-1"
+            className="flex cursor-default items-center gap-1.5"
             onClick={() => setCreateMore((prevData) => !prevData)}
           >
+            <div className="flex cursor-pointer items-center justify-center">
+              <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
+            </div>
             <span className="text-xs">Create more</span>
-            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
             <Button
               variant="neutral-primary"
+              size="sm"
               onClick={() => {
                 handleDiscardClose();
               }}
             >
               Discard
             </Button>
-            <Button variant="primary" type="submit" loading={isSubmitting}>
+            <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
               {status
                 ? isSubmitting
                   ? "Updating Issue..."
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index 12f9074540d..4bd6fc9b257 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -324,7 +324,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                 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="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-3xl">
                   <IssueForm
                     handleFormSubmit={handleFormSubmit}
                     initialData={data ?? prePopulateData}
diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx
index 08f245b1480..46176eac62f 100644
--- a/web/components/issues/select/project.tsx
+++ b/web/components/issues/select/project.tsx
@@ -71,20 +71,12 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
     </>
   );
   return (
-    <Combobox
-      as="div"
-      className={`flex-shrink-0 text-left`}
-      value={value}
-      onChange={(val: string) => onChange(val)}
-      disabled={false}
-    >
+    <Combobox as="div" className="flex-shrink-0 text-left" value={value} onChange={(val: string) => onChange(val)}>
       <Combobox.Button as={React.Fragment}>
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
-            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-          }`}
+          className="flex items-center justify-center gap-1 w-full text-xs px-2 py-1 rounded text-custom-text-300  border-[0.5px] border-custom-border-300   hover:bg-custom-background-80"
         >
           {label}
         </button>

From 7d57f78f1630fce071d28643d29fbdeb24115e53 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 8 Nov 2023 16:27:31 +0530
Subject: [PATCH 3/3] style: modal ui consistency

---
 web/components/cycles/form.tsx                |  2 +-
 web/components/issues/modal.tsx               |  2 +-
 web/components/modules/select/lead.tsx        |  8 +++--
 web/components/modules/select/members.tsx     |  6 ++--
 .../project/create-project-modal.tsx          |  6 ++--
 web/components/ui/date.tsx                    | 31 +++++++++----------
 web/components/views/form.tsx                 |  2 +-
 web/components/workspace/member-select.tsx    |  7 ++---
 8 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index b262edb1519..7189b2fea76 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -135,7 +135,7 @@ export const CycleForm: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-100 ">
         <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index 4bd6fc9b257..12f9074540d 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -324,7 +324,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                 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="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-3xl">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
                   <IssueForm
                     handleFormSubmit={handleFormSubmit}
                     initialData={data ?? prePopulateData}
diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
index 9e12e2017bf..69ba71bf962 100644
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@@ -50,9 +50,13 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           {selectedOption ? (
             <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
           ) : (
-            <UserCircle className="h-4 w-4 text-custom-text-200" />
+            <UserCircle className="h-3 w-3 text-custom-text-300" />
+          )}
+          {selectedOption ? (
+            selectedOption?.display_name
+          ) : (
+            <span className={`${selectedOption ? "text-custom-text-200" : "text-custom-text-300"}`}>Lead</span>
           )}
-          {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
         </div>
       }
       onChange={onChange}
diff --git a/web/components/modules/select/members.tsx b/web/components/modules/select/members.tsx
index 94c74f05bb8..17b80a4715e 100644
--- a/web/components/modules/select/members.tsx
+++ b/web/components/modules/select/members.tsx
@@ -55,9 +55,9 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
               <span className="text-custom-text-200">{value.length} Assignees</span>
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
-              <span className="text-custom-text-200">Assignee</span>
+            <div className="flex items-center justify-center gap-2 text-custom-text-300">
+              <UserGroupIcon className="h-3 w-3" />
+              <span>Assignee</span>
             </div>
           )}
         </div>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 6be880dcbfb..ff89af2c798 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -265,7 +265,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               onChange={handleNameChange(onChange)}
                               hasError={Boolean(errors.name)}
                               placeholder="Project Title"
-                              className="w-full"
+                              className="w-full focus:border-blue-400"
                             />
                           )}
                         />
@@ -298,7 +298,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               onChange={handleIdentifierChange(onChange)}
                               hasError={Boolean(errors.identifier)}
                               placeholder="Identifier"
-                              className="text-xs w-full"
+                              className="text-xs w-full focus:border-blue-400"
                             />
                           )}
                         />
@@ -316,7 +316,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               tabIndex={3}
                               placeholder="Description..."
                               onChange={onChange}
-                              className="text-sm !h-24"
+                              className="text-sm !h-24 focus:border-blue-400"
                               hasError={Boolean(errors?.description)}
                             />
                           )}
diff --git a/web/components/ui/date.tsx b/web/components/ui/date.tsx
index 31cbdc9fd5d..acc8eb1eac8 100644
--- a/web/components/ui/date.tsx
+++ b/web/components/ui/date.tsx
@@ -21,22 +21,21 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, m
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ close }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
-            {value ? (
-              <>
-                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
-                <button onClick={() => onChange(null)}>
-                  <X className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDays className="h-4 w-4 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
+        <Popover.Button className="flex items-center justify-center gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80">
+          {value ? (
+            <>
+              <CalendarDays className="h-3 w-3 flex-shrink-0" />
+              <span>{renderShortDateWithYearFormat(value)}</span>
+              <button onClick={() => onChange(null)}>
+                <X className="h-3 w-3" />
+              </button>
+            </>
+          ) : (
+            <>
+              <CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
+              <span className="text-custom-text-300">{label}</span>
+            </>
+          )}
         </Popover.Button>
 
         <Transition
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 55ccb2fee7b..05169c59975 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -88,7 +88,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
                   onChange={onChange}
                   hasError={Boolean(errors.name)}
                   placeholder="Title"
-                  className="resize-none text-xl"
+                  className="resize-none w-full text-xl focus:border-blue-400"
                 />
               )}
             />
diff --git a/web/components/workspace/member-select.tsx b/web/components/workspace/member-select.tsx
index 3ba1cbd899f..bae16de015f 100644
--- a/web/components/workspace/member-select.tsx
+++ b/web/components/workspace/member-select.tsx
@@ -48,10 +48,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
       : options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
-    <div
-      className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
-            "
-    >
+    <div className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
       {value ? (
         <>
           <Avatar name={value?.member.display_name} src={value?.member.avatar} />
@@ -81,7 +78,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
       </Listbox.Button>
       <Listbox.Options>
         <div
-          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs  focus:outline-none w-48 whitespace-nowrap my-1`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}