Update theme and design

.gitignore

@@ -14,6 +14,7 @@ node_modules
 
 # misc
 .DS_Store
+CLAUDE.md
 
 # IDE
 .vscode

packages/nextjs/app/_components/AccentWrapper.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+interface AccentWrapperProps {
+  children: React.ReactNode;
+}
+
+export default function AccentWrapper({ children }: AccentWrapperProps) {
+  return (
+    <div className="relative overflow-hidden bg-slate-900 pb-24 lg:pb-48">
+      <div
+        className="absolute inset-0 size-full opacity-70 mix-blend-overlay dark:md:opacity-100"
+        style={{
+          background: "url(/noise.webp) lightgray 0% 0% / 83.69069695472717px 83.69069695472717px repeat",
+        }}
+      ></div>
+      <Image className="absolute top-0 opacity-50" src="/blur-cyan.png" alt="" width={530} height={530} />
+      <Image className="absolute -top-64 -right-32" src="/blur-cyan.png" alt="" width={530} height={530} priority />
+      <Image className="absolute -right-12 bottom-24" src="/blur-indigo.png" alt="" width={567} height={567} priority />
+      {children}
+    </div>
+  );
+}

packages/nextjs/app/_components/ListVotings.tsx

@@ -115,7 +115,7 @@ const ListVotings = () => {
 
   return (
     <div className="w-full">
-      <ul className="w-full grid grid-cols-1 md:grid-cols-3 gap-4">
+      <ul className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {votings.length === 0 ? (
           <li className="col-span-1 md:col-span-3 bg-base-100 rounded-xl p-6 text-center opacity-70">
             No votings created yet.

packages/nextjs/app/_components/VotingOverview.tsx

@@ -1,60 +1,25 @@
 "use client";
 
-import { useState } from "react";
 import ListVotings from "./ListVotings";
 import OwnedVotings from "./OwnedVotings";
 import ParticipatedVotings from "./ParticipatedVotings";
 
 interface VotingOverviewProps {
-  onCreateClick: () => void;
+  activeTab: "all" | "owned" | "participated";
 }
 
-const VotingOverview = ({ onCreateClick }: VotingOverviewProps) => {
-  const [activeTab, setActiveTab] = useState<"all" | "owned" | "participated">("owned");
-
+const VotingOverview = ({ activeTab }: VotingOverviewProps) => {
   const tabs = [
-    { id: "owned" as const, label: "My Votings", component: OwnedVotings },
-    { id: "participated" as const, label: "I Can Vote", component: ParticipatedVotings },
-    { id: "all" as const, label: "All Votings", component: ListVotings },
+    { id: "owned" as const, component: OwnedVotings },
+    { id: "participated" as const, component: ParticipatedVotings },
+    { id: "all" as const, component: ListVotings },
   ];
 
   const ActiveComponent = tabs.find(tab => tab.id === activeTab)?.component || ListVotings;
 
   return (
-    <div className="w-full space-y-6">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div className="tabs tabs-boxed w-fit">
-          {tabs.map(tab => (
-            <button
-              key={tab.id}
-              className={`tab text-2xl font-medium ${activeTab === tab.id ? "tab-active" : ""}`}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-
-        <button
-          className="btn btn-primary gap-2 shadow-lg hover:scale-105 transition-transform"
-          onClick={onCreateClick}
-        >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-          </svg>
-          Create Voting
-        </button>
-      </div>
-
-      <div className="w-full max-h-[calc(3*280px+2*1rem)] overflow-y-auto pr-2">
-        <ActiveComponent />
-      </div>
+    <div className="w-full">
+      <ActiveComponent />
     </div>
   );
 };

packages/nextjs/app/layout.tsx

@@ -1,17 +1,24 @@
+import { Space_Grotesk } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-space-grotesk",
+  display: "swap", // Controls font-display CSS property
+});
+
 export const metadata = getMetadata({
   title: "Hidden Vote",
   description: "Host private voting sessions. Votes stay secret, results stay transparent.",
 });
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning className={``}>
+    <html suppressHydrationWarning className={spaceGrotesk.variable}>
       <body>
         <ThemeProvider enableSystem>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>