feat(Button): new variants (#1384)

* feat(Button): rework variants * chore: update button variants * fix: use the new `destructive-subtle-foreground` CSS var * fix: use secondary buttons & define gap on the main `Button` component * fix(StickyBar): create guild button color scheme * default colorScheme to secondary * UI(NavMenu): logo whitespace --------- Co-authored-by: valid <[email protected]>
guildxyz · Jul 15, 2024 · 94a7b16 · 94a7b16
1 parent 2254532
commit 94a7b16
Show file tree

Hide file tree

Showing 26 changed files with 168 additions and 180 deletions.
diff --git a/src/app/explorer/_components/Explorer.tsx b/src/app/explorer/_components/Explorer.tsx
@@ -37,8 +37,8 @@ export const Explorer = ({ searchParams }: { searchParams: SearchParams }) => {
             <span>Sign in to view your guilds / create new ones</span>
           </div>
           <Button
-            className="space-x-2"
             onClick={() => setIsWalletSelectorModalOpen(true)}
+            colorScheme="primary"
           >
             <SignIn />
             <span className="text-md">Sign in</span>

diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { Anchor } from "@/components/ui/Anchor"
-import { Button, buttonVariants } from "@/components/ui/Button"
+import { buttonVariants } from "@/components/ui/Button"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
 import { cn } from "@/lib/utils"
 import { Plus } from "@phosphor-icons/react"

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -25,38 +25,52 @@
     --primary-hover: 243 75% 59%;
     --primary-active: 245 58% 51%;
     --primary-foreground: 0 0% 100%;
+    --primary-subtle: 230 94% 82%;
+    --primary-subtle-foreground: var(--primary);
 
     --secondary: 0, 0%, 0%, 0.06;
     --secondary-hover: 0, 0%, 0%, 0.08;
     --secondary-active: 0, 0%, 0%, 0.16;
     --secondary-foreground: 220.9 39.3% 11%;
+    --secondary-subtle: 240 5% 65%;
+    --secondary-subtle-foreground: var(--foreground);
 
-    --muted: 0 0% 100%;
-    --muted-foreground: 240 5% 56%;
-
-    --accent: 240 5% 96%;
-    --accent-foreground: 240 4% 16%;
-
-    --anchor-foreground: 221 83% 53%;
+    --info: 217 91 60%;
+    --info-hover: 221 83% 53%;
+    --info-active: 224 76% 48%;
+    --info-foreground: 0 0% 100%;
+    --info-subtle: 212 96% 78%;
+    --info-subtle-foreground: var(--info);
 
     --destructive: 0 84% 60%;
     --destructive-hover: 0 72% 51%;
     --destructive-active: 0 74% 42%;
     --destructive-foreground: 210 20% 98%;
-    --destructive-ghost-hover: 0, 96%, 89%, 0.16;
-    --destructive-ghost-active: 0, 96%, 89%, 0.24;
-    --destructive-ghost-foreground: 0 72% 51%;
+    --destructive-subtle: 0 94% 82%;
+    --destructive-subtle-foreground: var(--destructive);
 
     --success: 142 71% 45%;
     --success-hover: 142 76% 36%;
     --success-active: 142 72% 29%;
     --success-foreground: 0 0% 100%;
+    --success-subtle: 141 79% 85%;
+    --success-subtle-foreground: var(--success);
 
     --banner: 240 4% 16%;
 
+    --muted: 0 0% 100%;
+    --muted-foreground: 240 5% 56%;
+
+    --accent: 240 5% 96%;
+    --accent-foreground: 240 4% 16%;
+
+    --anchor-foreground: 221 83% 53%;
+
     --border: 240 5.9% 90%;
     --border-muted: 240 3% 93%;
+
     --input: var(--border);
+
     --ring: 240, 0%, 45%, 25%;
 
     --toast-success: 137 64% 98%;
@@ -70,7 +84,6 @@
     --alert-info-icon: 217 91% 60%; /* TODO: --info-... CSS variables */
     --alert-warning: var(--toast-warning);
     --alert-warning-icon: 27 96% 61%;
-    /* TODO: should we call it error or destructive? */
     --alert-error: var(--toast-error);
     --alert-error-icon: 0 84% 60%;
 
@@ -124,42 +137,56 @@
     --tooltip: 240 5% 84%;
     --tooltip-foreground: 240 4% 16%;
 
-    --primary: 238.73 70% 63%;
+    --primary: 239 84% 67%;
     --primary-hover: 234 89% 74%;
     --primary-active: 230 94% 82%;
     --primary-foreground: 0 0% 100%;
+    --primary-subtle: 230 94% 82%;
+    --primary-subtle-foreground: var(--primary-subtle);
 
     --secondary: 0, 0%, 100%, 0.08;
     --secondary-hover: 0, 0%, 100%, 0.16;
     --secondary-active: 0, 0%, 100%, 0.24;
     --secondary-foreground: 0 0% 100%;
+    --secondary-subtle: 240 6% 90%;
+    --secondary-subtle-foreground: var(--foreground);
 
-    --muted: 240 3% 13%;
-    --muted-foreground: 240 5% 60%;
-
-    --accent: 240 2% 35%;
-    --accent-foreground: 0 0% 92%;
-
-    --anchor-foreground: 213 94% 68%;
+    --info: 217 91 60%;
+    --info-hover: 213 94% 68%;
+    --info-active: 212 96% 78%;
+    --info-foreground: 0 0% 100%;
+    --info-subtle: 212 96% 78%;
+    --info-subtle-foreground: var(--info-subtle);
 
     --destructive: 0 84% 60%;
     --destructive-hover: 0 91% 71%;
     --destructive-active: 0 94% 82%;
     --destructive-foreground: 210 20% 98%;
-    --destructive-ghost-hover: 0, 96%, 89%, 0.16;
-    --destructive-ghost-active: 0, 96%, 89%, 0.24;
-    --destructive-ghost-foreground: 0 96% 89%;
+    --destructive-subtle: 0 94% 82%;
+    --destructive-subtle-foreground: var(--destructive-subtle);
 
     --success: 142 71% 45%;
     --success-hover: 142 69% 58%;
     --success-active: 142 77% 73%;
     --success-foreground: 0 0% 100%;
+    --success-subtle: 141 79% 85%;
+    --success-subtle-foreground: var(--success-subtle);
 
     --banner: 240 3% 22%;
 
+    --muted: 240 3% 13%;
+    --muted-foreground: 240 5% 60%;
+
+    --accent: 240 2% 35%;
+    --accent-foreground: 0 0% 92%;
+
+    --anchor-foreground: 213 94% 68%;
+
     --border: 240 3% 38%;
     --border-muted: 240 3% 28%;
+
     --input: var(--border);
+
     --ring: 240 0% 45%;
 
     --toast-success: 180 4% 35%;
@@ -174,7 +201,7 @@
     --alert-warning: var(--toast-warning);
     --alert-warning-icon: 32 98% 83%;
     --alert-error: var(--toast-error);
-    --alert-error-icon: 0 96% 89%;
+    --alert-error-icon: 0 94% 82%;
 
     --discord-hover: 234 89% 74%;
     --discord-active: 230 94% 82%;

diff --git a/src/components/[guild]/Requirements/components/ConnectRequirementPlatformButton.tsx b/src/components/[guild]/Requirements/components/ConnectRequirementPlatformButton.tsx
@@ -21,7 +21,7 @@ function requirementTypeToPlatformName(type: RequirementType): PlatformName {
   return REQUIREMENTS[type].types[0].split("_")[0] as PlatformName
 }
 
-const RequirementConnectButton = ({ className, ...props }: ButtonProps) => {
+const RequirementConnectButton = (props: ButtonProps) => {
   const { platformUsers, emails, farcasterProfiles } = useUser()
   const { type, roleId, id } = useRequirementContext()
   const platform = requirementTypeToPlatformName(type)
@@ -68,7 +68,6 @@ const RequirementConnectButton = ({ className, ...props }: ButtonProps) => {
     <ButtonComponent
       isReconnection={isReconnection}
       onSuccess={onSuccess}
-      className={cn("gap-1", className)}
       size="xs"
       // TODO: find a better solution for handling the icon
       {...(platform === "EMAIL" || platform === "FARCASTER"

diff --git a/src/v2/components/Account/Account.tsx b/src/v2/components/Account/Account.tsx
@@ -32,7 +32,7 @@ export const Account = () => {
     return (
       <Card>
         <Button variant="ghost" onClick={() => setIsWalletSelectorModalOpen(true)}>
-          <SignIn weight="bold" className="mr-1" />
+          <SignIn weight="bold" />
           Sign in
         </Button>
       </Card>

diff --git a/src/v2/components/Account/components/AccountModal/components/DisconnectAccountButton.tsx b/src/v2/components/Account/components/AccountModal/components/DisconnectAccountButton.tsx
@@ -40,7 +40,8 @@ const DisconnectAccountButton = ({
         <TooltipTrigger asChild>
           <Button
             className={cn("size-8 rounded-full px-0", className)}
-            variant="destructive-ghost"
+            colorScheme="destructive"
+            variant="ghost"
             aria-label="Disconnect account"
             onClick={onOpen}
           >
@@ -65,7 +66,7 @@ const DisconnectAccountButton = ({
           <AlertDialogCancel onClick={onClose}>Cancel</AlertDialogCancel>
           <AlertDialogAction asChild>
             <Button
-              variant="destructive"
+              colorScheme="destructive"
               onClick={onConfirm}
               isLoading={isLoading}
               loadingText={loadingText}

diff --git a/src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx b/src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx
@@ -218,7 +218,7 @@ const ConnectEmailButton = ({
                     <p className="text-center">
                       {`Enter the code we've sent to ${email} `}
                       <Button
-                        variant="secondary"
+                        variant="ghost"
                         className="relative top-0.5 size-5 rounded-full"
                         size="icon"
                         aria-label="Use different email address"
@@ -296,7 +296,7 @@ const ConnectEmailButton = ({
                 <Button
                   onClick={submit}
                   isLoading={verificationRequest.isLoading}
-                  variant="success"
+                  colorScheme="success"
                   className="w-full"
                 >
                   Send code
@@ -309,7 +309,7 @@ const ConnectEmailButton = ({
 
       <Button
         onClick={onOpen}
-        variant={emails?.pending ? "secondary" : "default"}
+        colorScheme={emails?.pending ? "secondary" : "primary"}
         size="sm"
         disabled={!!emails?.emailAddress && !emails?.pending}
         className={cn(

diff --git a/src/v2/components/Account/components/AccountModal/components/FarcasterProfile.tsx b/src/v2/components/Account/components/AccountModal/components/FarcasterProfile.tsx
@@ -192,7 +192,7 @@ const ConnectFarcasterButton = ({
         size="sm"
         disabled={farcasterProfiles?.length > 0}
         isLoading={signedKeyRequest.isLoading}
-        className="ml-auto bg-farcaster hover:bg-farcaster-hover active:bg-farcaster-active"
+        className="ml-auto bg-farcaster text-white hover:bg-farcaster-hover active:bg-farcaster-active"
         {...props}
       >
         Connect
@@ -306,7 +306,7 @@ const ConnectFarcasterButton = ({
                 target="_blank"
                 className={cn(
                   buttonVariants(),
-                  "w-full bg-farcaster hover:bg-farcaster-hover active:bg-farcaster-active"
+                  "w-full bg-farcaster text-white hover:bg-farcaster-hover active:bg-farcaster-active"
                 )}
               >
                 Connect Farcaster

diff --git a/src/v2/components/Account/components/AccountModal/components/LinkAddressButton.tsx b/src/v2/components/Account/components/AccountModal/components/LinkAddressButton.tsx
@@ -19,7 +19,6 @@ const LinkAddressButton = (props: ButtonProps) => {
   return (
     <Button
       size="sm"
-      variant="secondary"
       onClick={() => {
         setAddressLinkParams({ userId: id, address })
         disconnect()
@@ -28,7 +27,7 @@ const LinkAddressButton = (props: ButtonProps) => {
       loadingText="Check your wallet"
       {...props}
     >
-      <Plus className="mr-1.5" weight="bold" />
+      <Plus weight="bold" />
       Link address
     </Button>
   )

diff --git a/src/v2/components/Account/components/AccountModal/components/LinkDelegateVaultButton.tsx b/src/v2/components/Account/components/AccountModal/components/LinkDelegateVaultButton.tsx
@@ -13,7 +13,6 @@ const LinkDelegateVaultButton = ({
   return (
     <Button
       size="sm"
-      variant="secondary"
       onClick={() => {
         linkDelegations.onSubmit()
       }}
@@ -25,7 +24,6 @@ const LinkDelegateVaultButton = ({
         height={15}
         alt="Delegate.cash logo"
         src="/walletLogos/delegatecash.png"
-        className="mr-1.5"
       />
       Link {vaults.length > 1 ? vaults.length : ""} vault
       {vaults.length > 1 ? "s" : ""}

diff --git a/src/v2/components/Account/components/AccountModal/components/LinkedAddress.tsx b/src/v2/components/Account/components/AccountModal/components/LinkedAddress.tsx
@@ -139,7 +139,7 @@ const LinkedAddress = ({ addressData }: Props) => {
             )}
             <DropdownMenuItem
               onClick={onOpen}
-              className="text-destructive-ghost-foreground"
+              className="text-destructive-subtle-foreground"
             >
               <LinkBreak weight="bold" className="mr-1.5" />
               Disconnect
@@ -165,7 +165,7 @@ const LinkedAddress = ({ addressData }: Props) => {
             <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction asChild>
               <Button
-                variant="destructive"
+                colorScheme="destructive"
                 onClick={removeAddress}
                 isLoading={isDisconnectLoading}
                 loadingText={disconnectSignLoadingText || "Removing"}

diff --git a/src/v2/components/Account/components/AccountModal/components/SharedSocials.tsx b/src/v2/components/Account/components/AccountModal/components/SharedSocials.tsx
@@ -56,7 +56,7 @@ const SharedSocials = () => {
       <DialogTrigger asChild>
         {!guildSharedSocial ? (
           <Button {...buttonProps}>
-            <Shield weight="bold" className="mr-1" />
+            <Shield weight="bold" />
             {`Shared with ${pluralize(
               sharedSocials?.filter(
                 (sharedSocial) => sharedSocial.isShared !== false
@@ -66,12 +66,12 @@ const SharedSocials = () => {
           </Button>
         ) : guildSharedSocial.isShared !== false ? (
           <Button {...buttonProps}>
-            <ShieldCheck weight="bold" className="mr-1 text-primary" />
+            <ShieldCheck weight="bold" className="text-primary" />
             Shared with guild
           </Button>
         ) : (
           <Button {...buttonProps}>
-            <Shield weight="bold" className="mr-1" />
+            <Shield weight="bold" />
             Hidden to guild
           </Button>
         )}
@@ -177,7 +177,7 @@ const ShareSocialsWithGuildSelect = ({
           <Button
             variant="ghost"
             size="sm"
-            className={cn("ml-auto gap-1.5", {
+            className={cn("ml-auto", {
               "text-success": isSharedBoolean,
             })}
           >

diff --git a/src/v2/components/Account/components/AccountModal/components/SocialAccount.tsx b/src/v2/components/Account/components/AccountModal/components/SocialAccount.tsx
@@ -147,14 +147,14 @@ const ConnectPlatformButton = ({
       onClick={onConnect}
       isLoading={isLoading}
       disabled={!!response}
-      variant={isReconnect ? "secondary" : "default"}
+      colorScheme={isReconnect ? "secondary" : "primary"}
       size="sm"
       className={cn("ml-auto", PLATFORM_COLORS[type])}
     >
       {isReconnect && (
         <Warning
           weight="bold"
-          className="mr-1 text-orange-400 data-[theme=dark]:text-orange-200"
+          className="text-orange-400 data-[theme=dark]:text-orange-200"
         />
       )}
       {isReconnect ? "Reconnect" : "Connect"}

diff --git a/src/v2/components/Account/components/NetworkModal/NetworkButton.tsx b/src/v2/components/Account/components/NetworkModal/NetworkButton.tsx
@@ -28,8 +28,7 @@ const NetworkButton = ({ chain, requestNetworkChange }: Props) => {
             disabled={isCurrentChain || CHAIN_CONFIG[chain].deprecated}
             onClick={requestNetworkChange}
             size="xl"
-            variant="secondary"
-            className={cn("w-full justify-start gap-2", {
+            className={cn("w-full justify-start", {
               "border-2": isCurrentChain,
             })}
           >

diff --git a/src/v2/components/Account/components/Notification/Web3Inbox.tsx b/src/v2/components/Account/components/Notification/Web3Inbox.tsx
@@ -148,7 +148,11 @@ const Web3Inbox = () => {
                 variant="silent"
                 href={message.url}
                 className={cn(
-                  buttonVariants({ variant: "ghost", size: "sm" }),
+                  buttonVariants({
+                    variant: "ghost",
+                    colorScheme: "primary",
+                    size: "sm",
+                  }),
                   "gap-2"
                 )}
               >
@@ -233,7 +237,7 @@ const SubscribeToMessages = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button className="size-8 min-w-8 px-0">
+        <Button className="size-8 min-w-8 px-0" colorScheme="primary">
           <ArrowRight />
         </Button>
       </DialogTrigger>
@@ -250,6 +254,7 @@ const SubscribeToMessages = () => {
           onClick={performSubscribe}
           isLoading={isSigning || isRegistering || isSubscribing}
           loadingText={isSigning ? "Check your wallet" : "Subscribing"}
+          colorScheme="primary"
           className="w-full"
         >
           Sign to subscribe