chore: replace to Heading components

packages/interface/.env.example

@@ -38,7 +38,6 @@ NEXT_PUBLIC_TOKEN_NAME="Votes"
 # Determine when users can register applications, admins review them, voters vote, and results are published
 NEXT_PUBLIC_START_DATE=2024-01-01T00:00:00.000Z
 NEXT_PUBLIC_REGISTRATION_END_DATE=2024-01-01T00:00:00.000Z
-NEXT_PUBLIC_REVIEW_END_DATE=2024-01-01T00:00:00.000Z
 NEXT_PUBLIC_RESULTS_DATE=2024-01-01T00:00:00.000Z
 
 # Collect user feedback. Is shown as a link when user has voted

packages/interface/src/components/BallotOverview.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 
+import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useAppState } from "~/utils/state";
 import { EAppState } from "~/utils/types";
@@ -21,7 +22,9 @@ export const BallotOverview = (): JSX.Element => {
       }
     >
       <div className="dark:bg-lightBlack my-8 flex-col items-center gap-2 rounded-lg bg-white p-5 uppercase shadow-lg dark:text-white">
-        <h3>My Ballot</h3>
+        <Heading as="h3" size="3xl">
+          My Ballot
+        </Heading>
 
         <AddedProjects />
 

packages/interface/src/components/RoundInfo.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 
+import { Heading } from "~/components/ui/Heading";
 import { config } from "~/config";
 
 export const RoundInfo = (): JSX.Element => (
@@ -9,7 +10,9 @@ export const RoundInfo = (): JSX.Element => (
     <div className="flex items-center gap-2">
       {config.roundLogo && <Image alt="round logo" height="20" src={`/${config.roundLogo}`} width="20" />}
 
-      <h3>{config.roundId}</h3>
+      <Heading as="h3" size="3xl">
+        {config.roundId}
+      </Heading>
     </div>
   </div>
 );

packages/interface/src/components/ui/Form.tsx

@@ -24,6 +24,7 @@ import { type z } from "zod";
 import { cn } from "~/utils/classNames";
 
 import { IconButton } from "./Button";
+import { Heading } from "./Heading";
 import { inputBase, Input, InputWrapper, InputIcon } from "./Input";
 import { Tooltip } from "./Tooltip";
 
@@ -197,7 +198,7 @@ export const FormSection = ({
   ...props
 }: { title: string; description: string } & ComponentProps<"section">): JSX.Element => (
   <section className="mb-8" {...props}>
-    <h3 className="mb-1 font-sans text-xl font-semibold">{title}</h3>
+    <Heading className="mb-1 font-sans text-xl font-semibold">{title}</Heading>
 
     <p className="mb-4 leading-loose text-gray-400">{description}</p>
 

packages/interface/src/components/ui/Heading.tsx

@@ -5,14 +5,16 @@ import { createComponent } from ".";
 export const Heading = createComponent(
   "div",
   tv({
-    base: "font-bold",
+    base: "font-bold dark:text-white font-mono uppercase",
     variants: {
       size: {
         md: "text-base",
         lg: "text-lg mt-2 mb-1 ",
         xl: "text-xl ",
         "2xl": "text-2xl mt-8 mb-4 ",
-        "3xl": "text-3xl mt-8 mb-4 ",
+        "3xl": "text-[32px]",
+        "4xl": "text-[40px]",
+        "6xl": "text-6xl mb-8",
       },
     },
     defaultVariants: {

packages/interface/src/config.ts

@@ -76,7 +76,6 @@ export const config = {
   voteLimit: 50,
   startsAt: parseDate(process.env.NEXT_PUBLIC_START_DATE),
   registrationEndsAt: parseDate(process.env.NEXT_PUBLIC_REGISTRATION_END_DATE),
-  reviewEndsAt: parseDate(process.env.NEXT_PUBLIC_REVIEW_END_DATE),
   resultsAt: parseDate(process.env.NEXT_PUBLIC_RESULTS_DATE),
   skipApprovedVoterCheck: ["true", "1"].includes(process.env.NEXT_PUBLIC_SKIP_APPROVED_VOTER_CHECK!),
   tokenName: process.env.NEXT_PUBLIC_TOKEN_NAME!,

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

@@ -9,6 +9,7 @@ import { EmptyState } from "~/components/EmptyState";
 import { Badge } from "~/components/ui/Badge";
 import { Button } from "~/components/ui/Button";
 import { Checkbox, Form } from "~/components/ui/Form";
+import { Heading } from "~/components/ui/Heading";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { Spinner } from "~/components/ui/Spinner";
 import { useApplications } from "~/features/applications/hooks/useApplications";
@@ -183,7 +184,9 @@ export const ApplicationsToApprove = (): JSX.Element => {
   return (
     <div className="flex w-full justify-center dark:text-white">
       <div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
-        <h3>Review Applications</h3>
+        <Heading as="h3" size="3xl">
+          Review Applications
+        </Heading>
 
         <p className="text-gray-400">
           Select the applications you want to approve. You must be a configured admin to approve applications.

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

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { useMemo, type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
+import { Heading } from "~/components/ui/Heading";
 import { Tag } from "~/components/ui/Tag";
 
 import type { Application } from "../types";
@@ -42,7 +43,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
   return (
     <div className="flex flex-col gap-8">
       <div>
-        <h3 className="mb-1 font-sans text-xl font-semibold">Review & Submit</h3>
+        <Heading className="mb-1 font-sans text-xl font-semibold">Review & Submit</Heading>
 
         <p className="leading-loose text-gray-400">Please review and submit your project application.</p>
       </div>

packages/interface/src/features/ballot/components/BallotConfirmation.tsx

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 
 import { createComponent } from "~/components/ui";
 import { Button } from "~/components/ui/Button";
+import { Heading } from "~/components/ui/Heading";
 import { Notice } from "~/components/ui/Notice";
 import { config } from "~/config";
 import { useBallot } from "~/contexts/Ballot";
@@ -34,7 +35,9 @@ export const BallotConfirmation = (): JSX.Element => {
 
   return (
     <section>
-      <h2 className="font-mono uppercase tracking-tighter">Your votes have been successfully submitted 🥳</h2>
+      <Heading as="h2" className="tracking-tighter" size="4xl">
+        Your votes have been successfully submitted 🥳
+      </Heading>
 
       <p className="mb-14 mt-4 text-gray-400">
         {`Thank you for participating in ${config.eventName} ${config.roundId} round.`}

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { type ReactNode } from "react";
 
+import { Heading } from "~/components/ui/Heading";
 import { Navigation } from "~/components/ui/Navigation";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { ProjectBanner } from "~/features/projects/components/ProjectBanner";
@@ -50,7 +51,9 @@ const ProjectDetails = ({
       </div>
 
       <div className="flex items-center justify-between">
-        <h3>{attestation?.name}</h3>
+        <Heading as="h3" size="3xl">
+          {attestation?.name}
+        </Heading>
 
         {appState === EAppState.VOTING && <VotingWidget projectId={projectId} />}
       </div>

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

@@ -6,6 +6,7 @@ import { FiAlertCircle } from "react-icons/fi";
 import { InfiniteLoading } from "~/components/InfiniteLoading";
 import { SortFilter } from "~/components/SortFilter";
 import { StatusBar } from "~/components/StatusBar";
+import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { useResults } from "~/hooks/useResults";
@@ -78,7 +79,9 @@ export const Projects = (): JSX.Element => {
       )}
 
       <div className="mb-4 flex justify-between">
-        <h3>Projects</h3>
+        <Heading as="h3" size="3xl">
+          Projects
+        </Heading>
 
         <div>
           <SortFilter />

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

@@ -1,8 +1,10 @@
+import { Heading } from "~/components/ui/Heading";
+
 import { FAQItem } from "./FaqItem";
 
 export const FAQList = (): JSX.Element => (
   <div className="mt-28 flex flex-col items-center justify-center dark:text-white">
-    <h1 className="mb-8">FAQ</h1>
+    <Heading size="6xl">FAQ</Heading>
 
     <FAQItem
       description="(Please enter the main focus and description of this round.)"

packages/interface/src/features/voters/components/VotersList.tsx

@@ -12,7 +12,7 @@ export const VotersList = (): JSX.Element => {
     return <EmptyState title="No voters">Add voters to allow them to vote</EmptyState>;
   }
   return (
-    <div className="space-y-1">
+    <div className="space-y-1 dark:text-white">
       {(data
         ? data.filter(
             ({ recipient }, index, array) => array.findIndex((item) => item.recipient === recipient) === index,

packages/interface/src/pages/applications/confirmation.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 
 import { Alert } from "~/components/ui/Alert";
+import { Heading } from "~/components/ui/Heading";
 import { useApplicationByTxHash } from "~/features/applications/hooks/useApplicationByTxHash";
 import { ProjectItem } from "~/features/projects/components/ProjectItem";
 import { Layout } from "~/layouts/DefaultLayout";
@@ -23,7 +24,9 @@ const ConfirmProjectPage = (): JSX.Element => {
     <Layout>
       <div className="flex w-full justify-center">
         <div className="flex flex-col items-center gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
-          <h2 className="font-mono uppercase">Your project application has been submitted!</h2>
+          <Heading as="h2" size="4xl">
+            Your project application has been submitted!
+          </Heading>
 
           <p className="text-gray-400">
             Thank you for submitting your project application. Our team is now reviewing it.

packages/interface/src/pages/applications/new.tsx

@@ -1,6 +1,7 @@
 import { FiAlertCircle } from "react-icons/fi";
 
 import { Alert } from "~/components/ui/Alert";
+import { Heading } from "~/components/ui/Heading";
 import { ApplicationForm } from "~/features/applications/components/ApplicationForm";
 import { Layout } from "~/layouts/DefaultLayout";
 import { useAppState } from "~/utils/state";
@@ -13,7 +14,9 @@ const NewProjectPage = (): JSX.Element => {
     <Layout>
       <div className="flex w-full justify-center">
         <div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
-          <h3>New Application</h3>
+          <Heading as="h3" size="3xl">
+            New Application
+          </Heading>
 
           <p className="text-gray-400">
             <span className="inline-block">

packages/interface/src/pages/ballot/index.tsx

@@ -8,6 +8,7 @@ import { useAccount } from "wagmi";
 import { Button } from "~/components/ui/Button";
 import { Dialog } from "~/components/ui/Dialog";
 import { Form } from "~/components/ui/Form";
+import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { AllocationFormWrapper } from "~/features/ballot/components/AllocationList";
@@ -63,7 +64,9 @@ const ClearBallot = (): JSX.Element | null => {
 const EmptyBallot = (): JSX.Element => (
   <div className="flex flex-1 items-center justify-center">
     <div className=" max-w-[360px] space-y-4">
-      <h3 className="text-center text-lg font-bold">Your vote is empty</h3>
+      <Heading className="text-center" size="lg">
+        Your vote is empty
+      </Heading>
 
       <p className="text-center text-sm text-gray-700">
         Your vote currently doesn&apos;t have any projects added. Browse through the available projects.
@@ -87,7 +90,9 @@ const BallotAllocationForm = (): JSX.Element => {
 
   return (
     <div className="px-8">
-      <h1 className="text-4xl uppercase tracking-tighter">My Ballot</h1>
+      <Heading className="tracking-tighter" size="4xl">
+        My Ballot
+      </Heading>
 
       <p className="my-4 text-gray-400">Once you have reviewed your vote allocation, you can submit your ballot.</p>
 
@@ -142,7 +147,9 @@ const BallotPage = (): JSX.Element => {
         </Form>
       )}
 
-      {appState !== EAppState.VOTING && <div>You can only vote during the voting period.</div>}
+      {appState !== EAppState.VOTING && (
+        <div className="dark:text-white">You can only vote during the voting period.</div>
+      )}
     </LayoutWithSidebar>
   );
 };

packages/interface/src/pages/info/index.tsx

@@ -1,3 +1,4 @@
+import { Heading } from "~/components/ui/Heading";
 import { config } from "~/config";
 import { Layout } from "~/layouts/DefaultLayout";
 import { cn } from "~/utils/classNames";
@@ -8,13 +9,9 @@ const steps = [
     label: "Registration",
     date: config.startsAt,
   },
-  {
-    label: "Review & Approval",
-    date: config.registrationEndsAt,
-  },
   {
     label: "Voting",
-    date: config.reviewEndsAt,
+    date: config.registrationEndsAt,
   },
   {
     label: "Tallying",
@@ -43,7 +40,9 @@ const InfoPage = (): JSX.Element => {
               "opacity-50": currentStepIndex <= i,
             })}
           >
-            <h3 className="font-semibold">{step.label}</h3>
+            <Heading as="h3" size="3xl">
+              {step.label}
+            </Heading>
 
             {step.date instanceof Date && !Number.isNaN(step.date) && <div>{formatDate(step.date)}</div>}
           </div>

packages/interface/src/pages/signup/index.tsx

@@ -7,6 +7,7 @@ import { EligibilityDialog } from "~/components/EligibilityDialog";
 import { Info } from "~/components/Info";
 import { JoinButton } from "~/components/JoinButton";
 import { Button } from "~/components/ui/Button";
+import { Heading } from "~/components/ui/Heading";
 import { config } from "~/config";
 import { useMaci } from "~/contexts/Maci";
 import { FAQList } from "~/features/signup/components/FaqList";
@@ -24,9 +25,13 @@ const SignupPage = (): JSX.Element => {
       <EligibilityDialog />
 
       <div className="flex h-[90vh] w-screen flex-col items-center justify-center gap-4 bg-blue-50 dark:bg-black">
-        <h1 className="max-w-screen-lg text-center font-mono dark:text-white">{config.eventName.toUpperCase()}</h1>
+        <Heading className="max-w-screen-lg text-center" size="6xl">
+          {config.eventName}
+        </Heading>
 
-        <h2 className="max-w-screen-lg text-center font-mono dark:text-white">{config.roundId.toUpperCase()}</h2>
+        <Heading as="h2" className="max-w-screen-lg text-center" size="4xl">
+          {config.roundId.toUpperCase()}
+        </Heading>
 
         <p className="flex max-w-screen-md gap-2 text-center text-xl dark:text-gray-400">
           <span>{config.startsAt && format(config.startsAt, "d MMMM, yyyy")}</span>

packages/interface/src/pages/stats/index.tsx

@@ -18,7 +18,9 @@ const ResultsChart = dynamic(async () => import("~/features/results/components/C
 
 const Stat = ({ title, children = null }: PropsWithChildren<{ title: string }>) => (
   <div className="rounded border p-2">
-    <h3 className="font-bold text-gray-500">{title}</h3>
+    <Heading className="text-gray-500" size="3xl">
+      {title}
+    </Heading>
 
     <div className="text-4xl">{children}</div>
   </div>
@@ -51,7 +53,7 @@ const Stats = () => {
   if (!pollData && !isConnected) {
     return (
       <Alert className="mx-auto max-w-sm text-center" variant="info">
-        <h3 className="text-lg font-bold">Connect your wallet to see results</h3>
+        <Heading size="lg">Connect your wallet to see results</Heading>
 
         <div className="mt-4">
           <ConnectButton />
@@ -66,7 +68,7 @@ const Stats = () => {
 
   return (
     <div>
-      <h3 className="text-lg font-bold">Top Projects</h3>
+      <Heading size="lg">Top Projects</Heading>
 
       <div className="mb-8 h-[400px] rounded-xl bg-white text-black">
         <ResultsChart data={chartData} />

packages/interface/src/styles/globals.css

@@ -55,9 +55,3 @@
     color: #888888;
   }
 }
-
-@media (prefers-color-scheme: "dark") {
-  h3 {
-    color: white;
-  }
-}

packages/interface/src/utils/state.ts

@@ -17,10 +17,6 @@ export const useAppState = (): EAppState => {
     return EAppState.APPLICATION;
   }
 
-  if (config.reviewEndsAt && isAfter(config.reviewEndsAt, now)) {
-    return EAppState.REVIEWING;
-  }
-
   if (isAfter(votingEndsAt, now)) {
     return EAppState.VOTING;
   }

packages/interface/src/utils/types.ts

@@ -2,7 +2,6 @@ import { type Address } from "viem";
 
 export enum EAppState {
   LOADING = "LOADING",
-  REVIEWING = "REVIEWING",
   APPLICATION = "APPLICATION",
   VOTING = "VOTING",
   TALLYING = "TALLYING",