From 583345bf1001be6fa6167f3014f444015b8fe1b0 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 05:41:47 +0100 Subject: [PATCH 01/14] Started work on Voting Tab --- .../components/Votes/VotingProjectList.tsx | 351 ++++++++++++++++++ src/modules/pot/components/index.ts | 1 + src/modules/pot/hooks/index.ts | 1 + src/modules/pot/hooks/useMediaQuery.ts | 17 + src/pages/pot/[potId]/votes.tsx | 8 +- 5 files changed, 376 insertions(+), 2 deletions(-) create mode 100644 src/modules/pot/components/Votes/VotingProjectList.tsx create mode 100644 src/modules/pot/hooks/useMediaQuery.ts diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx new file mode 100644 index 00000000..a1101ff8 --- /dev/null +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -0,0 +1,351 @@ +"use client"; + +import { useMemo, useState } from "react"; + +import { ChevronLeft, ChevronRight, FileText, Star } from "lucide-react"; + +import { + Button, + Checkbox, + Input, + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "@/common/ui/components"; +import { cn } from "@/common/ui/utils"; +import { useMediaQuery } from "@/modules/pot/hooks"; + +// import { VotingRulesPanel } from "./voting-rules-panel"; +// import { WeightBoostPanel } from "./weight-boost-panel"; + +interface Project { + id: string; + name: string; + votes: number; + voted: boolean; + imageUrl: string; +} + +const DUMMY_PROJECTS: Project[] = [ + { + id: "1", + name: "Creativesportfolio.near", + votes: 2000, + voted: true, + imageUrl: "/placeholder.svg", + }, + { + id: "2", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "3", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "4", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "5", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "6", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "7", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "8", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, + { + id: "9", + name: "Mike.near", + votes: 2000, + voted: false, + imageUrl: "/placeholder.svg", + }, +]; + +type TabType = "all" | "voted" | "pending"; + +export default function VotingProjectList() { + const [selectedProjects, setSelectedProjects] = useState>( + new Set(), + ); + const [searchQuery, setSearchQuery] = useState(""); + const [activeTab, setActiveTab] = useState("all"); + const [showVotingRules, setShowVotingRules] = useState(false); + const [showWeightBoost, setShowWeightBoost] = useState(false); + const [pageNumber, setPageNumber] = useState(1); + + const handleProjectSelect = (projectId: string) => { + const newSelected = new Set(selectedProjects); + if (newSelected.has(projectId)) { + newSelected.delete(projectId); + } else { + newSelected.add(projectId); + } + setSelectedProjects(newSelected); + }; + + const handleVoteAll = () => { + console.log("Voting for projects:", Array.from(selectedProjects)); + setSelectedProjects(new Set()); + }; + + const filteredProjects = useMemo(() => { + const filtered = DUMMY_PROJECTS.filter((project) => { + if (activeTab === "voted") return project.voted; + if (activeTab === "pending") return !project.voted; + return true; + }); + + const startIndex = (pageNumber - 1) * 5; + const endIndex = startIndex + 5; + return filtered.slice(startIndex, endIndex); + }, [activeTab, pageNumber]); + + const totalProjectCount = DUMMY_PROJECTS.length; + + const numberOfPages = useMemo( + () => Math.ceil(totalProjectCount / 5), + [totalProjectCount], + ); + + const pageNumberButtons = useMemo(() => { + const totalPages = Math.ceil(numberOfPages); + const pages: (number | "ellipsis")[] = []; + + if (totalPages <= 7) { + // Show all pages if total is 7 or less + pages.push(...Array.from({ length: totalPages }, (_, i) => i + 1)); + } else { + // Always show first page + pages.push(1); + + if (pageNumber <= 4) { + // Near start + pages.push(2, 3, 4, 5, "ellipsis", totalPages); + } else if (pageNumber >= totalPages - 3) { + // Near end + pages.push( + "ellipsis", + totalPages - 4, + totalPages - 3, + totalPages - 2, + totalPages - 1, + totalPages, + ); + } else { + // Middle + pages.push( + "ellipsis", + pageNumber - 1, + pageNumber, + pageNumber + 1, + "ellipsis", + totalPages, + ); + } + } + + return pages.map((page, i) => ( + + {page === "ellipsis" ? ( + + ) : ( + setPageNumber(page)} + className={cn({ + "border-black font-bold": pageNumber === page, + })} + > + {page} + + )} + + )); + }, [pageNumber, setPageNumber, totalProjectCount]); + + return ( +
+ {/* Search */} +
+ setSearchQuery(e.target.value)} + /> +
+ + {/* Tabs */} +
+ + + +
+ + {/* Header */} +
+
+ + 10 Projects Voted +
+
+ + +
+
+ + {/* Project List */} +
+
+
PROJECTS
+
VOTES
+
ACTIONS
+
+ + {filteredProjects.map((project) => ( +
+ handleProjectSelect(project.id)} + /> + +
+
{project.name}
+
+ {project.votes} Votes +
+
+
{project.votes}
+ +
+ ))} +
+ + {/* Pagination */} + {numberOfPages > 1 && ( + + + + setPageNumber((prev) => Math.max(prev - 1, 1))} + /> + + + {pageNumberButtons} + + + + setPageNumber((prev) => + Math.min(prev + 1, Math.ceil(numberOfPages)), + ) + } + /> + + + + )} + + {/* Floating Action Bar */} + {selectedProjects.size > 0 && ( +
+
+ + {selectedProjects.size} Selected Projects +
+ +
+ )} + + {/* Dialogs */} + {/* + */} +
+ ); +} diff --git a/src/modules/pot/components/index.ts b/src/modules/pot/components/index.ts index e4afa5be..12deccca 100644 --- a/src/modules/pot/components/index.ts +++ b/src/modules/pot/components/index.ts @@ -3,3 +3,4 @@ export { default as DonationsTable } from "./DonationsTable"; export { default as SponsorsBoard } from "./SponsorsBoard/SponsorsBoard"; export { default as SponsorsTable } from "./SponsorsTable/SponsorsTable"; export { default as PayoutsChallenges } from "./PayoutsChallenges/PayoutsChallenges"; +export { default as VotingProjectList } from "./Votes/VotingProjectList"; diff --git a/src/modules/pot/hooks/index.ts b/src/modules/pot/hooks/index.ts index 7fa1274f..05219915 100644 --- a/src/modules/pot/hooks/index.ts +++ b/src/modules/pot/hooks/index.ts @@ -3,3 +3,4 @@ export { default as useFilteredPots } from "./useFilteredPots"; export { default as useNearAndUsdByPot } from "./useNearAndUsdByPot"; export * from "./useOrderedDonations"; export { useProtocolConfig } from "./useProtocolConfig"; +export { useMediaQuery } from "./useMediaQuery"; diff --git a/src/modules/pot/hooks/useMediaQuery.ts b/src/modules/pot/hooks/useMediaQuery.ts new file mode 100644 index 00000000..2b6f3c04 --- /dev/null +++ b/src/modules/pot/hooks/useMediaQuery.ts @@ -0,0 +1,17 @@ +import { useEffect, useState } from "react"; + +export function useMediaQuery(query: string) { + const [matches, setMatches] = useState(false); + + useEffect(() => { + const media = window.matchMedia(query); + if (media.matches !== matches) { + setMatches(media.matches); + } + const listener = () => setMatches(media.matches); + media.addEventListener("change", listener); + return () => media.removeEventListener("change", listener); + }, [matches, query]); + + return matches; +} diff --git a/src/pages/pot/[potId]/votes.tsx b/src/pages/pot/[potId]/votes.tsx index 08a6d850..c1961c9a 100644 --- a/src/pages/pot/[potId]/votes.tsx +++ b/src/pages/pot/[potId]/votes.tsx @@ -1,11 +1,15 @@ import { useRouteQuery } from "@/common/lib"; -import { PotLayout } from "@/modules/pot"; +import { PotLayout, VotingProjectList } from "@/modules/pot"; const PotVotesTab = () => { const { query } = useRouteQuery(); const potId = query.potId as string; - return
; + return ( +
+ +
+ ); }; PotVotesTab.getLayout = function getLayout(page: React.ReactNode) { From 8d98e7922805565841e4577989d08b6c5bf4b1ee Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 05:42:38 +0100 Subject: [PATCH 02/14] fmt --- .../components/Votes/VotingProjectList.tsx | 46 ++++--------------- 1 file changed, 9 insertions(+), 37 deletions(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index a1101ff8..e2a7b056 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -99,9 +99,7 @@ const DUMMY_PROJECTS: Project[] = [ type TabType = "all" | "voted" | "pending"; export default function VotingProjectList() { - const [selectedProjects, setSelectedProjects] = useState>( - new Set(), - ); + const [selectedProjects, setSelectedProjects] = useState>(new Set()); const [searchQuery, setSearchQuery] = useState(""); const [activeTab, setActiveTab] = useState("all"); const [showVotingRules, setShowVotingRules] = useState(false); @@ -137,10 +135,7 @@ export default function VotingProjectList() { const totalProjectCount = DUMMY_PROJECTS.length; - const numberOfPages = useMemo( - () => Math.ceil(totalProjectCount / 5), - [totalProjectCount], - ); + const numberOfPages = useMemo(() => Math.ceil(totalProjectCount / 5), [totalProjectCount]); const pageNumberButtons = useMemo(() => { const totalPages = Math.ceil(numberOfPages); @@ -168,14 +163,7 @@ export default function VotingProjectList() { ); } else { // Middle - pages.push( - "ellipsis", - pageNumber - 1, - pageNumber, - pageNumber + 1, - "ellipsis", - totalPages, - ); + pages.push("ellipsis", pageNumber - 1, pageNumber, pageNumber + 1, "ellipsis", totalPages); } } @@ -271,30 +259,18 @@ export default function VotingProjectList() { {filteredProjects.map((project) => ( -
+
handleProjectSelect(project.id)} /> - +
{project.name}
-
- {project.votes} Votes -
+
{project.votes} Votes
{project.votes}
-
@@ -306,9 +282,7 @@ export default function VotingProjectList() { - setPageNumber((prev) => Math.max(prev - 1, 1))} - /> + setPageNumber((prev) => Math.max(prev - 1, 1))} /> {pageNumberButtons} @@ -316,9 +290,7 @@ export default function VotingProjectList() { - setPageNumber((prev) => - Math.min(prev + 1, Math.ceil(numberOfPages)), - ) + setPageNumber((prev) => Math.min(prev + 1, Math.ceil(numberOfPages))) } /> From 9db108b5da2d40dc889b488ba8a41e9397b4390a Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 06:44:00 +0100 Subject: [PATCH 03/14] Handling pagination ad values per tab --- .../ui/components/atoms/filter-chip.tsx | 79 +++++++++++++++++++ src/common/ui/components/index.ts | 1 + .../components/Votes/VotingProjectList.tsx | 64 ++++++++++----- src/modules/pot/hooks/index.ts | 1 - src/modules/pot/hooks/useMediaQuery.ts | 17 ---- 5 files changed, 124 insertions(+), 38 deletions(-) create mode 100644 src/common/ui/components/atoms/filter-chip.tsx delete mode 100644 src/modules/pot/hooks/useMediaQuery.ts diff --git a/src/common/ui/components/atoms/filter-chip.tsx b/src/common/ui/components/atoms/filter-chip.tsx new file mode 100644 index 00000000..d4e1f50b --- /dev/null +++ b/src/common/ui/components/atoms/filter-chip.tsx @@ -0,0 +1,79 @@ +import * as React from "react"; + +import { Slot } from "@radix-ui/react-slot"; +import { type VariantProps, cva } from "class-variance-authority"; + +import { cn } from "../../utils"; + +// TODO: add correct hover effects +const filterChipVariants = cva( + cn( + "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium whitespace-nowrap px-12px py-6px", + "no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md", + "border-none focus:shadow-button-focus disabled:cursor-not-allowed", + ), + + { + variants: { + variant: { + // Brand + "brand-filled": cn( + "bg-#fce9d5 shadow-amber outline-none translate-y-[-1.5px] text-#91321B font-bold border border-#f4b37d border-solid hover:translate-y-0 focus:shadow-#f4b37d", + "hover:shadow-[0px_0px_0px_1px_rgba(244, 179, 125, 1)_inset,0px_1px_1px_1px_rgba(252, 233, 213, 1)_inset,0px_0px_0px_2px_rgba(252, 233, 213, 1)_inset]", + "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]", + ), + + "brand-plain": cn( + "text-[color:var(--primary-600)] p-0 hover:text-[color:var(--Primary-400)]", + "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]", + ), + + "brand-outline": cn( + "bg-white hover:bg-[var(--neutral-50) outline-none focus:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]", + "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]", + "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]", + ), + }, + + size: { + default: "px-4 py-[9px]", + icon: "h-10 w-10", + }, + + font: { + default: "font-medium", + bold: "font-bold", + semibold: "font-semibold", + }, + }, + + defaultVariants: { + font: "default", + variant: "brand-filled", + size: "default", + }, + }, +); + +export interface FilterChipProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; +} + +const FilterChip = React.forwardRef( + ({ className, variant, font, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button"; + return ( + + ); + }, +); + +FilterChip.displayName = "FilterChip"; + +export { FilterChip, filterChipVariants }; diff --git a/src/common/ui/components/index.ts b/src/common/ui/components/index.ts index 3e0d1358..b5a9564c 100644 --- a/src/common/ui/components/index.ts +++ b/src/common/ui/components/index.ts @@ -37,6 +37,7 @@ export * from "./atoms/textarea"; export * from "./atoms/toggle"; export * from "./atoms/tooltip"; export * from "./atoms/typography"; +export * from "./atoms/filter-chip"; /** * Molecules diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index e2a7b056..a3f5251c 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -7,6 +7,7 @@ import { ChevronLeft, ChevronRight, FileText, Star } from "lucide-react"; import { Button, Checkbox, + FilterChip, Input, Pagination, PaginationContent, @@ -17,7 +18,6 @@ import { PaginationPrevious, } from "@/common/ui/components"; import { cn } from "@/common/ui/utils"; -import { useMediaQuery } from "@/modules/pot/hooks"; // import { VotingRulesPanel } from "./voting-rules-panel"; // import { WeightBoostPanel } from "./weight-boost-panel"; @@ -105,6 +105,12 @@ export default function VotingProjectList() { const [showVotingRules, setShowVotingRules] = useState(false); const [showWeightBoost, setShowWeightBoost] = useState(false); const [pageNumber, setPageNumber] = useState(1); + const [allProjectsCount, votedCount, pendingCount] = useMemo(() => { + const allProjects = DUMMY_PROJECTS.length; + const voted = DUMMY_PROJECTS.filter((project) => project.voted).length; + const pending = DUMMY_PROJECTS.length - voted; + return [allProjects, voted, pending]; + }, []); const handleProjectSelect = (projectId: string) => { const newSelected = new Set(selectedProjects); @@ -133,9 +139,16 @@ export default function VotingProjectList() { return filtered.slice(startIndex, endIndex); }, [activeTab, pageNumber]); - const totalProjectCount = DUMMY_PROJECTS.length; + const totalProjectCountPerTab = useMemo(() => { + if (activeTab === "voted") return votedCount; + if (activeTab === "pending") return pendingCount; + return allProjectsCount; + }, [activeTab, allProjectsCount, votedCount, pendingCount]); - const numberOfPages = useMemo(() => Math.ceil(totalProjectCount / 5), [totalProjectCount]); + const numberOfPages = useMemo( + () => Math.ceil(totalProjectCountPerTab / 5), + [totalProjectCountPerTab], + ); const pageNumberButtons = useMemo(() => { const totalPages = Math.ceil(numberOfPages); @@ -183,7 +196,7 @@ export default function VotingProjectList() { )} )); - }, [pageNumber, setPageNumber, totalProjectCount]); + }, [pageNumber, setPageNumber, numberOfPages]); return (
@@ -200,28 +213,39 @@ export default function VotingProjectList() { {/* Tabs */}
- - - + Pending{" "} + + {pendingCount} + +
{/* Header */} diff --git a/src/modules/pot/hooks/index.ts b/src/modules/pot/hooks/index.ts index 05219915..7fa1274f 100644 --- a/src/modules/pot/hooks/index.ts +++ b/src/modules/pot/hooks/index.ts @@ -3,4 +3,3 @@ export { default as useFilteredPots } from "./useFilteredPots"; export { default as useNearAndUsdByPot } from "./useNearAndUsdByPot"; export * from "./useOrderedDonations"; export { useProtocolConfig } from "./useProtocolConfig"; -export { useMediaQuery } from "./useMediaQuery"; diff --git a/src/modules/pot/hooks/useMediaQuery.ts b/src/modules/pot/hooks/useMediaQuery.ts deleted file mode 100644 index 2b6f3c04..00000000 --- a/src/modules/pot/hooks/useMediaQuery.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect, useState } from "react"; - -export function useMediaQuery(query: string) { - const [matches, setMatches] = useState(false); - - useEffect(() => { - const media = window.matchMedia(query); - if (media.matches !== matches) { - setMatches(media.matches); - } - const listener = () => setMatches(media.matches); - media.addEventListener("change", listener); - return () => media.removeEventListener("change", listener); - }, [matches, query]); - - return matches; -} From 6b5b357d2ae661c5623179950f2d40f1a9bb9762 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 09:50:21 +0100 Subject: [PATCH 04/14] Added icons ad more Ui tweaks --- src/common/assets/svgs/FileText.tsx | 17 ++ src/common/assets/svgs/HowToVote.tsx | 20 ++ src/common/assets/svgs/Star.tsx | 62 +++++ .../components/Votes/VotingProjectList.tsx | 226 +++++++++++------- .../pot/components/Votes/VotingRulesPanel.tsx | 55 +++++ .../pot/components/Votes/WeightBoostPanel.tsx | 88 +++++++ src/modules/pot/hooks/useMediaQuery.ts | 17 ++ 7 files changed, 393 insertions(+), 92 deletions(-) create mode 100644 src/common/assets/svgs/FileText.tsx create mode 100644 src/common/assets/svgs/HowToVote.tsx create mode 100644 src/common/assets/svgs/Star.tsx create mode 100644 src/modules/pot/components/Votes/VotingRulesPanel.tsx create mode 100644 src/modules/pot/components/Votes/WeightBoostPanel.tsx create mode 100644 src/modules/pot/hooks/useMediaQuery.ts diff --git a/src/common/assets/svgs/FileText.tsx b/src/common/assets/svgs/FileText.tsx new file mode 100644 index 00000000..b5b32863 --- /dev/null +++ b/src/common/assets/svgs/FileText.tsx @@ -0,0 +1,17 @@ +const FileText = (props: any) => ( + + + +); + +export default FileText; diff --git a/src/common/assets/svgs/HowToVote.tsx b/src/common/assets/svgs/HowToVote.tsx new file mode 100644 index 00000000..c235a5dd --- /dev/null +++ b/src/common/assets/svgs/HowToVote.tsx @@ -0,0 +1,20 @@ +const HowToVote = (props: any) => ( + + + + + +); + +export default HowToVote; diff --git a/src/common/assets/svgs/Star.tsx b/src/common/assets/svgs/Star.tsx new file mode 100644 index 00000000..1af89bd9 --- /dev/null +++ b/src/common/assets/svgs/Star.tsx @@ -0,0 +1,62 @@ +const Star = (props: any) => ( + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Star; diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index a3f5251c..dad14577 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -2,8 +2,11 @@ import { useMemo, useState } from "react"; -import { ChevronLeft, ChevronRight, FileText, Star } from "lucide-react"; +import { ChevronRight } from "lucide-react"; +import FileText from "@/common/assets/svgs/FileText"; +import HowToVote from "@/common/assets/svgs/HowToVote"; +import Star from "@/common/assets/svgs/Star"; import { Button, Checkbox, @@ -19,6 +22,10 @@ import { } from "@/common/ui/components"; import { cn } from "@/common/ui/utils"; +import { VotingRulesPanel } from "./VotingRulesPanel"; +import { WeightBoostPanel } from "./WeightBoostPanel"; +import { useMediaQuery } from "../../hooks/useMediaQuery"; + // import { VotingRulesPanel } from "./voting-rules-panel"; // import { WeightBoostPanel } from "./weight-boost-panel"; @@ -112,6 +119,8 @@ export default function VotingProjectList() { return [allProjects, voted, pending]; }, []); + const isDesktop = useMediaQuery("(min-width: 1024px)"); + const handleProjectSelect = (projectId: string) => { const newSelected = new Set(selectedProjects); if (newSelected.has(projectId)) { @@ -199,7 +208,7 @@ export default function VotingProjectList() { }, [pageNumber, setPageNumber, numberOfPages]); return ( -
+
{/* Search */}
{/* Tabs */} -
+
setActiveTab("all")} @@ -248,100 +257,133 @@ export default function VotingProjectList() {
- {/* Header */} -
-
- - 10 Projects Voted -
-
- - -
-
- - {/* Project List */} -
-
-
PROJECTS
-
VOTES
-
ACTIONS
-
- - {filteredProjects.map((project) => ( -
- handleProjectSelect(project.id)} - /> - -
-
{project.name}
-
{project.votes} Votes
+
+
+ {/* Header */} +
+
+ + + {votedCount} Project{votedCount > 1 ? "s" : ""} Voted + +
+
+
setShowWeightBoost((prev: Boolean) => !prev)} + > + + + + {showWeightBoost ? "Hide" : "View"} Weight Boost{" "} + + + x0 + + + +
+
setShowVotingRules((prev: Boolean) => !prev)} + > + + + {showVotingRules ? "Hide" : "View"} Voting Rules + + +
-
{project.votes}
-
- ))} -
- - {/* Pagination */} - {numberOfPages > 1 && ( - - - - setPageNumber((prev) => Math.max(prev - 1, 1))} /> - - - {pageNumberButtons} - - - - setPageNumber((prev) => Math.min(prev + 1, Math.ceil(numberOfPages))) - } - /> - - - - )} - - {/* Floating Action Bar */} - {selectedProjects.size > 0 && ( -
-
- - {selectedProjects.size} Selected Projects + {/* Project List */} +
+
+
PROJECTS
+
+
VOTES
+
ACTIONS
+
+
+ {filteredProjects.map((project) => ( +
+ handleProjectSelect(project.id)} + /> + +
+
{project.name}
+
{project.votes} Votes
+
+
{project.votes}
+ +
+ ))}
- + {/* Pagination */} + {numberOfPages > 1 && ( + + + + setPageNumber((prev) => Math.max(prev - 1, 1))} + /> + + {pageNumberButtons} + + + setPageNumber((prev) => Math.min(prev + 1, Math.ceil(numberOfPages))) + } + /> + + + + )} + {/* Floating Action Bar */} + {selectedProjects.size > 0 && ( +
+
+ + {selectedProjects.size} Selected Projects +
+ +
+ )}
+ {/* Dialogs */} + {/* Side Panels */} + {isDesktop && ( +
+ {showWeightBoost && ( + setShowWeightBoost(false)} + mode="panel" + /> + )} + {showVotingRules && ( + setShowVotingRules(false)} + mode="panel" + /> + )} +
+ )} +
+ {/* Mobile Dialogs */} + {!isDesktop && ( + <> + + + )} - - {/* Dialogs */} - {/* - */}
); } diff --git a/src/modules/pot/components/Votes/VotingRulesPanel.tsx b/src/modules/pot/components/Votes/VotingRulesPanel.tsx new file mode 100644 index 00000000..46856d57 --- /dev/null +++ b/src/modules/pot/components/Votes/VotingRulesPanel.tsx @@ -0,0 +1,55 @@ +import { Star, X } from "lucide-react"; + +import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; +import { cn } from "@/common/ui/utils"; + +interface VotingRulesPanelProps { + open: boolean; + onOpenChange: (open: boolean) => void; + className?: string; + mode?: "modal" | "panel"; +} + +export function VotingRulesPanel({ + open, + onOpenChange, + className, + mode = "modal", +}: VotingRulesPanelProps) { + const Content = () => ( +
+
    +
  • Anyone can vote.
    • +
  • Donations to projects won't be counted as votes.
    • +
  • You can vote for different projects.
    • +
  • You can assign only one vote per project.
    • +
  • You cannot change a vote after voting.
    • +
+
+ ); + + if (mode === "panel") { + return ( +
+

Voting Rules

+ +
+ ); + } + + return ( + + + + {" "} + + +

Voting Rules

+ x10 + + + + + + ); +} diff --git a/src/modules/pot/components/Votes/WeightBoostPanel.tsx b/src/modules/pot/components/Votes/WeightBoostPanel.tsx new file mode 100644 index 00000000..278d8b81 --- /dev/null +++ b/src/modules/pot/components/Votes/WeightBoostPanel.tsx @@ -0,0 +1,88 @@ +import { Check, Star, X } from "lucide-react"; + +import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; +import { cn } from "@/common/ui/utils"; + +interface WeightBoostPanelProps { + open: boolean; + onOpenChange: (open: boolean) => void; + className?: string; + mode?: "modal" | "panel"; +} + +export function WeightBoostPanel({ + open, + onOpenChange, + className, + mode = "modal", +}: WeightBoostPanelProps) { + const Content = () => ( +
+
+
+ Human Verification +
+ x10 + +
+
+
+ Upto 10,000 votes in mpDAO +
+ x25 + +
+
+
+ Upto 25,000 votes in mpDAO +
+ x25 + +
+
+
+ Stake at least 2 Near +
+ x10 + +
+
+
+ Stake at least 10 Near +
+ x30 + +
+
+
+
+ ); + + if (mode === "panel") { + return ( +
+

+ + Weight Boost + x10 +

+ +
+ ); + } + + return ( + + + + + +

Weight Boost

+ x10 + + + + + + ); +} diff --git a/src/modules/pot/hooks/useMediaQuery.ts b/src/modules/pot/hooks/useMediaQuery.ts new file mode 100644 index 00000000..2b6f3c04 --- /dev/null +++ b/src/modules/pot/hooks/useMediaQuery.ts @@ -0,0 +1,17 @@ +import { useEffect, useState } from "react"; + +export function useMediaQuery(query: string) { + const [matches, setMatches] = useState(false); + + useEffect(() => { + const media = window.matchMedia(query); + if (media.matches !== matches) { + setMatches(media.matches); + } + const listener = () => setMatches(media.matches); + media.addEventListener("change", listener); + return () => media.removeEventListener("change", listener); + }, [matches, query]); + + return matches; +} From d3925ed71ac700a379641eb8c0a587806af1ee9c Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:17:00 +0100 Subject: [PATCH 05/14] Added SVG icons, refactored UI even more --- src/common/assets/svgs/CheckCircle.tsx | 13 ++ src/common/assets/svgs/FileText.tsx | 11 +- .../components/Votes/VotingProjectList.tsx | 139 ++++++++++-------- .../pot/components/Votes/VotingRulesPanel.tsx | 26 ++-- .../pot/components/Votes/WeightBoostPanel.tsx | 58 +++++--- src/pages/pot/[potId]/votes.tsx | 2 +- 6 files changed, 146 insertions(+), 103 deletions(-) create mode 100644 src/common/assets/svgs/CheckCircle.tsx diff --git a/src/common/assets/svgs/CheckCircle.tsx b/src/common/assets/svgs/CheckCircle.tsx new file mode 100644 index 00000000..6e440c7c --- /dev/null +++ b/src/common/assets/svgs/CheckCircle.tsx @@ -0,0 +1,13 @@ +const CheckCircle = (props: any) => ( + + + + + +); + +export default CheckCircle; diff --git a/src/common/assets/svgs/FileText.tsx b/src/common/assets/svgs/FileText.tsx index b5b32863..4e95e8eb 100644 --- a/src/common/assets/svgs/FileText.tsx +++ b/src/common/assets/svgs/FileText.tsx @@ -1,15 +1,8 @@ const FileText = (props: any) => ( - + ); diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index dad14577..0a2cbe41 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -3,6 +3,7 @@ import { useMemo, useState } from "react"; import { ChevronRight } from "lucide-react"; +import Image from "next/image"; import FileText from "@/common/assets/svgs/FileText"; import HowToVote from "@/common/assets/svgs/HowToVote"; @@ -26,9 +27,6 @@ import { VotingRulesPanel } from "./VotingRulesPanel"; import { WeightBoostPanel } from "./WeightBoostPanel"; import { useMediaQuery } from "../../hooks/useMediaQuery"; -// import { VotingRulesPanel } from "./voting-rules-panel"; -// import { WeightBoostPanel } from "./weight-boost-panel"; - interface Project { id: string; name: string; @@ -43,63 +41,63 @@ const DUMMY_PROJECTS: Project[] = [ name: "Creativesportfolio.near", votes: 2000, voted: true, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "2", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "3", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "4", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "5", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "6", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "7", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "8", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, { id: "9", name: "Mike.near", votes: 2000, voted: false, - imageUrl: "/placeholder.svg", + imageUrl: "https://picsum.photos/200/200/?blur", }, ]; @@ -208,7 +206,7 @@ export default function VotingProjectList() { }, [pageNumber, setPageNumber, numberOfPages]); return ( -
+
{/* Search */}
-
+
{/* Header */} -
-
- - - {votedCount} Project{votedCount > 1 ? "s" : ""} Voted - -
-
-
setShowWeightBoost((prev: Boolean) => !prev)} - > - - - - {showWeightBoost ? "Hide" : "View"} Weight Boost{" "} - - - x0 - +
+
+
+ + + {votedCount} Project{votedCount > 1 ? "s" : ""} Voted -
-
setShowVotingRules((prev: Boolean) => !prev)} - > - - - {showVotingRules ? "Hide" : "View"} Voting Rules - - +
+
setShowWeightBoost((prev: Boolean) => !prev)} + > + + + + {showWeightBoost ? "Hide" : "View"} Weight Boost{" "} + + + x0 + + + +
+
setShowVotingRules((prev: Boolean) => !prev)} + > + + + {showVotingRules ? "Hide" : "View"} Voting Rules + + +
-
- {/* Project List */} -
-
-
PROJECTS
+
+

PROJECTS

-
VOTES
-
ACTIONS
+

VOTES

+

ACTIONS

+
+ {/* Project List */} +
{filteredProjects.map((project) => (
handleProjectSelect(project.id)} /> - + {`Avatar
{project.name}
{project.votes} Votes
{project.votes}
-
@@ -356,22 +366,21 @@ export default function VotingProjectList() {
)}
- {/* Dialogs */} - {/* Side Panels */} {isDesktop && (
- {showWeightBoost && ( - setShowWeightBoost(false)} + onOpenChange={() => setShowVotingRules(false)} mode="panel" /> )} - {showVotingRules && ( - setShowVotingRules(false)} + onOpenChange={() => setShowWeightBoost(false)} mode="panel" + weightBoost={0} /> )}
@@ -380,7 +389,11 @@ export default function VotingProjectList() { {/* Mobile Dialogs */} {!isDesktop && ( <> - + )} diff --git a/src/modules/pot/components/Votes/VotingRulesPanel.tsx b/src/modules/pot/components/Votes/VotingRulesPanel.tsx index 46856d57..2e8d8a4a 100644 --- a/src/modules/pot/components/Votes/VotingRulesPanel.tsx +++ b/src/modules/pot/components/Votes/VotingRulesPanel.tsx @@ -1,6 +1,7 @@ import { Star, X } from "lucide-react"; -import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; +import FileText from "@/common/assets/svgs/FileText"; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; import { cn } from "@/common/ui/utils"; interface VotingRulesPanelProps { @@ -18,7 +19,7 @@ export function VotingRulesPanel({ }: VotingRulesPanelProps) { const Content = () => (
-
    +
    • Anyone can vote.
    • Donations to projects won't be counted as votes.
    • You can vote for different projects.
      • @@ -30,8 +31,14 @@ export function VotingRulesPanel({ if (mode === "panel") { return ( -
      -

      Voting Rules

      +
      +
      +
      + +

      Voting Rules

      +
      + onOpenChange(true)} className="h-6 w-6 cursor-pointer text-[#A6A6A6]" /> +
      ); @@ -40,15 +47,16 @@ export function VotingRulesPanel({ return ( - + {" "} - - + +

      Voting Rules

      - x10       - +
      + +
      ); diff --git a/src/modules/pot/components/Votes/WeightBoostPanel.tsx b/src/modules/pot/components/Votes/WeightBoostPanel.tsx index 278d8b81..fe7fdbc3 100644 --- a/src/modules/pot/components/Votes/WeightBoostPanel.tsx +++ b/src/modules/pot/components/Votes/WeightBoostPanel.tsx @@ -1,6 +1,8 @@ -import { Check, Star, X } from "lucide-react"; +import { X } from "lucide-react"; -import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; +import CheckCircle from "@/common/assets/svgs/CheckCircle"; +import Star from "@/common/assets/svgs/Star"; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; import { cn } from "@/common/ui/utils"; interface WeightBoostPanelProps { @@ -8,6 +10,7 @@ interface WeightBoostPanelProps { onOpenChange: (open: boolean) => void; className?: string; mode?: "modal" | "panel"; + weightBoost: number; } export function WeightBoostPanel({ @@ -15,43 +18,44 @@ export function WeightBoostPanel({ onOpenChange, className, mode = "modal", + weightBoost, }: WeightBoostPanelProps) { const Content = () => (
      -
      +
      Human Verification
      x10 - +
      -
      +
      Upto 10,000 votes in mpDAO
      x25 - +
      -
      +
      Upto 25,000 votes in mpDAO
      x25 - +
      -
      +
      Stake at least 2 Near
      x10 - +
      -
      +
      Stake at least 10 Near
      x30 - +
      @@ -60,12 +64,22 @@ export function WeightBoostPanel({ if (mode === "panel") { return ( -
      -

      - - Weight Boost - x10 -

      +
      +
      +
      +
      + +

      Weight Boost

      +
      +
      + x{weightBoost} + onOpenChange(true)} + className="h-6 w-6 cursor-pointer text-[#A6A6A6]" + /> +
      +
      +
      ); @@ -76,12 +90,14 @@ export function WeightBoostPanel({ - +

      Weight Boost

      - x10 + x{weightBoost}       - +
      + +
      ); diff --git a/src/pages/pot/[potId]/votes.tsx b/src/pages/pot/[potId]/votes.tsx index c1961c9a..30e609b3 100644 --- a/src/pages/pot/[potId]/votes.tsx +++ b/src/pages/pot/[potId]/votes.tsx @@ -6,7 +6,7 @@ const PotVotesTab = () => { const potId = query.potId as string; return ( -
      +
      ); From 0842ac4b237994460495a27a8429b79f164a50d0 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:17:59 +0100 Subject: [PATCH 06/14] removed unused import --- src/modules/pot/components/Votes/VotingRulesPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/pot/components/Votes/VotingRulesPanel.tsx b/src/modules/pot/components/Votes/VotingRulesPanel.tsx index 2e8d8a4a..b41be67a 100644 --- a/src/modules/pot/components/Votes/VotingRulesPanel.tsx +++ b/src/modules/pot/components/Votes/VotingRulesPanel.tsx @@ -1,4 +1,4 @@ -import { Star, X } from "lucide-react"; +import { X } from "lucide-react"; import FileText from "@/common/assets/svgs/FileText"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/common/ui/components"; From a15a4b3ea4ce3f8df54d8389c688f89b4b42e276 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:30:10 +0100 Subject: [PATCH 07/14] Minor UI fixe --- .../components/Votes/VotingProjectList.tsx | 36 ++++++++++--------- .../pot/components/Votes/VotingRulesPanel.tsx | 2 +- .../pot/components/Votes/WeightBoostPanel.tsx | 2 +- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index 0a2cbe41..f818a03b 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -118,6 +118,7 @@ export default function VotingProjectList() { }, []); const isDesktop = useMediaQuery("(min-width: 1024px)"); + const initWeightBoost = 10; const handleProjectSelect = (projectId: string) => { const newSelected = new Set(selectedProjects); @@ -223,35 +224,38 @@ export default function VotingProjectList() { setActiveTab("all")} + className="font-medium" > All{" "} - {allProjectsCount} - + setActiveTab("voted")} + className="font-medium" > Voted{" "} - {votedCount} - + setActiveTab("pending")} + className="font-medium" > Pending{" "} - {pendingCount} - +
      @@ -259,10 +263,10 @@ export default function VotingProjectList() {
      {/* Header */}
      -
      +
      - + {votedCount} Project{votedCount > 1 ? "s" : ""} Voted
      @@ -273,11 +277,11 @@ export default function VotingProjectList() { > - + {showWeightBoost ? "Hide" : "View"} Weight Boost{" "} - - x0 + + x{initWeightBoost} @@ -287,7 +291,7 @@ export default function VotingProjectList() { onClick={() => setShowVotingRules((prev: Boolean) => !prev)} > - + {showVotingRules ? "Hide" : "View"} Voting Rules @@ -295,10 +299,10 @@ export default function VotingProjectList() {
      -

      PROJECTS

      +

      PROJECTS

      -

      VOTES

      -

      ACTIONS

      +

      VOTES

      +

      ACTIONS

      @@ -380,7 +384,7 @@ export default function VotingProjectList() { open={true} onOpenChange={() => setShowWeightBoost(false)} mode="panel" - weightBoost={0} + weightBoost={initWeightBoost} /> )}
      diff --git a/src/modules/pot/components/Votes/VotingRulesPanel.tsx b/src/modules/pot/components/Votes/VotingRulesPanel.tsx index b41be67a..5e0c6940 100644 --- a/src/modules/pot/components/Votes/VotingRulesPanel.tsx +++ b/src/modules/pot/components/Votes/VotingRulesPanel.tsx @@ -35,7 +35,7 @@ export function VotingRulesPanel({
      -

      Voting Rules

      +

      Voting Rules

      onOpenChange(true)} className="h-6 w-6 cursor-pointer text-[#A6A6A6]" />
      diff --git a/src/modules/pot/components/Votes/WeightBoostPanel.tsx b/src/modules/pot/components/Votes/WeightBoostPanel.tsx index fe7fdbc3..67d130b2 100644 --- a/src/modules/pot/components/Votes/WeightBoostPanel.tsx +++ b/src/modules/pot/components/Votes/WeightBoostPanel.tsx @@ -67,7 +67,7 @@ export function WeightBoostPanel({
      -
      +

      Weight Boost

      From e093c96f45461c68cd440fcb23f8d9cc06fcbdce Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:32:14 +0100 Subject: [PATCH 08/14] colour fixes --- src/modules/pot/components/Votes/VotingProjectList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index f818a03b..8ef69799 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -366,7 +366,9 @@ export default function VotingProjectList() { {selectedProjects.size} Selected Projects
      - +
      )}
      From e1b120eba4deb090ff8c7b09437821676aca4ab2 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:34:22 +0100 Subject: [PATCH 09/14] Added Chevron Colour --- src/modules/pot/components/Votes/VotingProjectList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index 8ef69799..b66f2cb9 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -284,7 +284,7 @@ export default function VotingProjectList() { x{initWeightBoost} - +
      {showVotingRules ? "Hide" : "View"} Voting Rules - +
      From e0e0c42bd1bfaac63ba5af9cd443165d25fc7c68 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:39:32 +0100 Subject: [PATCH 10/14] UI fix --- src/modules/pot/components/Votes/VotingProjectList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index b66f2cb9..5513eddb 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -307,7 +307,7 @@ export default function VotingProjectList() {
      {/* Project List */} -
      +
      {filteredProjects.map((project) => (
      Date: Thu, 28 Nov 2024 13:42:53 +0100 Subject: [PATCH 11/14] Adjusted modal icon fill --- src/modules/pot/components/Votes/VotingRulesPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/pot/components/Votes/VotingRulesPanel.tsx b/src/modules/pot/components/Votes/VotingRulesPanel.tsx index 5e0c6940..42376637 100644 --- a/src/modules/pot/components/Votes/VotingRulesPanel.tsx +++ b/src/modules/pot/components/Votes/VotingRulesPanel.tsx @@ -50,7 +50,7 @@ export function VotingRulesPanel({ {" "} - +

      Voting Rules

             From ebacc05840cf481cf1a8dbf365dd1e4167b27be8 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 13:46:49 +0100 Subject: [PATCH 12/14] margin fix --- src/modules/pot/components/Votes/VotingProjectList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index 5513eddb..0e1f487c 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -307,7 +307,7 @@ export default function VotingProjectList() {
      {/* Project List */} -
      +
      {filteredProjects.map((project) => (
      Date: Thu, 28 Nov 2024 14:03:17 +0100 Subject: [PATCH 13/14] Added proper labels --- src/modules/pot/components/Votes/VotingProjectList.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index 0e1f487c..cb914827 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -309,13 +309,15 @@ export default function VotingProjectList() { {/* Project List */}
      {filteredProjects.map((project) => ( -
      handleProjectSelect(project.id)} + id={project.id} /> {project.voted ? "Voted" : "Vote"} -
      + ))}
      {/* Pagination */} From 07059ebd899eee488adfa71fe71b24eb354fcd76 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Thu, 28 Nov 2024 16:04:17 +0100 Subject: [PATCH 14/14] fixed alignment --- src/modules/pot/components/Votes/VotingProjectList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/pot/components/Votes/VotingProjectList.tsx b/src/modules/pot/components/Votes/VotingProjectList.tsx index cb914827..66933b32 100644 --- a/src/modules/pot/components/Votes/VotingProjectList.tsx +++ b/src/modules/pot/components/Votes/VotingProjectList.tsx @@ -259,7 +259,7 @@ export default function VotingProjectList() {
      -
      +
      {/* Header */}