Merge pull request #172 from privacy-scaling-explorations/feat/update…

…-hover-style

feat: update hover style base on figma design

src/components/ConnectButton.tsx

@@ -47,7 +47,7 @@ export const ConnectButton = () => {
                   <Button
                     suppressHydrationWarning
                     onClick={openConnectModal}
-                    className="rounded-md bg-black px-5 py-2 uppercase text-white"
+                    variant="primary"
                   >
                     {isMobile ? "Connect" : "Connect wallet"}
                   </Button>

src/components/EligibilityDialog.tsx

@@ -43,7 +43,7 @@ export const EligibilityDialog = () => {
               <p>Please submit your ballot by X date!</p>
             </div>
           }
-          button="primary"
+          button="secondary"
           buttonName="See all projects"
           buttonAction={() => router.push("/projects")}
         />
@@ -68,7 +68,7 @@ export const EligibilityDialog = () => {
               </p>
             </div>
           }
-          button="primary"
+          button="secondary"
           buttonName="Join voting round"
           buttonAction={handleSignup}
         />
@@ -80,7 +80,7 @@ export const EligibilityDialog = () => {
           onOpenChange={() => setOpenDialog(false)}
           title="Sorry, this account does not have the credentials to be verified."
           description="To participate in this round, you must be in the voter's registry. Contact the round organizers to get access as a voter."
-          button="primary"
+          button="secondary"
           buttonName="Disconnect"
           buttonAction={() => disconnect()}
         />

src/components/Header.tsx

@@ -18,7 +18,7 @@ const NavLink = ({
 }: { isActive: boolean } & ComponentPropsWithRef<typeof Link>) => (
   <Link
     className={clsx(
-      "flex h-full items-center p-4 font-sans",
+      "flex h-full items-center p-4 font-sans hover:font-extrabold",
       isActive && "border-b-2 border-blue-400",
     )}
     {...props}

src/components/JoinButton.tsx

@@ -2,7 +2,7 @@ import { toast } from "sonner";
 import { useCallback } from "react";
 
 import { useMaci } from "~/contexts/Maci";
-import { Chip } from "./ui/Chip";
+import { Button } from "./ui/Button";
 import { getAppState } from "~/utils/state";
 import { EAppState } from "~/utils/types";
 
@@ -16,39 +16,43 @@ export const JoinButton = () => {
     [onSignup, onError],
   );
 
+  const applyApplication = () => {};
+
+  const viewResults = () => {};
+
   return (
     <div>
       {appState === EAppState.VOTING && !isEligibleToVote && (
-        <Chip color="disabled">You are not allowed to vote</Chip>
+        <Button variant="disabled">You are not allowed to vote</Button>
       )}
 
       {appState === EAppState.VOTING && isEligibleToVote && !isRegistered && (
-        <Chip
-          color={
+        <Button
+          variant={
             isRegistered === undefined || isLoading ? "disabled" : "primary"
           }
           onClick={handleSignup}
         >
           Voter sign up
-        </Chip>
+        </Button>
       )}
 
       {appState === EAppState.APPLICATION && (
-        <Chip color="secondary" onClick={applyApplication}>
+        <Button variant="secondary" onClick={applyApplication}>
           Project sign up
-        </Chip>
+        </Button>
       )}
 
       {appState === EAppState.TALLYING && (
-        <Chip color="disabled">
+        <Button variant="disabled">
           Voting round is over, the result is tallying.
-        </Chip>
+        </Button>
       )}
 
       {appState === EAppState.RESULTS && (
-        <Chip color="primary" onClick={viewResults}>
+        <Button variant="primary" onClick={viewResults}>
           View results
-        </Chip>
+        </Button>
       )}
     </div>
   );

src/components/SortByDropdown.tsx

@@ -20,7 +20,7 @@ export const SortByDropdown = ({ value, onChange, options = [] }: Props) => {
           icon={ArrowUpDown}
           variant="outline"
           aria-label="Sort by"
-          className="w-48 justify-start"
+          className="my-0 w-48"
         >
           Sort by: {value && sortLabels[value]}
         </IconButton>

src/components/ui/Button.tsx

@@ -3,30 +3,34 @@ import { createComponent } from ".";
 import { type ComponentPropsWithRef, createElement, forwardRef } from "react";
 
 const button = tv({
-  base: "inline-flex items-center justify-center font-semibold text-center transition-colors rounded-full duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:ring-offset-gray-800",
+  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 w-full uppercase rounded-lg hover:bg-gray-400",
+      primary: "bg-black text-white hover:bg-blue-950",
+      inverted:
+        "text-black border border-black hover:text-blue-500 hover:border-blue-500",
+      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",
-      default:
-        "bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700",
-      inverted: "bg-white text-black hover:bg-white/90",
-      link: "bg-none hover:underline",
-      outline: "border-2 hover:bg-white/5",
+      outline: "border border-gray-200 hover:border-gray-300",
+      disabled:
+        "border border-gray-200 bg-gray-50 text-gray-200 cursor-not-allowed",
+      none: "",
     },
     size: {
-      sm: "px-3 py-2 h-10 min-w-[40px]",
-      deafult: "px-4 py-2 h-12",
+      sm: "px-3 py-2 h-8 text-xs rounded-md",
+      default: "px-4 py-2 h-10 w-full",
+      auto: "px-4 py-2 h-10 w-auto",
       icon: "h-12 w-12",
     },
     disabled: {
       true: "text-gray-400 pointer-events-none pointer-default opacity-50 border-none",
     },
   },
   defaultVariants: {
-    variant: "default",
-    size: "deafult",
+    variant: "none",
+    size: "default",
   },
 });
 

src/components/ui/Dialog.tsx

@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
 import { X } from "lucide-react";
 import clsx from "clsx";
 
-import { IconButton } from "./Button";
+import { IconButton, Button } from "./Button";
 import { createComponent } from ".";
 import { theme } from "~/config";
 import { Spinner } from "./Spinner";
@@ -38,7 +38,7 @@ export const Dialog = ({
         {/* Because of Portal we need to set the theme here */}
         <div className={theme.colorMode}>
           <Content size={size}>
-            <RadixDialog.Title className="mb-6 text-2xl font-bold uppercase">
+            <RadixDialog.Title className="text-2xl font-bold uppercase">
               {title}
             </RadixDialog.Title>
             <RadixDialog.Description className="text-gray-400">
@@ -47,15 +47,9 @@ export const Dialog = ({
             {children}
             {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",
-                  button === "primary" ? "bg-blue-500" : "bg-blue-50",
-                )}
-                onClick={buttonAction}
-              >
+              <Button variant={button} onClick={buttonAction} size="auto">
                 {buttonName}
-              </button>
+              </Button>
             )}
             {onOpenChange ? (
               <RadixDialog.Close asChild>
@@ -75,7 +69,7 @@ export const Dialog = ({
 const Content = createComponent(
   RadixDialog.Content,
   tv({
-    base: "z-20 fixed bottom-0 rounded-md bg-white p-12 flex flex-col justify-center items-center text-center w-full font-sans sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
+    base: "z-20 fixed bottom-0 rounded-md bg-white p-12 flex flex-col justify-center gap-4 items-center text-center w-full font-sans sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
     variants: {
       size: {
         sm: "sm:w-[456px] md:w-[456px]",

src/components/ui/Link.tsx

@@ -9,7 +9,7 @@ import { ExternalLinkIcon } from "lucide-react";
 export const Link = createComponent(
   NextLink,
   tv({
-    base: "font-semibold underline-offset-2 hover:underline text-secondary-600",
+    base: "flex items-center gap-1 text-blue-400 hover:underline",
   }),
 );
 

src/components/ui/Tag.tsx

@@ -4,18 +4,18 @@ import { createComponent } from ".";
 export const Tag = createComponent(
   "div",
   tv({
-    base: "cursor-pointer inline-flex items-center border border-blue-400 justify-center gap-2 text-blue-400 whitespace-nowrap transition dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
+    base: "cursor-pointer inline-flex items-center border border-blue-400 justify-center gap-2 text-blue-400 whitespace-nowrap transition hover:bg-blue-50",
     variants: {
       size: {
         sm: "rounded py-1 px-2 text-xs",
         md: "rounded-lg py-1.5 px-3 text-sm",
         lg: "rounded-xl py-2 px-4 text-lg",
       },
       selected: {
-        true: "border-gray-900 dark:border-gray-300",
+        true: "bg-blue-400 text-white",
       },
       disabled: {
-        true: "opacity-50 cursor-not-allowed",
+        true: "border-gray-200 text-gray-200 cursor-not-allowed",
       },
     },
     defaultVariants: {

src/features/ballot/components/AllocationList.tsx

@@ -83,7 +83,7 @@ export function AllocationFormWrapper({
                 <IconButton
                   tabIndex={-1}
                   type="button"
-                  variant="ghost"
+                  variant="none"
                   icon={HiOutlineTrash}
                   disabled={disabled}
                   onClick={() => {

src/features/projects/components/ProjectContacts.tsx

@@ -1,7 +1,7 @@
 import { FaXTwitter } from "react-icons/fa6";
 import { FaGithub, FaEthereum } from "react-icons/fa";
 import { RiGlobalLine } from "react-icons/ri";
-import Link from "next/link";
+import { Link } from "~/components/ui/Link";
 
 export const ProjectContacts = ({
   author,
@@ -17,41 +17,25 @@ export const ProjectContacts = ({
   return (
     <div className="my-8 grid w-full grid-cols-1 gap-4 border-y border-gray-200 px-2 py-4 text-blue-400 xl:grid-cols-2">
       {author && (
-        <Link
-          href={`https://etherscan.io/address/${author}`}
-          target="_blank"
-          className="flex items-center gap-2"
-        >
+        <Link href={`https://etherscan.io/address/${author}`} target="_blank">
           <FaEthereum />
           {author}
         </Link>
       )}
       {twitter && (
-        <Link
-          href={`https://x.com`}
-          target="_blank"
-          className="flex items-center gap-2"
-        >
+        <Link href={`https://x.com`} target="_blank">
           <FaXTwitter />
           x.com
         </Link>
       )}
       {website && (
-        <Link
-          href={website}
-          target="_blank"
-          className="flex items-center gap-2"
-        >
+        <Link href={website} target="_blank">
           <RiGlobalLine />
           {website}
         </Link>
       )}
       {github && (
-        <Link
-          href={`https://github.com`}
-          target="_blank"
-          className="flex items-center gap-2"
-        >
+        <Link href={`https://github.com`} target="_blank">
           <FaGithub />
           {github}
         </Link>

src/features/projects/components/ProjectDescriptionSection.tsx

@@ -1,6 +1,6 @@
 import { FaGithub, FaEthereum } from "react-icons/fa";
 import { RiGlobalLine } from "react-icons/ri";
-import Link from "next/link";
+import { Link } from "~/components/ui/Link";
 
 import {
   type ImpactMetrix,
@@ -30,11 +30,7 @@ export const ProjectDescriptionSection = ({
         <div className="border-l border-gray-200 px-4">
           <p className="text-sm uppercase text-gray-800">{title} links</p>
           {links.map((link) => (
-            <Link
-              href={link.url}
-              target="_blank"
-              className="flex items-center gap-1 text-blue-400"
-            >
+            <Link href={link.url} target="_blank">
               {link.type && link.type === EContributionType.GITHUB_REPO && (
                 <FaGithub />
               )}

src/features/projects/components/ProjectItem.tsx

@@ -4,6 +4,7 @@ import { ProjectAvatar } from "./ProjectAvatar";
 import { ProjectBanner } from "./ProjectBanner";
 import { Heading } from "~/components/ui/Heading";
 import { Skeleton } from "~/components/ui/Skeleton";
+import { Button } from "~/components/ui/Button";
 import { useProjectMetadata } from "../hooks/useProjects";
 import { type Attestation } from "~/utils/fetchAttestations";
 import { ImpactCategories } from "./ImpactCategories";
@@ -26,13 +27,11 @@ export function ProjectItem({
 }) {
   const metadata = useProjectMetadata(attestation?.metadataPtr);
   const appState = getAppState();
-  const defaultButtonStyle =
-    "uppercase text-xs rounded-md border border-black p-1.5";
 
   return (
     <article
       data-testid={`project-${attestation.id}`}
-      className="group rounded-xl bg-white hover:border-primary-500 dark:border-gray-700 dark:hover:border-primary-500"
+      className="group rounded-xl bg-white shadow-lg hover:shadow-sm"
     >
       <div className="opacity-70 transition-opacity group-hover:opacity-100">
         <ProjectBanner profileId={attestation?.recipient} />
@@ -58,25 +57,20 @@ export function ProjectItem({
           <div className="flex justify-end pt-6">
             <Skeleton>
               {state === EProjectState.DEFAULT && (
-                <button onClick={action} className={defaultButtonStyle}>
+                <Button onClick={action} variant="inverted" size="sm">
                   Add to ballot
-                </button>
+                </Button>
               )}
               {state === EProjectState.ADDED && (
-                <button
-                  onClick={action}
-                  className={`${defaultButtonStyle} flex justify-center gap-1 bg-black text-white`}
-                >
+                <Button onClick={action} size="sm" variant="primary">
                   Added
                   <Image alt="" width="18" height="18" src="check-white.svg" />
-                </button>
+                </Button>
               )}
               {state === EProjectState.SUBMITTED && (
-                <button
-                  className={`${defaultButtonStyle} cursor-not-allowed bg-gray-200 text-white`}
-                >
+                <Button size="sm" variant="disabled">
                   Submitted
-                </button>
+                </Button>
               )}
             </Skeleton>
           </div>