github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: dropdown ui consisteny

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-02 09:38:13 +05:30
parent d8e1710a9b
commit fdbad4ff1a
2 changed files with 34 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/app/components/issues/select/assignee.tsx
View File

@ -74,19 +74,17 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
}` }`
} }
> >
<span className="flex justify-center items-center text-xs"> {value && value.length > 0 && Array.isArray(value) ? (
{value && value.length > 0 && Array.isArray(value) ? ( <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
<span className="flex items-center justify-center gap-2 px-3 py-1"> <AssigneesList userIds={value} length={3} showLength={false} />
<AssigneesList userIds={value} length={3} showLength={false} /> <span className=" text-[#495057]">{value.length} Assignees</span>
<span className=" text-[#495057]">{value.length} Assignees</span> </span>
</span> ) : (
) : ( <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<span className="flex items-center justify-center gap-2 px-3 py-1.5"> <UserGroupIcon className="h-4 w-4 text-gray-500 " />
<UserGroupIcon className="h-4 w-4 text-gray-500 " /> <span className=" text-[#858E96]">Assignee</span>
<span className=" text-[#858E96]">Assignee</span> </span>
</span> )}
)}
</span>
</Combobox.Button> </Combobox.Button>
<Transition <Transition
@ -97,9 +95,8 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Combobox.Options <Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
text-xs rounded-md shadow-md overflow-auto border-none bg-white rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
ring-1 ring-black ring-opacity-5 focus:outline-none`}
> >
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2"> <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" /> <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />

45
apps/app/components/issues/select/state.tsx
View File

@ -71,28 +71,26 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
}` }`
} }
> >
<span className="flex justify-center items-center text-xs"> {value && value !== "" ? (
{value && value !== "" ? ( <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<span className="flex items-center justify-center gap-2 px-3 py-1.5"> <span
<span className="h-3 w-3 flex-shrink-0 rounded-full"
className="h-3 w-3 flex-shrink-0 rounded-full" style={{
style={{ backgroundColor: options?.find((option) => option.value === value)?.color,
backgroundColor: options?.find((option) => option.value === value)?.color, }}
}} />
/> <span className=" text-[#495057]">
<span className=" text-[#495057]"> {options?.find((option) => option.value === value)?.display}
{options?.find((option) => option.value === value)?.display}
</span>
</span> </span>
) : ( </span>
<span className="flex items-center justify-center gap-1 px-3 py-1.5"> ) : (
<Squares2X2Icon className="h-4 w-4 text-gray-500 " /> <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<span className=" text-[#858E96]"> <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
{options?.find((option) => option.value === value)?.display || "State"} <span className=" text-[#858E96]">
</span> {options?.find((option) => option.value === value)?.display || "State"}
</span> </span>
)} </span>
</span> )}
</Combobox.Button> </Combobox.Button>
<Transition <Transition
@ -103,16 +101,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Combobox.Options <Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
text-xs rounded-md shadow-md overflow-auto border-none bg-white rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
ring-1 ring-black ring-opacity-5 focus:outline-none`}
> >
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2"> <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" /> <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
<Combobox.Input <Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search" placeholder="Search States"
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
</div> </div>