style: ui consistency and improvement

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"

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"

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>

web/components/issues/form.tsx

@@ -335,16 +335,16 @@ 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"
                       />
                     )}
                   />
                 </div>
               )}
               {(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);
@@ -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,24 +598,27 @@ 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"
+            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..."

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>

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}

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>

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>

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>

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}

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}

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>

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={

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}

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>