Improve the header and voting card frontend

apps/web/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { WalletProvider } from "../context/WalletProvider";
 
 const newsreader = Newsreader({
   subsets: ["latin"],
+  weight: ["400", "500", "600"],
   display: "swap",
   variable: "--font-newsreader",
 });
@@ -31,7 +32,7 @@ export default function RootLayout({
           <ToastProvider>
             <div className="flex flex-col min-h-screen">
               <Header />
-              <main className="flex-grow container max-w-4xl mx-auto">
+              <main className="flex-grow container max-w-4xl mx-auto pt-10 bg-[url('/bg.svg')] bg-contain bg-no-repeat">
                 {children}
               </main>
               <Toaster />

apps/web/src/app/page.tsx

@@ -59,10 +59,10 @@ export default function Page() {
         <CouncilImage image={councilImage} />
         <CouncilName
           name={councilName}
-          className="min-h-12 text-4xl font-bold mb-4 text-accent text-center"
+          className="min-h-12 text-4xl font-semibold tracking-wider text-accent mb-4 text-center"
         />
       </Link>
-      <div className="flex flex-col gap-4 mb-4 text-justify">
+      <div className="flex flex-col gap-4 mt-4 mb-12 text-justify">
         {totalVotingPower ? (
           !address ? (
             <p className="text-center">

apps/web/src/components/ConnectButton.tsx

@@ -11,6 +11,8 @@ export function ConnectButton() {
   return address ? (
     <RainbowConnectButton showBalance={false} />
   ) : (
-    <Button onClick={openConnectModal}>Connect Wallet</Button>
+    <Button className="rounded-full" onClick={openConnectModal}>
+      Connect Wallet
+    </Button>
   );
 }

apps/web/src/components/CouncilImage.tsx

@@ -1,9 +1,16 @@
+import { cn } from "@repo/ui/lib/utils";
+
 export function CouncilImage({ image }: { image: string }) {
   return (
     <div className="w-[100px] h-[100px] mx-auto flex items-center justify-center mb-6">
       <div className="w-full h-full border-2 border-accent rounded-full">
         <div className="relative w-full h-full rounded-full border-8 border-card">
-          <div className="absolute inset-0 bg-accent rounded-full " />
+          <div
+            className={cn(
+              "absolute inset-0 rounded-full",
+              image ? "bg-accent" : "bg-inherit",
+            )}
+          />
           <div
             className={
               "absolute inset-0 w-full h-full bg-cover bg-center mb-6 grayscale opacity-60 rounded-full contrast-100"

apps/web/src/components/Header.tsx

@@ -3,9 +3,14 @@ import { ConnectButton } from "./ConnectButton";
 
 export default function Header() {
   return (
-    <div className="bg-gray-900 py-4 mb-6">
+    <div className="bg-gray-900 py-4">
       <div className="container max-w-4xl mx-auto flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-accent">Council Haus</h1>
+        <div className="flex items-center gap-2">
+          <img src="/logo-light.svg" alt="Council Haus" className="h-10" />
+          <h1 className="text-xl font-bold text-accent tracking-wider">
+            Council Haus
+          </h1>
+        </div>
         <ConnectButton />
       </div>
     </div>

apps/web/src/components/VotingButton.tsx

@@ -28,7 +28,10 @@ const VotingButton = ({
   return (
     <Button
       disabled={disabled || !address || isLoading}
-      className={cn("w-full py-2 rounded-lg mt-4 font-bold", className)}
+      className={cn(
+        "w-full py-2 rounded-full mt-4 font-bold tracking-wider",
+        className,
+      )}
       onClick={() => {
         setIsLoading(true);
         vote(
@@ -55,7 +58,7 @@ const VotingButton = ({
           });
       }}
     >
-      {isLoading ? "Voting..." : address ? "Vote" : "Wallet not connected"}
+      {isLoading ? "Voting…" : address ? "Vote" : "Wallet not connected"}
     </Button>
   );
 };

apps/web/src/components/VotingCard/VoteInput.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@repo/ui/components/ui/button";
 import { Input } from "@repo/ui/components/ui/input";
+import { Minus, Plus } from "lucide-react";
 
 export function VoteInput({
   value,
@@ -23,9 +24,9 @@ export function VoteInput({
       <Button
         disabled={disabled || value <= min}
         onClick={() => onChange(Math.max(min, value - increment))}
-        className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-r-none"
+        className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-r-none rounded-l-full"
       >
-        -
+        <Minus className="h-3 min-w-3" />
       </Button>
       <Input
         disabled={disabled}
@@ -41,9 +42,9 @@ export function VoteInput({
       <Button
         disabled={disabled || value >= max}
         onClick={() => onChange(Math.min(max, value + increment))}
-        className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-l-none"
+        className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-l-none rounded-r-full"
       >
-        +
+        <Plus className="h-3 min-w-3" />
       </Button>
       <span className="w-12 text-right hidden sm:block">
         {value > 0 ? Math.round((value / total) * 100) : 0}%

apps/web/src/components/VotingCard/index.tsx

@@ -101,7 +101,9 @@ const VotingCard = ({
   return (
     <Card className={className}>
       <CardHeader>
-        <CardTitle>Which project is doing better?</CardTitle>
+        <CardTitle className="font-heading font-medium tracking-wider">
+          Which project is doing better?
+        </CardTitle>
       </CardHeader>
       <CardContent>
         {isLoading ? (
@@ -111,7 +113,7 @@ const VotingCard = ({
         ) : (
           <>
             <div className="flex justify-between">
-              <h4 className="h-12 text-xl mb-6 text-accent flex-wrap">
+              <h4 className="h-12 text-xl mb-6 text-accent flex-wrap font-medium tracking-wider">
                 Cast Your Vote{" "}
                 {projects.length > maxVotedProjects ? (
                   <span className="text-nowrap text-sm">
@@ -132,9 +134,9 @@ const VotingCard = ({
               return (
                 <div
                   key={project.account}
-                  className="flex items-center justify-between mb-3"
+                  className="flex items-center justify-between mb-3 min-h-12"
                 >
-                  <span className="flex-grow text-ellipsis overflow-hidden">
+                  <span className="flex-grow line-clamp-2 mr-2">
                     {project.name}
                   </span>
                   <VoteInput

apps/web/src/hooks/useAllocation.ts

@@ -44,16 +44,18 @@ export const useAllocation = (
     enabled: !!council && !!councilMember,
   });
   const allocation = data?.allocations?.[0];
+  const votingPower = Number(data?.councilMember?.votingPower ?? 0);
   return {
-    data: allocation
-      ? Object.fromEntries(
-          allocation.grantees.map((g, index) => [
-            g.account as `0x${string}`,
-            Number(allocation.amounts[index]),
-          ]),
-        )
-      : undefined,
-    votingPower: Number(data?.councilMember?.votingPower ?? 0),
+    data:
+      allocation && votingPower
+        ? Object.fromEntries(
+            allocation.grantees.map((g, index) => [
+              g.account as `0x${string}`,
+              Number(allocation.amounts[index]),
+            ]),
+          )
+        : undefined,
+    votingPower,
     isLoading,
   };
 };

packages/ui/src/globals.css

@@ -28,4 +28,4 @@
     -moz-appearance: textfield;
     appearance: textfield;
   }
-}
+}