feat: add darkmode

privacy-scaling-explorations · Jul 15, 2024 · 572d0ea · 572d0ea
1 parent 7f9b7ef
commit 572d0ea
Show file tree

Hide file tree

Showing 42 changed files with 175 additions and 137 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "siwe": "^2.1.4",
     "sonner": "^1.4.0",
     "superjson": "^2.2.1",
+    "tailwindcss": "^3.4.1",
     "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.1.20",
     "viem": "^2.7.15",
@@ -119,7 +120,6 @@
     "postcss": "^8.4.33",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/BallotOverview.tsx b/src/components/BallotOverview.tsx
@@ -2,7 +2,7 @@ import { AddedProjects } from "./AddedProjects";
 import { VotingUsage } from "./VotingUsage";
 
 export const BallotOverview = (): JSX.Element => (
-  <div className="my-8 flex-col items-center gap-2 rounded-lg bg-white p-5 uppercase shadow-lg">
+  <div className="my-8 flex-col items-center gap-2 rounded-lg bg-white p-5 uppercase shadow-lg dark:bg-lightBlack dark:text-white">
     <h3>My Ballot</h3>
 
     <AddedProjects />

diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
@@ -52,7 +52,7 @@ export const ConnectButton = (): JSX.Element => {
             {(() => {
               if (!connected) {
                 return (
-                  <Button suppressHydrationWarning variant="primary" onClick={openConnectModal}>
+                  <Button suppressHydrationWarning variant="secondary" onClick={openConnectModal}>
                     {isMobile ? "Connect" : "Connect wallet"}
                   </Button>
                 );

diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
@@ -3,7 +3,7 @@ import { type PropsWithChildren } from "react";
 import { Heading } from "./ui/Heading";
 
 export const EmptyState = ({ title, children = null }: PropsWithChildren<{ title: string }>): JSX.Element => (
-  <div className="flex flex-col items-center justify-center rounded border p-8 dark:border-gray-700">
+  <div className="flex flex-col items-center justify-center rounded border p-8">
     <Heading as="h3" className="mt-0" size="lg">
       {title}
     </Heading>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -5,7 +5,7 @@ import { FaXTwitter } from "react-icons/fa6";
 import { Logo } from "./ui/Logo";
 
 export const Footer = (): JSX.Element => (
-  <footer className="flex items-center justify-between border-t border-gray-300 bg-gray-50 px-12 py-9">
+  <footer className="flex items-center justify-between border-t border-gray-300 bg-gray-50 px-12 py-9 dark:border-lighterBlack dark:bg-black dark:text-white">
     <div className="flex items-center justify-start gap-4">
       <a aria-label="twitter" href="https://x.com/zkMACI" rel="noreferrer" target="_blank">
         <FaXTwitter />
@@ -33,13 +33,13 @@ export const Footer = (): JSX.Element => (
       <a className="flex items-center gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
         <span>Documentation</span>
 
-        <Image alt="arrow-go-to" height="18" src="/arrow-go-to.svg" width="18" />
+        <Image alt="arrow-go-to" className="dark:invert" height="18" src="/arrow-go-to.svg" width="18" />
       </a>
 
       <a className="flex items-center gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
         <span>About MACI-RPGF</span>
 
-        <Image alt="arrow-go-to" height="18" src="/arrow-go-to.svg" width="18" />
+        <Image alt="arrow-go-to" className="dark:invert" height="18" src="/arrow-go-to.svg" width="18" />
       </a>
 
       <Logo />

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,9 +1,10 @@
 import clsx from "clsx";
-import { Menu, X } from "lucide-react";
+import { Menu, X, SunIcon, MoonIcon } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { type ComponentPropsWithRef, useState } from "react";
+import { useTheme } from "next-themes";
+import { type ComponentPropsWithRef, useState, useCallback } from "react";
 
 import { useBallot } from "~/contexts/Ballot";
 import { useAppState } from "~/utils/state";
@@ -30,12 +31,9 @@ interface IMobileMenuProps {
 
 const MobileMenu = ({ isOpen = false, navLinks }: IMobileMenuProps) => (
   <div
-    className={clsx(
-      "fixed left-0 top-16 z-10 h-full w-full bg-white transition-transform duration-150 dark:bg-gray-900",
-      {
-        "translate-x-full": !isOpen,
-      },
-    )}
+    className={clsx("fixed left-0 top-16 z-10 h-full w-full bg-white transition-transform duration-150", {
+      "translate-x-full": !isOpen,
+    })}
   >
     {navLinks.map((link) => (
       <Link key={link.href} className={clsx("block p-4 text-2xl  font-semibold")} {...link} />
@@ -53,9 +51,14 @@ const Header = ({ navLinks }: { navLinks: INavLink[] }) => {
   const [isOpen, setOpen] = useState(false);
   const { ballot } = useBallot();
   const appState = useAppState();
+  const { theme, setTheme } = useTheme();
+
+  const handleChangeTheme = useCallback(() => {
+    setTheme(theme === "light" ? "dark" : "light");
+  }, [theme, setTheme]);
 
   return (
-    <header className="relative z-[100] border-b border-gray-200 bg-white">
+    <header className="relative z-[100] border-b border-gray-200 bg-white dark:border-lighterBlack dark:bg-lightBlack dark:text-white">
       <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">
           <IconButton
@@ -91,7 +94,14 @@ const Header = ({ navLinks }: { navLinks: INavLink[] }) => {
 
         <div className="flex-1 md:ml-8" />
 
-        <div className="ml-4 flex gap-4 md:ml-8 xl:ml-32">
+        <div className="ml-4 flex items-center gap-4 md:ml-8 xl:ml-32">
+          <IconButton
+            className="text-gray-600"
+            icon={theme === "light" ? SunIcon : MoonIcon}
+            variant="ghost"
+            onClick={handleChangeTheme}
+          />
+
           <ConnectButton />
         </div>
 

diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
@@ -53,7 +53,7 @@ export const ImageUpload = ({
           />
 
           <div
-            className={clsx("h-full rounded-xl bg-gray-200 bg-cover bg-center bg-no-repeat dark:bg-gray-800", {
+            className={clsx("h-full rounded-xl bg-gray-200 bg-cover bg-center bg-no-repeat", {
               "animate-pulse opacity-50": upload.isPending,
             })}
             style={{

diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -13,7 +13,7 @@ import { VotingInfo } from "./VotingInfo";
 const InfoContainer = createComponent(
   "div",
   tv({
-    base: "flex items-center justify-center gap-2 rounded-lg bg-white p-5 shadow-lg",
+    base: "flex items-center justify-center gap-2 rounded-lg bg-white p-5 shadow-lg dark:bg-lightBlack",
     variants: {
       size: {
         sm: "flex-col",

diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx
@@ -11,9 +11,10 @@ const InfoCardContainer = createComponent(
     base: "rounded-md p-2 max-lg:w-full lg:w-64",
     variants: {
       state: {
-        [EInfoCardState.PASSED]: "border border-blue-500 bg-blue-50 text-blue-500",
+        [EInfoCardState.PASSED]: "border border-blue-500 bg-blue-50 text-blue-500 dark:bg-darkBlue dark:text-blue-800",
         [EInfoCardState.ONGOING]: "border border-blue-500 bg-blue-500 text-white",
-        [EInfoCardState.UPCOMING]: "border border-gray-200 bg-transparent text-gray-200",
+        [EInfoCardState.UPCOMING]:
+          "border border-gray-200 bg-transparent text-gray-200 dark:border-lighterBlack dark:text-gray-800",
       },
     },
   }),
@@ -40,7 +41,7 @@ export const InfoCard = ({ state, title, start, end }: InfoCardProps): JSX.Eleme
       {state === EInfoCardState.ONGOING && <div className="h-4 w-4 rounded-full bg-green" />}
 
       {state === EInfoCardState.UPCOMING && (
-        <div className="h-4 w-4 rounded-full border-2 border-gray-200 bg-transparent" />
+        <div className="h-4 w-4 rounded-full border-2 border-gray-200 bg-transparent dark:border-gray-800" />
       )}
     </div>
 

diff --git a/src/components/SortByDropdown.tsx b/src/components/SortByDropdown.tsx
@@ -19,7 +19,7 @@ interface IRadioItemProps {
 
 const RadioItem = ({ value = "", label = "" }: IRadioItemProps): JSX.Element => (
   <DropdownMenu.RadioItem
-    className="cursor-pointer rounded p-2 pl-8 text-sm text-gray-900 outline-none hover:bg-gray-100 focus-visible:ring-0 dark:text-gray-300 dark:hover:bg-gray-800"
+    className="cursor-pointer rounded p-2 pl-8 text-sm text-gray-900 outline-none hover:bg-gray-100 focus-visible:ring-0 dark:bg-lightBlack dark:text-white"
     value={value}
   >
     <DropdownMenu.ItemIndicator className="absolute left-4">
@@ -40,18 +40,18 @@ export const SortByDropdown = ({ value, onChange, options = [] }: ISortByDropdow
 
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild className="rounded-md border-gray-200 text-gray-600">
+      <DropdownMenu.Trigger asChild className="rounded-md border-gray-200 text-gray-600 dark:border-gray-800">
         <IconButton aria-label="Sort by" className="my-0 w-48" icon={ArrowUpDown} variant="outline">
           Sort by: {sortLabels[value]}
         </IconButton>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="z-50 w-[200px] rounded-md border border-gray-300 bg-white p-2 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+          className="z-50 w-[200px] rounded-md border border-gray-300 bg-white p-2 dark:bg-lightBlack"
           sideOffset={5}
         >
-          <DropdownMenu.Label className="dark:gray-500 p-2 text-xs font-semibold uppercase text-gray-700">
+          <DropdownMenu.Label className="p-2 text-xs font-semibold uppercase text-gray-700 dark:text-white">
             Sort By
           </DropdownMenu.Label>
 

diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
@@ -10,9 +10,12 @@ const StatusBarContainer = createComponent(
     variants: {
       status: {
         default: "text-blue-600 border-blue-600 bg-blue-400",
-        pending: "text-[#4E1D0D] border-[#4E1D0D] bg-[#FFEDD5]",
-        approved: "text-[#14532D] border-[#14532D] bg-[#BBF7D0]",
-        declined: "text-[#F87171] border-[#F87171] bg-[#FEE2E2]",
+        pending:
+          "text-[#4E1D0D] border-[#4E1D0D] bg-[#FFEDD5] dark:text-[#F1B37A] dark:bg-[#4E1D0D] dark:border-[#F1B37A]",
+        approved:
+          "text-[#14532D] border-[#14532D] bg-[#BBF7D0] dark:text-[#4ADE80] dark:border-[#4ADE80] dark:bg-[#031E0C]",
+        declined:
+          "text-[#F87171] border-[#F87171] bg-[#FEE2E2] dark:text-[#F87171] dark:border-[#F87171] dark:bg-[#3D0B0B]",
       },
     },
     defaultVariants: {

diff --git a/src/components/ui/Alert.tsx b/src/components/ui/Alert.tsx
@@ -9,7 +9,7 @@ const alert = tv({
   variants: {
     variant: {
       warning: "bg-red-200 text-red-800",
-      info: "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-300",
+      info: "bg-gray-100 text-gray-900",
       success: "bg-green-200 text-green-800",
     },
   },

diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
@@ -7,7 +7,7 @@ import { createComponent } from ".";
 export const Avatar = createComponent(
   BackgroundImage,
   tv({
-    base: "bg-gray-200 dark:bg-gray-800 border-2 border-white",
+    base: "bg-gray-200 border-2 border-white",
     variants: {
       size: {
         xs: "w-5 h-5 rounded-xs",
@@ -19,7 +19,7 @@ export const Avatar = createComponent(
         full: "rounded-full",
       },
       bordered: {
-        true: "outline outline-white dark:outline-gray-900",
+        true: "outline outline-white",
       },
     },
     defaultVariants: {

diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
@@ -5,15 +5,15 @@ import { createComponent } from ".";
 export const Badge = createComponent(
   "div",
   tv({
-    base: "inline-flex items-center rounded font-semibold text-sm p-2",
+    base: "inline-flex items-center rounded font-semibold text-sm",
     variants: {
       variant: {
-        default: "bg-gray-100 dark:bg-gray-800",
-        success: "bg-[#BBF7D0] text-[#14532D]",
-        pending: "bg-[#FFEDD5] text-[#4E1D0D]",
+        default: "bg-gray-100",
+        success: "bg-[#BBF7D0] text-[#14532D] dark:bg-[#031E0C] dark:text-[#4ADE80]",
+        pending: "bg-[#FFEDD5] text-[#4E1D0D] dark:bg-[#4E1D0D] dark:text-[#F1B37A]",
       },
       size: {
-        md: "px-1 ",
+        md: "px-3 py-1.5",
         lg: "px-2 py-1 text-base",
       },
     },

diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx
@@ -7,7 +7,7 @@ import { BackgroundImage } from "./BackgroundImage";
 export const Banner = createComponent(
   BackgroundImage,
   tv({
-    base: "bg-gray-200 dark:bg-gray-800",
+    base: "bg-gray-200",
     variants: {
       size: {
         md: "h-24 rounded-t-xl",

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -8,12 +8,13 @@ const button = tv({
   base: "inline-flex items-center justify-center font-semibold uppercase rounded-lg text-center transition-colors duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   variants: {
     variant: {
-      primary: "bg-black text-white hover:bg-blue-950",
-      inverted: "text-black border border-black hover:text-blue-500 hover:border-blue-500",
+      primary: "bg-black text-white hover:bg-blue-950 dark:bg-white dark:text-black dark:hover:bg-blue-100",
+      inverted:
+        "text-black border border-black hover:text-blue-500 hover:border-blue-500 dark:border-white dark:text-white",
       tertiary: "bg-blue-50 text-blue-500 border border-blue-500 hover:bg-blue-100",
       secondary: "bg-blue-500 text-white hover:bg-blue-600",
-      ghost: "hover:bg-gray-100 dark:hover:bg-gray-800",
-      outline: "border border-gray-200 hover:border-gray-300",
+      ghost: "hover:bg-gray-100 dark:invert",
+      outline: "border border-gray-200 hover:border-gray-300 dark:text-white dark:border-white",
       disabled: "border border-gray-200 bg-gray-50 text-gray-200 cursor-not-allowed",
       none: "",
     },