binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: module ui revamp (#2548)

Browse source 
* chore: module constant and helper function added

* style: module card ui revamp

* chore: custom media query added

* chore: circular progress indicator added

* chore: module card item ui improvement

* chore: module list view added

* chore: module sidebar added in list and card view

* chore: module list and card ui improvement

* chore: module sidebar select, avatar and link list component improvement

* chore: sidebar improvement and refactor

* style: module sidebar revamp

* style: module sidebar ui improvement

* chore: module sidebar lead and member select improvement

* style: module sidebar progress section empty state added

* chore: module card issue count validation added

* style: module card and list item ui improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-27 18:45:10 +05:30 • committed by GitHub
parent 080b5a29ae
commit fc82d6fc23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 1159 additions and 623 deletions
Download patch file Download diff file Expand all files Collapse all files

31
web/components/modules/sidebar-select/select-lead.tsx
View file

@ -7,7 +7,7 @@ import { ProjectService } from "services/project";
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icons
import { UserCircle2 } from "lucide-react";
import { ChevronDown, UserCircle2 } from "lucide-react";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -36,7 +36,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar user={member.member} height="18px" width="18px" />
{member.member.display_name}
</div>
),
@ -46,18 +46,27 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
return (
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
<UserCircle2 className="h-5 w-5" />
<span>Lead</span>
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<UserCircle2 className="h-4 w-4" />
<span className="text-base">Lead</span>
</div>
<div className="sm:basis-1/2">
<div className="flex items-center w-1/2 rounded-sm">
<CustomSearchSelect
className="w-full rounded-sm"
value={value}
label={
<div className="flex items-center gap-2">
{selectedOption && <Avatar user={selectedOption} />}
{selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">No lead</span>}
</div>
customButtonClassName="rounded-sm"
customButton={
selectedOption ? (
<div className="flex items-center justify-start gap-2 p-0.5 w-full">
<Avatar user={selectedOption} />
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
</div>
) : (
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
<span>No lead</span>
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
</div>
)
}
options={options}
maxHeight="md"