style: ui consistency and improvement (#2725)

* style: create/update issue modal properties ui improvement

* style: create update issue modal improvement

* style: modal ui consistency

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 ${
+                  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.5 py-1 text-xs"
+                    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 ${
+              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.5 py-1 text-xs"
+                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

@@ -339,8 +339,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                         onChange={onChange}
                         ref={ref}
                         hasError={Boolean(errors.name)}
-                        placeholder="Title"
+                        placeholder="Issue Title"
-                        className="resize-none text-xl w-full"
+                        className="resize-none text-xl w-full focus:border-blue-400"
                       />
                     )}
                   />
@@ -348,7 +348,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"
@@ -390,7 +390,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);
@@ -545,27 +545,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") ? (
-                              <>
+                            <div className="flex items-center gap-1 text-custom-text-200">
-                                <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
+                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                                <span className="whitespace-nowrap text-custom-text-100">
+                              <span className="whitespace-nowrap">
                                 {selectedParentIssue &&
                                   `${selectedParentIssue.project__identifier}-
                                   ${selectedParentIssue.sequence_id}`}
                               </span>
-                              </>
+                            </div>
                           ) : (
-                              <>
+                            <div className="flex items-center gap-1 text-custom-text-300">
-                                <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
+                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
                               <span className="whitespace-nowrap">Add Parent</span>
-                              </>
+                            </div>
                           )}
-                          </span>
                         </button>
                       }
+                      placement="bottom-start"
                     >
                       {watch("parent") ? (
                         <>
@@ -603,24 +602,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 { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
-import { User2 } from "lucide-react";
 // 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">
+            <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">
-              <User2 className="h-4 w-4" />
+              <UserGroupIcon className="h-3 w-3" />
-              <span className="text-custom-text-200">Assignee</span>
+              <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">
+    <div className="flex items-center gap-1 text-custom-text-200">
-      <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+      <ContrastIcon className="h-3 w-3" />
-        <ContrastIcon />
-      </span>
       <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 ${
+          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"
-            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer 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" />
+                  <CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
-                  <span>{label}</span>
+                  <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">
+        <div className="flex items-center justify-center gap-1 text-xs">
-          <Triangle className={`h-3.5 w-3.5 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
+          <Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-200" : "text-custom-text-300"}`} />
-          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
+          <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">
+                <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.5 w-3.5 text-custom-text-200" />
+                  <Tag className="h-3 w-3 text-custom-text-300" />
-                  <span className=" text-custom-text-200">Label</span>
+                  <span className="text-custom-text-300">Label</span>
-                </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">
+    <div className="flex items-center gap-1 text-custom-text-200">
-      <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+      <DiceIcon className="h-3 w-3" />
-        <DiceIcon />
+      <span className="truncate">{selectedModule.name}</span>
-      </span>
-      <div className="truncate">{selectedModule.name}</div>
     </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
+    <Combobox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={(val: string) => onChange(val)}>
-      as="div"
-      className={`flex-shrink-0 text-left`}
-      value={value}
-      onChange={(val: string) => onChange(val)}
-      disabled={false}
-    >
       <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 ${
+          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"
-            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer 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">
+      <div className="flex items-center justify-center gap-1 text-custom-text-200">
-        <span className="flex items-center">
+        <PriorityIcon priority={value} className="h-3 w-3" />
-          <PriorityIcon priority={value} className={`h-3.5 w-3.5 ${value ? "" : "text-custom-text-200"}`} />
+        <span className="text-xs capitalize">{value ?? "Priority"}</span>
-        </span>
-        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>{value ?? "Priority"}</span>
       </div>
     }
     onChange={onChange}

web/components/issues/select/project.tsx

@@ -73,20 +73,12 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
     </>
   );
   return (
-    <Combobox
+    <Combobox as="div" className="flex-shrink-0 text-left" value={value} onChange={(val: string) => onChange(val)}>
-      as="div"
-      className={`flex-shrink-0 text-left`}
-      value={value}
-      onChange={(val: string) => onChange(val)}
-      disabled={false}
-    >
       <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 ${
+          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"
-            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer 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 ? selectedOption.name : currentDefaultState?.name ?? <span>State</span>}
-            ? selectedOption.name
-            : currentDefaultState?.name ?? <span className="text-custom-text-200">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">
+            <div className="flex items-center justify-center gap-2 text-custom-text-300">
-              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <UserGroupIcon className="h-3 w-3" />
-              <span className="text-custom-text-200">Assignee</span>
+              <span>Assignee</span>
             </div>
           )}
         </div>

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

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">
+        <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">
-          <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>
+              <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-4 w-4 flex-shrink-0" />
+              <CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
-                <span>{label}</span>
+              <span className="text-custom-text-300">{label}</span>
             </>
           )}
-          </span>
         </Popover.Button>
 
         <Transition

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>

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"
                 />
               )}
             />

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
+    <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">
-      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
-            "
-    >
       {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}