thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: filters list theming (#941)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-24 11:20:02 +05:30 committed by GitHub
parent 2ec8fbab34
commit ae26b17cab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/app/components/core/filter-list.tsx
View File

@ -59,7 +59,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
key={key} key={key}
className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1" className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
> >
<span className="font-medium capitalize text-brand-secondary"> <span className="capitalize text-brand-secondary">
{replaceUnderscoreIfSnakeCase(key)}: {replaceUnderscoreIfSnakeCase(key)}:
</span> </span>
{filters[key as keyof IIssueFilterOptions] === null || {filters[key as keyof IIssueFilterOptions] === null ||
@ -75,7 +75,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return ( return (
<p <p
key={state?.id} key={state?.id}
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium text-white" className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium"
style={{ style={{
color: state?.color, color: state?.color,
backgroundColor: `${state?.color}20`, backgroundColor: `${state?.color}20`,
@ -122,16 +122,16 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
{filters.priority?.map((priority: any) => ( {filters.priority?.map((priority: any) => (
<p <p
key={priority} key={priority}
className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${ className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
priority === "urgent" priority === "urgent"
? "bg-red-100 text-red-600 hover:bg-red-100" ? "bg-red-500/20 text-red-500"
: priority === "high" : priority === "high"
? "bg-orange-100 text-orange-500 hover:bg-orange-100" ? "bg-orange-500/20 text-orange-500"
: priority === "medium" : priority === "medium"
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100" ? "bg-yellow-500/20 text-yellow-500"
: priority === "low" : priority === "low"
? "bg-green-100 text-green-500 hover:bg-green-100" ? "bg-green-500/20 text-green-500"
: "bg-brand-surface-1 text-gray-700 hover:bg-brand-surface-1" : "bg-brand-surface-1 text-brand-secondary"
}`} }`}
> >
<span>{getPriorityIcon(priority)}</span> <span>{getPriorityIcon(priority)}</span>
@ -170,7 +170,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return ( return (
<div <div
key={memberId} key={memberId}
className="inline-flex items-center gap-x-1 rounded-full px-1 font-medium capitalize" className="inline-flex items-center gap-x-1 rounded-full bg-brand-surface-1 px-1 capitalize"
> >
<Avatar user={member} /> <Avatar user={member} />
<span>{member?.first_name}</span> <span>{member?.first_name}</span>
@ -203,7 +203,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
<XMarkIcon className="h-3 w-3" /> <XMarkIcon className="h-3 w-3" />
</button> </button>
</div> </div>
) : (key as keyof IIssueFilterOptions) === "created_by" ? ( ) : key === "created_by" ? (
<div className="flex flex-wrap items-center gap-1"> <div className="flex flex-wrap items-center gap-1">
{filters.created_by?.map((memberId: string) => { {filters.created_by?.map((memberId: string) => {
const member = members?.find((m) => m.member.id === memberId)?.member; const member = members?.find((m) => m.member.id === memberId)?.member;
@ -211,7 +211,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return ( return (
<div <div
key={`${memberId}-${key}`} key={`${memberId}-${key}`}
className="inline-flex items-center gap-x-1 rounded-full px-1 font-medium capitalize" className="inline-flex items-center gap-x-1 rounded-full bg-brand-surface-1 px-1 capitalize"
> >
<Avatar user={member} /> <Avatar user={member} />
<span>{member?.first_name}</span> <span>{member?.first_name}</span>
@ -253,25 +253,20 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
const color = label.color !== "" ? label.color : "#0f172a"; const color = label.color !== "" ? label.color : "#0f172a";
return ( return (
<div <div
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium" className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
style={{ style={{
background: `${color}33`, // add 20% opacity color: color,
backgroundColor: `${color}20`, // add 20% opacity
}} }}
key={labelId} key={labelId}
> >
<div <div
className="h-2 w-2 rounded-full" className="h-1.5 w-1.5 rounded-full"
style={{ style={{
backgroundColor: color, backgroundColor: color,
}} }}
/> />
<span <span>{label.name}</span>
style={{
color: color,
}}
>
{label.name}
</span>
<span <span
className="cursor-pointer" className="cursor-pointer"
onClick={() => onClick={() =>
@ -341,8 +336,8 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
} }
className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs" className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
> >
<span className="font-medium">Clear all filters</span> <span>Clear all filters</span>
<XMarkIcon className="h-4 w-4" /> <XMarkIcon className="h-3 w-3" />
</button> </button>
)} )}
</div> </div>