mento-protocol · denviljclarke · Apr 26, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 27, 2024
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@mdxeditor/editor": "^1.11.2",
     "@mento-protocol/mento-sdk": "^0.2.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@rainbow-me/rainbowkit": "^2.0.5",
     "@tanstack/react-query": "^5.29.2",
     "blo": "^1.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <html className={`${inter.variable} w-full overscroll-none`} lang="en">
       <body
         className={cn(
-          "w-full overscroll-none bg-white font-fg text-base dark:bg-black",
+          "w-full overscroll-none bg-white font-fg text-base antialiased dark:bg-black",
           "[background-origin:border-box,_border-box]",
           "[background-position:_0_0,_0_0]",
           "[background-repeat:_repeat]",

diff --git a/src/app/(routes)/proposals/[id]/_components/participants.component.tsx b/src/app/(routes)/proposals/[id]/_components/participants.component.tsx
@@ -10,15 +10,27 @@ export default function Participants({ votes }: Props) {
   return (
     <Card
       // Was originally z-49
-      className="bottom-0 z-40 flex w-full grow flex-col gap-6"
+      className="bottom-0 z-40 flex w-full grow flex-col gap-6 p-4"
     >
-      <Card.Header className="text-center text-[32px]/none font-medium">
+      <Card.Header className="text-center text-3xl font-medium">
         Participants
       </Card.Header>
       <TabList tabs={["For", "Against", "Abstain"]}>
-        <VotesList voteType="for" votes={votes} />
-        <VotesList voteType="against" votes={votes} />
-        <VotesList voteType="abstain" votes={votes} />
+        <VotesList
+          participants={votes.for.participants}
+          voteTypeTotal={votes.for.total}
+          totalVotes={votes.total}
+        />
+        <VotesList
+          participants={votes.against.participants}
+          voteTypeTotal={votes.against.total}
+          totalVotes={votes.total}
+        />
+        <VotesList
+          participants={votes.abstain.participants}
+          voteTypeTotal={votes.abstain.total}
+          totalVotes={votes.total}
+        />
       </TabList>
     </Card>
   );

diff --git a/src/components/_icons/crossmark.icon.tsx b/src/components/_icons/crossmark.icon.tsx
@@ -15,7 +15,7 @@ export const CrossMarkIcon = ({
       xmlns="http://www.w3.org/2000/svg"
     >
       <rect
-        className="fill-black stroke-black"
+        className="fill-black stroke-black dark:fill-white dark:stroke-white"
         x="1.10547"
         y="1.25977"
         width="15"
@@ -26,13 +26,13 @@ export const CrossMarkIcon = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12.7407 4.62446C12.9815 4.86525 12.9815 5.25564 12.7407 5.49643L5.34203 12.8951C5.10125 13.1359 4.71085 13.1359 4.47006 12.8951C4.22927 12.6543 4.22927 12.2639 4.47006 12.0231L11.8687 4.62446C12.1095 4.38367 12.4999 4.38367 12.7407 4.62446Z"
-        className="stroke-white"
+        className="stroke-white dark:stroke-black"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12.7398 12.895C12.499 13.1358 12.1086 13.1358 11.8678 12.895L4.46919 5.49633C4.2284 5.25554 4.2284 4.86515 4.46919 4.62436C4.70997 4.38357 5.10037 4.38357 5.34116 4.62436L12.7398 12.023C12.9806 12.2638 12.9806 12.6542 12.7398 12.895Z"
-        className="stroke-white"
+        className="stroke-white dark:stroke-black"
       />
     </svg>
   );

diff --git a/src/components/_shared/avatar/avatar.component.tsx b/src/components/_shared/avatar/avatar.component.tsx
@@ -2,16 +2,35 @@
 import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import { BlockExplorerLink } from "@/components/_shared";
 import { blo, Address } from "blo";
+import { VariantProps, cva } from "class-variance-authority";
 
-interface AvatarProps extends BaseComponentProps {
+const variants = cva("overflow-hidden rounded-full", {
+  variants: {
+    size: {
+      large: "h-[41px] w-[41px]",
+      medium: "h-[35px] w-[35px]",
+      small: "h-[20px] w-[20px]",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+interface AvatarProps
+  extends BaseComponentProps,
+    VariantProps<typeof variants> {
   address: string;
 }
 
-export const Avatar = ({ className, address }: AvatarProps) => {
+export const Avatar = ({ className, address, size }: AvatarProps) => {
   return (
     <div
       // TODO: border radius is 50%
-      className={`h-[35px] w-[35px] overflow-hidden rounded-full ${className}`}
+      className={variants({
+        className,
+        size,
+      })}
     >
       <BlockExplorerLink type="address" item={address}>
         <img

diff --git a/src/components/_shared/button/button.component.tsx b/src/components/_shared/button/button.component.tsx
@@ -5,7 +5,7 @@ import { ComponentProps } from "react";
 
 // TODO: group style types in cn combiner for readability
 const variants = cva(
-  "relative block w-full rounded-md border border-solid border-black px-x4 py-x2 font-inter text-sm text-black transition [transform-style:preserve-3d] hover:no-underline hover:[&>span]:text-[inherit]",
+  "relative block w-full rounded-md border border-solid border-black px-6 py-4 font-inter text-sm text-black transition [transform-style:preserve-3d] hover:no-underline hover:[&>span]:text-[inherit]",
   {
     variants: {
       disabled: {

diff --git a/src/components/_shared/connect-button/connect-button.component.tsx b/src/components/_shared/connect-button/connect-button.component.tsx
@@ -45,6 +45,7 @@ export const ConnectedDropdown = ({
       title={WalletHelper.getShortAddress(account.address)}
       avatar={
         <Avatar
+          size="small"
           className="flex h-full flex-row items-center"
           address={account.address || ""}
         />
@@ -54,7 +55,7 @@ export const ConnectedDropdown = ({
         {isConnected ? (
           // TODO: fix colors
           <div className="flex w-full flex-col items-center border-b border-solid border-black dark:border-white">
-            <div className="flex w-full flex-row justify-between px-x1 py-x2">
+            <div className="flex w-full flex-row justify-between px-5 py-x2">
               <div className="flex flex-row items-center p-x1 font-semibold">
                 <MentoIcon
                   className="mr-x1"
@@ -68,7 +69,8 @@ export const ConnectedDropdown = ({
                 {NumbersService.parseNumericValue(mentoBalance.formatted, 1)}
               </div>
             </div>
-            <div className="flex w-full flex-row justify-between px-x1 py-x2">
+            <hr className="mx-auto w-[calc(100%_-_40px)] border-t-gray-light" />
+            <div className="flex w-full flex-row justify-between px-5 py-x2">
               <div className="flex flex-shrink flex-grow flex-row items-center p-x1 font-semibold">
                 <MentoIcon
                   className="mr-x1"
@@ -84,15 +86,22 @@ export const ConnectedDropdown = ({
             </div>
           </div>
         ) : null}
-        <DropdownButton.Element onClick={openAccountModal}>
+        <DropdownButton.Element
+          className="[&_button]:pl-5"
+          onClick={openAccountModal}
+        >
           {/* TODO: Need account icon */}
           <span>Account settings</span>
         </DropdownButton.Element>
-        <DropdownButton.Element onClick={openChainModal}>
+        <DropdownButton.Element
+          className="[&_button]:pl-5"
+          onClick={openChainModal}
+        >
           <span>Chain settings</span>
         </DropdownButton.Element>
+        <hr className="mx-auto w-[calc(100%_-_40px)] border-t-gray-light" />
         <DropdownButton.Element
-          className="*:flex *:items-center *:justify-center"
+          className="*:flex *:items-center *:justify-start [&_button]:pl-5"
           onClick={() => disconnect()}
         >
           <DisconnectIcon />

diff --git a/src/components/_shared/dropdown-button/dropdown-button.addons.tsx b/src/components/_shared/dropdown-button/dropdown-button.addons.tsx
@@ -30,7 +30,8 @@ export const DropdownElement = ({
     >
       <button
         className={cn(
-          "w-full whitespace-nowrap border-none bg-transparent p-x2",
+          "w-full whitespace-nowrap border-none bg-transparent px-5 py-3",
+          "text-left",
           "group-first:rounded-t-lg group-last:rounded-b-lg group-hover:text-gray-alt66",
         )}
         onClick={onClick}

diff --git a/src/components/_shared/dropdown-button/dropdown-button.component.tsx b/src/components/_shared/dropdown-button/dropdown-button.component.tsx
@@ -8,14 +8,14 @@ import { VariantProps, cva } from "class-variance-authority";
 import { cn } from "@/styles/helpers";
 
 const variants = cva(
-  "[transition:opacity_0.3s,_transform 0.3s_0.1s_ease-in,_z-index_0.1s_1s] pointer-events-none absolute top-x14 z-[-1] min-w-full -translate-y-x10 overflow-hidden opacity-0",
+  "[transition:opacity_0.3s,_transform 0.3s_0.1s_ease-in,_z-index_0.1s_1s] pointer-events-none absolute top-x14 z-[-1] min-w-full -translate-y-x10 overflow-hidden opacity-0 md:w-64",
   {
     variants: {
       align: {
         left: "left-0",
         right: "right-0",
       },
-      fullwidth: { true: "", false: "max-w-[200px]" },
+      fullwidth: { true: "", false: "max-w-64" },
       opened: {
         true: "pointer-events-auto z-10 translate-y-0 opacity-100",
         false: "",
@@ -84,6 +84,7 @@ type DropdownButtonProps = ComponentProps<"button"> &
   VariantProps<typeof variants> & {
     title?: string;
     avatar?: ReactNode;
+    buttonClassName?: string;
   };
 
 export const DropdownButton = ({
@@ -92,6 +93,7 @@ export const DropdownButton = ({
   children,
   title,
   fullwidth,
+  buttonClassName,
   avatar,
 }: DropdownButtonProps) => {
   const [alignment, setAlignment] = useState<"left" | "right">("right");
@@ -148,7 +150,7 @@ export const DropdownButton = ({
       <Button
         fullwidth={fullwidth}
         theme={theme}
-        className="min-w-x12 [&_button]:min-w-x12"
+        className={cn("min-w-x12", buttonClassName)}
         onClick={() => setDropdownOpened(!dropdownOpened)}
       >
         {!!avatar && avatar}
@@ -173,6 +175,7 @@ export const DropdownButton = ({
           variants({
             align: alignment,
             theme,
+            fullwidth,
             opened: dropdownOpened,
             className,
           }),

diff --git a/src/components/_shared/header/index.tsx b/src/components/_shared/header/index.tsx
@@ -24,7 +24,7 @@ const DesktopHeader = () => {
             <MentoLogoIcon className="h-6 w-[108px]" />
           </Link>
           <HeaderNav />
-          <ConnectButton />
+          <ConnectButton fullwidth={true} />
         </div>
       </MaxWidthWrapper>
     </header>

diff --git a/src/components/_shared/progress-bar/progress-bar.component.tsx b/src/components/_shared/progress-bar/progress-bar.component.tsx
@@ -173,7 +173,6 @@ export const MultiProgressBar = ({
         className,
       )}
     >
-      {/* <div className="flex h-4 w-full overflow-hidden rounded-3xl  border-[0.5px] border-solid border-black dark:border-gray"> */}
       <div className="relative h-4 w-full overflow-hidden rounded-3xl border-[0.5px] border-solid border-black dark:border-gray">
         {progressBars
           .sort((a, b) => b.progress - a.progress)

diff --git a/src/components/_shared/tabs/tab-list.component.tsx b/src/components/_shared/tabs/tab-list.component.tsx
@@ -16,6 +16,21 @@ const variants = cva("sticky top-0 z-10 flex bg-inherit px-0 py-x1", {
   },
 });
 
+const buttonVariant = cva(
+  "m-0 cursor-pointer border-none bg-none p-0 text-lg text-gray-light hover:text-primary",
+  {
+    variants: {
+      selected: {
+        true: "font-medium text-primary",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  },
+);
+
 export interface TabListProps
   extends ComponentProps<"div">,
     VariantProps<typeof variants> {
@@ -40,11 +55,9 @@ export const TabList = ({
         {tabs.map((tab, index) => (
           <button
             key={index}
-            className={cn(
-              // TODO: CVA
-              "m-0 cursor-pointer border-none bg-none p-0 text-gray-light hover:text-primary",
-              index === selectedTab && "font-medium text-primary",
-            )}
+            className={buttonVariant({
+              selected: index === selectedTab,
+            })}
             onClick={() => setSelectedTab(index)}
           >
             {tab}

diff --git a/...nts/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx b/...nts/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx
@@ -8,6 +8,7 @@ import {
 } from "../create-proposal-provider";
 import { parseUnits } from "viem";
 import { CreateProposalWrapper } from "../create-proposal-wrapper/create-proposal-wrapper.component";
+import Link from "next/link";
 
 enum WalletStepEnum {
   connectWallet = "connectWallet",
@@ -35,13 +36,13 @@ const CurrentFormStep = ({ formStep }: { formStep: WalletStepEnum }) => {
           </p>
           <p className="font-size-x4 line-height-x5 place-self-start">
             You can purchase MENTO{" "}
-            <a
+            <Link
               href={"https://app.mento.org"}
               className="text-primary underline"
               target="_blank"
             >
               here.
-            </a>
+            </Link>
           </p>
         </>
       );

diff --git a/src/components/proposal-current-votes/proposal-current-votes.component.tsx b/src/components/proposal-current-votes/proposal-current-votes.component.tsx
@@ -144,15 +144,14 @@ export const ProposalCurrentVotes = ({
                       </>
                     )}
                     {quorumNeeded <= BigInt(proposal.votes.for.total) && (
-                      <>Quorum reached.</>
+                      <>Quorum reached</>
                     )}
                   </>
                 )}
               </div>
             </div>
           </div>
         </div>
-        <div></div>
       </div>
     </Card>
   );