thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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) ? (
<span className="flex items-center justify-center gap-2 px-3 py-1">
<AssigneesList userIds={value} length={3} showLength={false} />
<span className=" text-[#495057]">{value.length} Assignees</span>
</span>
) : (
<span className="flex items-center justify-center gap-2 px-3 py-1.5">
<UserGroupIcon className="h-4 w-4 text-gray-500 " />
<span className=" text-[#858E96]">Assignee</span>
</span>
)}
</span>
{value && value.length > 0 && Array.isArray(value) ? (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
<AssigneesList userIds={value} length={3} showLength={false} />
<span className=" text-[#495057]">{value.length} Assignees</span>
</span>
) : (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<UserGroupIcon className="h-4 w-4 text-gray-500 " />
<span className=" text-[#858E96]">Assignee</span>
</span>
)}
</Combobox.Button>
<Transition
@ -97,9 +95,8 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
leaveTo="opacity-0"
>
<Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2
text-xs rounded-md shadow-md overflow-auto border-none bg-white
ring-1 ring-black ring-opacity-5 focus:outline-none`}
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
>
<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" />

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