Design improvements

Author: carlbarrdahl

src/components/ConnectButton.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { type ComponentPropsWithRef } from "react";
+import { type PropsWithChildren, type ComponentPropsWithRef } from "react";
 import { type Address, useEnsAvatar, useEnsName } from "wagmi";
 import { FaListCheck } from "react-icons/fa6";
 
@@ -12,10 +12,11 @@ import { Chip } from "./ui/Chip";
 import { useBallot } from "~/features/ballot/hooks/useBallot";
 import { EligibilityDialog } from "./EligibilityDialog";
 import { useLayoutOptions } from "~/layouts/BaseLayout";
+import { useCurrentDomain } from "~/features/rounds/hooks/useRound";
 
 const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
 
-export const ConnectButton = () => {
+export const ConnectButton = ({ children }: PropsWithChildren) => {
   const breakpoint = useBreakpoint();
   const isMobile = breakpoint === "S";
 
@@ -63,15 +64,18 @@ export const ConnectButton = () => {
               }
 
               if (chain.unsupported) {
+                return <Button onClick={openChainModal}>Change network</Button>;
                 return <Chip onClick={openChainModal}>Wrong network</Chip>;
               }
 
               return (
-                <ConnectedDetails
-                  account={account}
-                  openAccountModal={openAccountModal}
-                  isMobile={isMobile}
-                />
+                children ?? (
+                  <ConnectedDetails
+                    account={account}
+                    openAccountModal={openAccountModal}
+                    isMobile={isMobile}
+                  />
+                )
               );
             })()}
           </div>
@@ -92,17 +96,17 @@ const ConnectedDetails = ({
 }) => {
   const { data: ballot } = useBallot();
   const ballotSize = (ballot?.votes ?? []).length;
-
+  const domain = useCurrentDomain();
   const { eligibilityCheck, showBallot } = useLayoutOptions();
   return (
     <div>
-      <div className="flex gap-2 text-white">
+      <div className="flex gap-2">
         {!showBallot ? null : ballot?.publishedAt ? (
           <Chip>Already submitted</Chip>
         ) : (
-          <Chip className="gap-2" as={Link} href={"/ballot"}>
+          <Chip className="gap-2" as={Link} href={`/${domain}/ballot`}>
             {isMobile ? <FaListCheck className="h-4 w-4" /> : `View Ballot`}
-            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 text-xs">
+            <div className="flex size-6 items-center justify-center rounded-full bg-gray-200 text-xs font-bold">
               {ballotSize}
             </div>
           </Chip>
@@ -134,7 +138,7 @@ const UserInfo = ({
         {avatar.data ? (
           <Image width={24} height={24} alt={name!} src={avatar.data} />
         ) : (
-          <div className="h-full bg-gray-200" />
+          <div className="h-full bg-gray-700" />
         )}
       </div>
       {children}

src/components/Header.tsx

@@ -10,8 +10,8 @@ import { Menu, X } from "lucide-react";
 import dynamic from "next/dynamic";
 
 const Logo = () => (
-  <div className="h-12">
-    <div className="flex h-full items-center justify-center rounded-full border-2  border-white px-4 text-base font-medium tracking-wider text-white hover:bg-gray-700">
+  <div className="">
+    <div className="flex h-full items-center justify-center rounded-full border-2 border-white  bg-gray-800 px-4 py-2 text-base font-medium tracking-wider text-white hover:bg-gray-700">
       {metadata.title}
     </div>
   </div>
@@ -23,9 +23,9 @@ const NavLink = ({
 }: { isActive: boolean } & ComponentPropsWithRef<typeof Link>) => (
   <Link
     className={clsx(
-      "flex h-full items-center border-b-[3px] border-transparent p-4 text-lg font-semibold tracking-wider text-gray-300 hover:text-white",
+      "hover:bg-primary-100 hover:text-primary-800 flex items-center rounded-full border-b-[3px] border-transparent px-6 py-2 font-semibold text-gray-600 transition-colors",
       {
-        ["!border-white  !text-white"]: isActive,
+        ["bg-primary-100 !border-white text-primary-700"]: isActive,
       },
     )}
     {...props}
@@ -38,9 +38,9 @@ export const Header = ({ navLinks }: { navLinks: NavLink[] }) => {
   const [isOpen, setOpen] = useState(false);
 
   return (
-    <header className="relative z-[100] bg-gray-900 shadow-md dark:shadow-none">
-      <div className="container mx-auto flex h-[72px] max-w-screen-2xl items-center px-2">
-        <div className="mr-4 flex items-center md:mr-16">
+    <header className="relative z-[100]">
+      <div className="container mx-auto flex h-[72px] max-w-screen-2xl items-center justify-between px-2">
+        <div className="flex items-center">
           <IconButton
             icon={isOpen ? X : Menu}
             variant="ghost"
@@ -51,7 +51,7 @@ export const Header = ({ navLinks }: { navLinks: NavLink[] }) => {
             <Logo />
           </Link>
         </div>
-        <div className="hidden h-full items-center gap-4 overflow-x-auto md:flex">
+        <div className="hidden h-full items-center gap-2 overflow-x-auto md:flex">
           {navLinks?.map((link) => (
             <NavLink
               isActive={asPath.startsWith(link.href)}
@@ -62,10 +62,7 @@ export const Header = ({ navLinks }: { navLinks: NavLink[] }) => {
             </NavLink>
           ))}
         </div>
-        <div className="flex-1 md:ml-8"></div>
-        <div className="ml-4 flex gap-4 md:ml-8 xl:ml-32">
-          <ConnectButton />
-        </div>
+        <ConnectButton />
         <MobileMenu isOpen={isOpen} navLinks={navLinks} />
       </div>
     </header>
@@ -89,7 +86,7 @@ const MobileMenu = ({
   >
     {navLinks.map((link) => (
       <Link
-        className={clsx("block p-4 text-2xl  font-semibold")}
+        className={clsx("block p-4 text-2xl font-semibold")}
         key={link.href}
         {...link}
       />

src/components/ui/Button.tsx

@@ -24,7 +24,8 @@ const button = tv({
     },
     size: {
       sm: "px-3 py-2 h-10 min-w-[40px]",
-      deafult: "px-4 py-2 h-12",
+      md: "px-6 py-2 h-12",
+      lg: "px-6 py-3 text-lg",
       icon: "h-12 w-12",
     },
     disabled: {
@@ -33,7 +34,7 @@ const button = tv({
   },
   defaultVariants: {
     variant: "default",
-    size: "deafult",
+    size: "md",
   },
 });
 

src/components/ui/Chip.tsx

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 import { createComponent } from ".";
 
 const chip = tv({
-  base: "border border-gray-700 rounded-full min-w-[42px] px-2 md:px-3 py-2 cursor-pointer inline-flex justify-center items-center whitespace-nowrap text-neutral-200 hover:text-neutral-100",
+  base: "border border-gray-700 rounded-full min-w-[42px] px-2 md:px-3 py-2 cursor-pointer inline-flex justify-center items-center whitespace-nowrap text-gray-600 hover:text-gray-800",
   variants: {},
 });
 

src/features/applications/components/ApplicationForm.tsx

@@ -317,7 +317,7 @@ function CreateApplicationButton({
         {!session && <div>You must connect wallet to create a list</div>}
         {!isCorrectNetwork && (
           <div className="flex items-center gap-2">
-            You must be connected to {correctNetwork.name}
+            You must be connected to {correctNetwork?.name}
           </div>
         )}
       </div>

src/features/applications/components/ApplicationsToApprove.tsx

@@ -5,21 +5,18 @@ import { useFormContext } from "react-hook-form";
 
 import { Button } from "~/components/ui/Button";
 import { Checkbox, Form, FormSection } from "~/components/ui/Form";
-import { Markdown } from "~/components/ui/Markdown";
 import { useMetadata } from "~/hooks/useMetadata";
 import { useApplications } from "~/features/applications/hooks/useApplications";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { type Application } from "~/features/applications/types";
 import { type Attestation } from "~/utils/fetchAttestations";
 import { Badge } from "~/components/ui/Badge";
 import { useApproveApplication } from "../hooks/useApproveApplication";
-import { useIsAdmin } from "~/hooks/useIsAdmin";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { Spinner } from "~/components/ui/Spinner";
 import { EmptyState } from "~/components/EmptyState";
 import { formatDate } from "~/utils/time";
 import { ClockIcon } from "lucide-react";
-import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
 import { useApprovedApplications } from "../hooks/useApprovedApplications";
 import { Alert } from "~/components/ui/Alert";
 
@@ -186,24 +183,18 @@ function SelectAllButton({
 }
 
 function ApproveButton({ isLoading = false }) {
-  const isAdmin = useIsAdmin();
-  const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();
   const form = useFormContext<ApplicationsToApprove>();
   const selectedCount = Object.values(form.watch("selected") ?? {}).filter(
     Boolean,
   ).length;
   return (
     <Button
       suppressHydrationWarning
-      disabled={!selectedCount || !isAdmin || isLoading || !isCorrectNetwork}
+      disabled={!selectedCount || isLoading}
       variant="primary"
       type="submit"
     >
-      {!isCorrectNetwork
-        ? `Connect to ${correctNetwork.name}`
-        : isAdmin
-          ? `Approve ${selectedCount} applications`
-          : "You must be an admin"}
+      Approve {selectedCount} applications
     </Button>
   );
 }

src/features/applications/components/ApproveButton.tsx

@@ -1,6 +1,5 @@
 import { Button } from "~/components/ui/Button";
 import { useApproveApplication } from "~/features/applications/hooks/useApproveApplication";
-import { useIsAdmin } from "~/hooks/useIsAdmin";
 import dynamic from "next/dynamic";
 import { type PropsWithChildren } from "react";
 import { useApprovedApplications } from "../hooks/useApprovedApplications";
@@ -10,7 +9,6 @@ function ApproveButton({
   children = "Approve project",
   projectIds = [],
 }: PropsWithChildren<{ projectIds: string[] }>) {
-  const isAdmin = useIsAdmin();
   const approvals = useApprovedApplications(projectIds);
 
   const approve = useApproveApplication();
@@ -21,15 +19,13 @@ function ApproveButton({
       </Badge>
     );
   return (
-    isAdmin && (
-      <Button
-        variant="primary"
-        disabled={approve.isLoading}
-        onClick={() => approve.mutate(projectIds)}
-      >
-        {children}
-      </Button>
-    )
+    <Button
+      variant="primary"
+      disabled={approve.isLoading}
+      onClick={() => approve.mutate(projectIds)}
+    >
+      {children}
+    </Button>
   );
 }
 

src/features/ballot/components/BallotOverview.tsx

@@ -15,26 +15,32 @@ import { formatNumber } from "~/utils/formatNumber";
 import { Dialog } from "~/components/ui/Dialog";
 import { VotingEndsIn } from "./VotingEndsIn";
 import { useProjectCount } from "~/features/projects/hooks/useProjects";
-import { config } from "~/config";
 import { useIsMutating } from "@tanstack/react-query";
 import { getQueryKey } from "@trpc/react-query";
 import { api } from "~/utils/api";
 import { getAppState } from "~/utils/state";
 import dynamic from "next/dynamic";
+import { useRoundToken } from "~/features/distribute/hooks/useAlloPool";
+import { useCurrentRound } from "~/features/rounds/hooks/useRound";
 
 function BallotOverview() {
   const router = useRouter();
 
   const { data: ballot } = useBallot();
   const isSaving = useIsMutating(getQueryKey(api.ballot.save));
 
+  const round = useCurrentRound();
+  const token = useRoundToken();
   const sum = sumBallot(ballot?.votes);
 
   const allocations = ballot?.votes ?? [];
-  const canSubmit = router.route === "/ballot" && allocations.length;
+  const canSubmit = router.route.includes("ballot") && allocations.length;
 
   const { data: projectCount } = useProjectCount();
 
+  const tokenName = token.data?.symbol;
+  const maxVotesTotal = round.data?.maxVotesTotal ?? 0;
+
   const appState = getAppState();
   if (appState === "RESULTS")
     return (
@@ -84,22 +90,22 @@ function BallotOverview() {
       <BallotSection
         title={
           <div className="flex justify-between">
-            {config.tokenName} allocated:
+            {tokenName} allocated:
             <div
               className={clsx("text-gray-900 dark:text-gray-300", {
-                ["text-primary-500"]: sum > config.votingMaxTotal,
+                ["text-primary-500"]: sum > maxVotesTotal,
               })}
             >
-              {formatNumber(sum)} {config.tokenName}
+              {formatNumber(sum)} {tokenName}
             </div>
           </div>
         }
       >
-        <Progress value={sum} max={config.votingMaxTotal} />
+        <Progress value={sum} max={maxVotesTotal} />
         <div className="flex justify-between text-xs">
           <div>Total</div>
           <div>
-            {formatNumber(config.votingMaxTotal ?? 0)} {config.tokenName}
+            {formatNumber(maxVotesTotal ?? 0)} {tokenName}
           </div>
         </div>
       </BallotSection>
@@ -112,7 +118,7 @@ function BallotOverview() {
           Adding to ballot...
         </Button>
       ) : canSubmit ? (
-        <SubmitBallotButton disabled={sum > config.votingMaxTotal} />
+        <SubmitBallotButton disabled={sum > maxVotesTotal} />
       ) : allocations.length ? (
         <Button className="w-full" variant="primary" as={Link} href={"/ballot"}>
           View ballot