feat: modify ballot page styling

src/components/Header.tsx

@@ -2,12 +2,15 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { type ComponentPropsWithRef, useState } from "react";
 import clsx from "clsx";
+import { Menu, X } from "lucide-react";
+import dynamic from "next/dynamic";
 
 import { ConnectButton } from "./ConnectButton";
 import { IconButton } from "./ui/Button";
 import { Logo } from "./ui/Logo";
-import { Menu, X } from "lucide-react";
-import dynamic from "next/dynamic";
+import { useBallot } from "~/contexts/Ballot";
+import { getAppState } from "~/utils/state";
+import { EAppState } from "~/utils/types";
 
 const NavLink = ({
   isActive,
@@ -26,6 +29,8 @@ type NavLink = { href: string; children: string };
 export const Header = ({ navLinks }: { navLinks: NavLink[] }) => {
   const { asPath } = useRouter();
   const [isOpen, setOpen] = useState(false);
+  const { ballot } = useBallot();
+  const appState = getAppState();
 
   return (
     <header className="relative z-[100] border-b border-gray-200 bg-white">
@@ -42,15 +47,26 @@ export const Header = ({ navLinks }: { navLinks: NavLink[] }) => {
           </Link>
         </div>
         <div className="hidden h-full items-center gap-4 overflow-x-auto uppercase md:flex">
-          {navLinks?.map((link) => (
-            <NavLink
-              isActive={asPath.startsWith(link.href)}
-              key={link.href}
-              href={link.href}
-            >
-              {link.children}
-            </NavLink>
-          ))}
+          {navLinks?.map((link) => {
+            const pageName = `/${link.href.split("/")[1]}`;
+            return (
+              <NavLink
+                isActive={asPath.startsWith(pageName)}
+                key={link.href}
+                href={link.href}
+              >
+                {link.children}
+                {appState === EAppState.VOTING &&
+                  pageName === "/ballot" &&
+                  ballot &&
+                  ballot.votes.length > 0 && (
+                    <div className="ml-2 h-5 w-5 rounded-full border-2 border-blue-400 bg-blue-50 text-center text-sm leading-4 text-blue-400">
+                      {ballot.votes.length}
+                    </div>
+                  )}
+              </NavLink>
+            );
+          })}
         </div>
         <div className="flex-1 md:ml-8"></div>
         <div className="ml-4 flex gap-4 md:ml-8 xl:ml-32">

src/components/ui/Button.tsx

@@ -7,7 +7,7 @@ const button = tv({
   variants: {
     variant: {
       primary:
-        "bg-primary-600 hover:bg-primary-700 dark:bg-white dark:hover:bg-primary-500 dark:text-gray-900 text-white dark:disabled:bg-gray-500",
+        "bg-black text-white w-full uppercase rounded-lg hover:bg-gray-400",
       ghost: "hover:bg-gray-100 dark:hover:bg-gray-800",
       default:
         "bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700",

src/components/ui/Dialog.tsx

@@ -1,18 +1,20 @@
 import * as RadixDialog from "@radix-ui/react-dialog";
 import type { ReactNode, PropsWithChildren, ComponentProps } from "react";
-import { IconButton } from "./Button";
-import { createComponent } from ".";
 import { tv } from "tailwind-variants";
 import { X } from "lucide-react";
 import clsx from "clsx";
 
+import { IconButton } from "./Button";
+import { createComponent } from ".";
 import { theme } from "~/config";
+import { Spinner } from "./Spinner";
 
 export const Dialog = ({
   title,
   description,
   size,
   isOpen,
+  isLoading,
   button,
   buttonName,
   buttonAction,
@@ -23,6 +25,7 @@ export const Dialog = ({
   description?: string | ReactNode;
   size?: "sm" | "md";
   isOpen?: boolean;
+  isLoading?: boolean;
   button?: "primary" | "secondary";
   buttonName?: string;
   buttonAction?: () => void;
@@ -42,7 +45,8 @@ export const Dialog = ({
               {description}
             </RadixDialog.Description>
             {children}
-            {button && buttonName && buttonAction && (
+            {isLoading && <Spinner className="h-6 w-6 py-4" />}
+            {!isLoading && button && buttonName && buttonAction && (
               <button
                 className={clsx(
                   "mt-6 rounded-md border-none px-4 py-2 uppercase text-white",

src/components/ui/Input.tsx

@@ -10,7 +10,7 @@ export const inputBase = [
   "outline-none",
   "border-gray-200",
   "rounded-lg",
-  "border-2",
+  "border",
 ];
 
 export const Input = createComponent(

src/components/ui/Notification.tsx

@@ -0,0 +1,46 @@
+import { RiErrorWarningLine } from "react-icons/ri";
+import { tv } from "tailwind-variants";
+import clsx from "clsx";
+
+import { createComponent } from ".";
+
+const notification = tv({
+  base: "w-full flex items-start text-sm justify-center gap-1 text-base",
+  variants: {
+    variant: {
+      default: "text-blue-400",
+      block: "text-blue-700 bg-blue-400 border border-blue-700 rounded-lg p-4",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const NotificationContainer = createComponent("div", notification);
+
+interface NotificationProps {
+  content: string;
+  variant?: string;
+  italic?: boolean;
+  title?: string;
+}
+
+export const Notification = ({
+  content,
+  variant,
+  italic,
+  title,
+}: NotificationProps) => {
+  return (
+    <NotificationContainer variant={variant}>
+      <span className="pt-1">
+        <RiErrorWarningLine />
+      </span>
+      <div>
+        <b>{title ?? null}</b>
+        <p className={clsx("text-sm", italic ? "italic" : "")}>{content}</p>
+      </div>
+    </NotificationContainer>
+  );
+};

src/components/ui/Table.tsx

@@ -4,16 +4,21 @@ import { createComponent } from ".";
 export const Table = createComponent(
   "table",
   tv({
-    base: "w-full",
+    base: "w-full border-separate border-spacing-y-4 border-spacing-x-0",
   }),
 );
 export const Thead = createComponent("thead", tv({ base: "" }));
 export const Tbody = createComponent("tbody", tv({ base: "" }));
-export const Tr = createComponent(
-  "tr",
+export const Tr = createComponent("tr", tv({ base: "" }));
+export const Td = createComponent(
+  "td",
   tv({
-    base: "border-b dark:border-gray-800 last:border-none",
+    base: "p-4 border-y border-gray-200",
+    variants: {
+      variant: {
+        first: "border-l rounded-l-lg",
+        last: "border-r rounded-r-lg",
+      },
+    },
   }),
 );
-export const Th = createComponent("th", tv({ base: "text-left" }));
-export const Td = createComponent("td", tv({ base: "px-1 py-2" }));

src/contexts/Ballot.tsx

@@ -12,6 +12,7 @@ const defaultBallot = { votes: [], published: false };
 
 export const BallotProvider: React.FC<BallotProviderProps> = ({ children }) => {
   const [ballot, setBallot] = useState<Ballot>(defaultBallot);
+  const [isLoading, setLoading] = useState<boolean>(true);
 
   const { isDisconnected } = useAccount();
 
@@ -80,6 +81,7 @@ export const BallotProvider: React.FC<BallotProviderProps> = ({ children }) => {
         localStorage.getItem("ballot") ?? JSON.stringify(defaultBallot),
       ) ?? defaultBallot,
     );
+    setLoading(false);
   }, []);
 
   /// store ballot to localStorage once it changes
@@ -97,6 +99,7 @@ export const BallotProvider: React.FC<BallotProviderProps> = ({ children }) => {
 
   const value: BallotContextType = {
     ballot,
+    isLoading,
     addToBallot,
     removeFromBallot,
     deleteBallot,

src/contexts/Maci.tsx

@@ -150,15 +150,15 @@ export const MaciProvider: React.FC<MaciProviderProps> = ({ children }) => {
   const onVote = useCallback(
     async (
       votes: IVoteArgs[],
-      onError: () => Promise<void>,
+      onError: () => void,
       onSuccess: () => Promise<void>,
     ) => {
       if (!signer || !stateIndex || !pollData) {
         return;
       }
 
       if (!votes.length) {
-        await onError();
+        onError();
         setError("No votes provided");
         return;
       }

src/contexts/types.ts

@@ -22,7 +22,7 @@ export interface MaciContextType {
   onSignup: (onError: () => void) => Promise<void>;
   onVote: (
     args: IVoteArgs[],
-    onError: () => Promise<void>,
+    onError: () => void,
     onSuccess: () => Promise<void>,
   ) => Promise<void>;
 }
@@ -32,7 +32,8 @@ export interface MaciProviderProps {
 }
 
 export interface BallotContextType {
-  ballot?: Ballot;
+  ballot: Ballot;
+  isLoading: boolean;
   addToBallot: (votes: Vote[], pollId: string) => void;
   removeFromBallot: (projectId: string) => void;
   deleteBallot: () => void;

src/env.js

@@ -102,7 +102,7 @@ export const env = createEnv({
 
     NEXT_PUBLIC_TALLY_URL: z.string().url(),
 
-    NEXT_PUBLIC_ROUND_LOGO: z.string().optional()
+    NEXT_PUBLIC_ROUND_LOGO: z.string().optional(),
   },
 
   /**

src/features/ballot/components/AllocationInput.tsx

@@ -20,7 +20,7 @@ export const AllocationInput = ({
   const form = useFormContext();
 
   return (
-    <InputWrapper className="min-w-[160px]">
+    <InputWrapper className="min-w-[132px]">
       <Controller
         control={form.control}
         name={name!}