Skip to content

Commit d2a37d0

Browse files
Mati0xMati0x
committed
featt: mobile vertsion filtering and sorting + encapsulate button in icon to improve UI
1 parent 8fc512f commit d2a37d0

File tree

1 file changed

+81
-43
lines changed

1 file changed

+81
-43
lines changed

‎apps/web/components/Proposals.tsx‎

Lines changed: 81 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ArrowUpIcon,
2020
Battery50Icon,
2121
CurrencyDollarIcon,
22+
EllipsisVerticalIcon,
2223
} from "@heroicons/react/24/outline";
2324
import Link from "next/link";
2425
import { Id, toast } from "react-toastify";
@@ -719,17 +720,17 @@ export function Proposals({
719720
<section className="col-span-12 xl:col-span-9 flex flex-col gap-10">
720721
<header
721722
ref={proposalSectionRef}
722-
className={`flex ${
723+
className={`flex border2 ${
723724
proposals.length === 0 ?
724-
"flex-col items-start justify-start"
725+
"items-start justify-start"
725726
: "items-center justify-between"
726-
} gap-10 flex-wrap`}
727+
}`}
727728
>
728-
<h3 className="text-left w-52">Proposals</h3>
729+
<h3 className="text-left border2">Proposals</h3>
729730

730731
{strategy.isEnabled &&
731732
(proposals.length === 0 ?
732-
<div className="text-center py-12 w-full flex flex-col items-center justify-center">
733+
<div className="text-center py-12 w-full flex flex-col items-center justify-center border2">
733734
<div className="w-16 h-16 bg-neutral-soft-2 rounded-full flex items-center justify-center mx-auto mb-4">
734735
<UsersIcon className="w-8 h-8 text-gray-400" />
735736
</div>
@@ -758,43 +759,80 @@ export function Proposals({
758759
</Link>
759760
</div>
760761
: !allocationView && (
761-
<div className="flex items-center gap-4">
762-
{activeOrDisputedProposals.length > 0 &&
763-
proposalCardRefs.current.size ===
764-
activeOrDisputedProposals.length && (
765-
<Button
766-
btnStyle="link"
767-
color="primary"
768-
tooltip="Download conviction results (CSV)"
769-
forceShowTooltip={true}
770-
icon={<ArrowDownTrayIcon className="w-6 h-6" />}
771-
onClick={handleDownloadCVResults}
772-
/>
773-
)}
774-
<div onMouseLeave={() => setShowManageSupportTooltip(false)}>
775-
<CheckSybil
776-
strategy={strategy}
777-
enableCheck={strategy.sybil?.type === "Passport"}
762+
<>
763+
<div className="dropdown dropdown-hover dropdown-start">
764+
<Button
765+
btnStyle="outline"
766+
icon={<EllipsisVerticalIcon className="w-5 h-5" />}
767+
/>
768+
<div className="dropdown-content menu bg-primary flex flex-col items-start gap-2 rounded-box z-50 shadow w-[240px] ">
769+
{activeOrDisputedProposals.length > 0 &&
770+
proposalCardRefs.current.size ===
771+
activeOrDisputedProposals.length && (
772+
<>
773+
<Button
774+
btnStyle="link"
775+
color="primary"
776+
tooltip="Download proposals conviction results (CSV)"
777+
forceShowTooltip={true}
778+
icon={<ArrowDownTrayIcon className="w-6 h-6" />}
779+
onClick={handleDownloadCVResults}
780+
>
781+
Download CV results
782+
</Button>
783+
<Link href={createProposalUrl}>
784+
<Button
785+
className="w-full"
786+
btnStyle="outline"
787+
icon={<PlusIcon height={24} width={24} />}
788+
disabled={
789+
!isConnected ||
790+
missmatchUrl ||
791+
!isMemberCommunity
792+
}
793+
tooltip={
794+
!isConnected ? "Connect your wallet"
795+
: !isMemberCommunity ?
796+
"Join the community first"
797+
: "Create a proposal"
798+
}
799+
>
800+
Create a proposal
801+
</Button>
802+
</Link>
803+
</>
804+
)}
805+
</div>
806+
</div>
807+
<div className="flex items-center gap-4 ">
808+
{/* Manage Support */}
809+
<div
810+
onMouseLeave={() => setShowManageSupportTooltip(false)}
778811
>
779-
<Button
780-
icon={
781-
<AdjustmentsHorizontalIcon height={24} width={24} />
782-
}
783-
onClick={() => setAllocationView((prev) => !prev)}
784-
popTooltip={showManageSupportTooltip}
785-
disabled={
786-
!isConnected ||
787-
missmatchUrl ||
788-
!memberActivatedStrategy ||
789-
!isAllowed
790-
}
791-
tooltip={tooltipMessage}
812+
<CheckSybil
813+
strategy={strategy}
814+
enableCheck={strategy.sybil?.type === "Passport"}
792815
>
793-
Manage support
794-
</Button>
795-
</CheckSybil>
816+
<Button
817+
icon={
818+
<AdjustmentsHorizontalIcon height={24} width={24} />
819+
}
820+
onClick={() => setAllocationView((prev) => !prev)}
821+
popTooltip={showManageSupportTooltip}
822+
disabled={
823+
!isConnected ||
824+
missmatchUrl ||
825+
!memberActivatedStrategy ||
826+
!isAllowed
827+
}
828+
tooltip={tooltipMessage}
829+
>
830+
Manage support
831+
</Button>
832+
</CheckSybil>
833+
</div>
796834
</div>
797-
</div>
835+
</>
798836
))}
799837
</header>
800838

@@ -1057,9 +1095,9 @@ function ProposalFiltersUI({
10571095
const CurrentIcon = currentSortOption?.icon;
10581096

10591097
return (
1060-
<div className="flex flex-col sm:flex-row gap-3 justify-between bg-neutral py-2 px-4 rounded-2xl">
1098+
<div className="flex flex-col lg:flex-row gap-3 justify-between bg-neutral py-2 px-4 rounded-2xl ">
10611099
{/* FILTERS */}
1062-
<div className="flex gap-2 flex-wrap">
1100+
<div className="flex gap-2 sm:justify-between flex-wrap ">
10631101
{FILTERS.map((f) => (
10641102
<Button
10651103
onClick={() => setFilter(f === filter ? null : f)}
@@ -1079,7 +1117,7 @@ function ProposalFiltersUI({
10791117
</div>
10801118

10811119
{/* SORT DROPDOWN */}
1082-
<div className="flex items-center gap-1">
1120+
<div className="flex justify-between items-center gap-1 ">
10831121
<p className="text-sm text-neutral-soft-content">Sort by</p>
10841122
<div className="dropdown dropdown-hover dropdown-start">
10851123
<Button
@@ -1088,7 +1126,7 @@ function ProposalFiltersUI({
10881126
>
10891127
{currentSortOption?.label}
10901128
</Button>
1091-
<ul className="dropdown-content menu bg-primary rounded-box z-50 shadow w-[210px]">
1129+
<ul className="dropdown-content menu bg-primary rounded-box z-50 shadow w-[180px] sm:w-[210px]">
10921130
{SORT_OPTIONS.map((option) => {
10931131
const Icon = option.icon;
10941132

0 commit comments

Comments
 (0)