feat(glossary): added glossary, help button

packages/interface/src/components/Header.tsx

@@ -11,6 +11,7 @@ import { useRoundState } from "~/utils/state";
 import { ERoundState } from "~/utils/types";
 
 import ConnectButton from "./ConnectButton";
+import { HelpButton } from "./HelpButton";
 import { IconButton } from "./ui/Button";
 import { Logo } from "./ui/Logo";
 
@@ -125,9 +126,11 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => {
 
         <div className="flex-1 md:ml-8" />
 
-        <div className="ml-4 flex items-center gap-4 md:ml-8 xl:ml-32">
+        <div className="ml-4 flex items-center gap-2 md:ml-8 xl:ml-32">
+          <HelpButton />
+
           <IconButton
-            className="text-gray-600"
+            className="w-[50px] text-gray-600"
             icon={theme === "light" ? SunIcon : MoonIcon}
             variant="ghost"
             onClick={handleChangeTheme}

packages/interface/src/components/HelpButton.tsx

@@ -0,0 +1,45 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import { CiCircleQuestion } from "react-icons/ci";
+
+import { IconButton } from "./ui/Button";
+
+const feedbackUrl = process.env.NEXT_PUBLIC_FEEDBACK_URL!;
+
+export const HelpButton = (): JSX.Element => (
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger asChild>
+      <IconButton className="w-[100px] px-0  text-gray-600" icon={CiCircleQuestion} variant="ghost">
+        Help
+      </IconButton>
+    </DropdownMenu.Trigger>
+
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content className="DropdownMenuContent" sideOffset={25}>
+        <DropdownMenu.Item className="DropdownMenuItem">
+          <Link className="w-full underline" href="#FAQ" scroll={false}>
+            FAQ
+          </Link>
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item className="DropdownMenuItem">
+          <Link className="w-full underline" href="#Glossary" scroll={false}>
+            Glossary
+          </Link>
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item className="DropdownMenuItem">
+          <Link className="w-full underline" href={feedbackUrl} rel="noreferrer" target="_blank">
+            Share your feedback
+          </Link>
+
+          <div className="RightSlot">
+            <Image alt="arrow-go-to" className="dark:invert" height="15" src="/arrow-go-to.svg" width="18" />
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
+);

packages/interface/src/features/applications/components/ApplicationItem.tsx

@@ -8,6 +8,7 @@ import { Checkbox } from "~/components/ui/Form";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { useMetadata } from "~/hooks/useMetadata";
+import { removeMarkdown } from "~/utils/removeMarkdown";
 import { formatDate } from "~/utils/time";
 
 import type { TApplicationsToApprove, Application } from "../types";
@@ -66,7 +67,7 @@ export const ApplicationItem = ({
             </Skeleton>
 
             <div className="text-sm text-gray-400">
-              <div>{bio}</div>
+              <div>{removeMarkdown(bio || "")}</div>
             </div>
           </div>
         </div>

packages/interface/src/features/home/components/FaqList.tsx

@@ -3,7 +3,7 @@ import { Heading } from "~/components/ui/Heading";
 import { FAQItem } from "./FaqItem";
 
 export const FAQList = (): JSX.Element => (
-  <div className="mt-14 flex flex-col items-center justify-center sm:mt-28 dark:text-white">
+  <div className="mt-14 flex flex-col items-center justify-center sm:mt-28 dark:text-white" id="FAQ">
     <Heading size="6xl">FAQ</Heading>
 
     <FAQItem

packages/interface/src/features/home/components/Glossary.tsx

@@ -0,0 +1,71 @@
+import { Heading } from "~/components/ui/Heading";
+
+import { FAQItem } from "./FaqItem";
+
+export const Glossary = (): JSX.Element => (
+  <div className="mt-14 flex flex-col items-center justify-center sm:mt-28 dark:text-white" id="Glossary">
+    <Heading size="6xl">Glossary</Heading>
+
+    <FAQItem
+      description="An individual or team submitting a proposal for voting. Applicants aim to attract voter support by showcasing benefits."
+      title="Applicant"
+    />
+
+    <FAQItem
+      description="It's the option, candidate, idea, or project which the applicants submit for voting."
+      title="Proposal"
+    />
+
+    <FAQItem
+      description="Members who allocate their voting power (often through credits or tokens) to support proposals."
+      title="Voters"
+    />
+
+    <FAQItem
+      description="The Coordinator is responsible for deploying the MACI smart contracts, initiating polls, tallying the final results of a vote, and finalizing polls by publishing the final results on-chain."
+      title="Coordinator"
+    />
+
+    <FAQItem
+      description="The team or entity responsible for managing the funding round. Organizers define rules, oversee phases, verify applicant eligibility, and ensure transparency throughout the process."
+      title="Organizers"
+    />
+
+    <FAQItem
+      description="It's a community-driven funding method where matching funds are distributed based on the number of contributors and the amounts donated. It amplifies projects with broad support by prioritizing many small contributions over a few large ones, ensuring fair and democratic allocation of resources."
+      title="Quadratic Funding"
+    />
+
+    <FAQItem
+      description="During this phase, applicants submit their proposals, including detailed descriptions, goals, and potential impact. Organizers review and approve submissions to ensure they meet the round criteria."
+      title="Application Phase"
+    />
+
+    <FAQItem
+      description="Voters review the approved proposals and allocate their voting power to the projects they support."
+      title="Voting Phase"
+    />
+
+    <FAQItem
+      description="The Coordinator processes all the messages, tallies the results and publishes the proofs on-chain."
+      title="Tallying Phase"
+    />
+
+    <FAQItem description="The final distribution of votes is announced." title="Results Phase" />
+
+    <FAQItem
+      description="Voting power refers to the resources or credits a voter has to cast votes. It acts as a budget that determines how much influence a voter can exert on the outcome by supporting specific proposal."
+      title="Voting Power"
+    />
+
+    <FAQItem
+      description="Effective Votes represent the weighted impact of the credits spent after applying quadratic calculations, for example if a voter spends 16 credits on one project, the Effective Votes contributed will be 4. Effective votes reflect both individual contributions and collective support, ensuring small contributions from many voters have more influence than large contributions from a few."
+      title="Effective Votes"
+    />
+
+    <FAQItem
+      description="A conceptual grouping of proposals a voter choose and allocate their votes, allowing comparison and prioritization before submitting their votes."
+      title="Ballot"
+    />
+  </div>
+);

packages/interface/src/features/projects/components/VotingWidget.tsx

@@ -50,7 +50,7 @@ export const VotingWidget = ({ projectId, pollId, projectIndex }: IVotingWidgetP
 
       {buttonState === EButtonState.DEFAULT && (
         <Button variant="inverted" onClick={handleButtonAction}>
-          add to ballot
+          Add to ballot
         </Button>
       )}
     </div>

packages/interface/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 
 import { Providers } from "~/providers";
 import "~/styles/globals.css";
+import "~/styles/HelpButton.css";
 import { api } from "~/utils/api";
 
 import type { AppProps } from "next/app";

packages/interface/src/pages/index.tsx

@@ -10,6 +10,7 @@ import { config } from "~/config";
 import { useMaci } from "~/contexts/Maci";
 import { useRound } from "~/contexts/Round";
 import { FAQList } from "~/features/home/components/FaqList";
+import { Glossary } from "~/features/home/components/Glossary";
 import { RoundsList } from "~/features/rounds/components/RoundsList";
 import { useIsAdmin } from "~/hooks/useIsAdmin";
 import { Layout } from "~/layouts/DefaultLayout";
@@ -60,6 +61,8 @@ const HomePage = (): JSX.Element => {
       )}
 
       <FAQList />
+
+      <Glossary />
     </Layout>
   );
 };

packages/interface/src/pages/rounds/[pollId]/ballot/index.tsx

@@ -56,7 +56,7 @@ const ClearBallot = ({ pollId }: IClearBallotProps): JSX.Element | null => {
       <Dialog
         button="primary"
         buttonAction={handleClearBallot}
-        buttonName="Yes, Clear my ballot"
+        buttonName="Yes, Clear my Ballot"
         description="This will empty your ballot and remove all the projects you have added."
         isOpen={isOpen}
         size="sm"

packages/interface/src/styles/HelpButton.css

@@ -0,0 +1,163 @@
+.DropdownMenuContent,
+.DropdownMenuSubContent {
+  min-width: 220px;
+  background-color: white;
+  border-radius: 6px;
+  padding: 5px;
+  margin-top: -30px;
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  z-index: 1000;
+  position: relative;
+}
+.DropdownMenuContent[data-side="top"],
+.DropdownMenuSubContent[data-side="top"] {
+  animation-name: slideDownAndFade;
+}
+.DropdownMenuContent[data-side="right"],
+.DropdownMenuSubContent[data-side="right"] {
+  animation-name: slideLeftAndFade;
+}
+.DropdownMenuContent[data-side="bottom"],
+.DropdownMenuSubContent[data-side="bottom"] {
+  animation-name: slideUpAndFade;
+}
+.DropdownMenuContent[data-side="left"],
+.DropdownMenuSubContent[data-side="left"] {
+  animation-name: slideRightAndFade;
+}
+
+.DropdownMenuItem,
+.DropdownMenuCheckboxItem,
+.DropdownMenuRadioItem,
+.DropdownMenuSubTrigger {
+  font-size: 13px;
+  line-height: 1;
+  color: var(--gray-11);
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 5px;
+  position: relative;
+  padding-left: 25px;
+  user-select: none;
+  outline: none;
+}
+.DropdownMenuSubTrigger[data-state="open"] {
+  background-color: var(--gray-4);
+  color: var(--gray-11);
+}
+.DropdownMenuItem[data-disabled],
+.DropdownMenuCheckboxItem[data-disabled],
+.DropdownMenuRadioItem[data-disabled],
+.DropdownMenuSubTrigger[data-disabled] {
+  color: var(--gray-8);
+  pointer-events: none;
+}
+.DropdownMenuItem[data-highlighted],
+.DropdownMenuCheckboxItem[data-highlighted],
+.DropdownMenuRadioItem[data-highlighted],
+.DropdownMenuSubTrigger[data-highlighted] {
+  background-color: #579bea;
+  color: var(--gray-1);
+}
+
+.DropdownMenuLabel {
+  padding-left: 25px;
+  font-size: 12px;
+  line-height: 25px;
+  color: var(--gray-11);
+}
+
+.DropdownMenuSeparator {
+  height: 1px;
+  background-color: #579bea;
+  margin: 5px;
+}
+
+.DropdownMenuItemIndicator {
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.DropdownMenuArrow {
+  fill: white;
+}
+
+.IconButton {
+  font-family: inherit;
+  border-radius: 100%;
+  height: 35px;
+  width: 35px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-11);
+  background-color: white;
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: 20px;
+  color: var(--gray-11);
+}
+[data-highlighted] > .RightSlot {
+  color: white;
+}
+[data-disabled] .RightSlot {
+  color: var(--gray-8);
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}