feat: add more toggle variant

guildxyz · Jul 30, 2024 · 0770152 · 0770152
1 parent 6850003
commit 0770152
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 19 deletions.
diff --git a/src/app/explorer/_components/GuildSearchBar.tsx b/src/app/explorer/_components/GuildSearchBar.tsx
@@ -52,7 +52,7 @@ export const GuildSearchBar = () => {
         type="single"
         className="self-start sm:h-12 sm:rounded-r-xl sm:border sm:border-border-muted sm:border-l-0 sm:bg-card sm:px-4"
         size="sm"
-        variant="default"
+        variant="secondary"
         onValueChange={(value) => value && setOrder(value as Order)}
         value={order}
       >

diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
@@ -39,7 +39,7 @@ const Nav = () => {
       type="single"
       className="gap-2"
       size={isSearchStuck ? "sm" : "lg"}
-      variant={isNavStuck ? "default" : "mono"}
+      variant={isNavStuck ? "secondary" : "mono"}
       onValueChange={(value) => value && setActiveSection(value as ActiveSection)}
       value={activeSection}
     >

diff --git a/src/v2/components/ThemeToggle.tsx b/src/v2/components/ThemeToggle.tsx
@@ -18,6 +18,8 @@ export function ThemeToggle() {
 
   return (
     <ToggleGroup
+      size="icon"
+      variant="primary-ghost"
       type="single"
       value={chakraColorMode || theme}
       onValueChange={(selected) => {
@@ -31,26 +33,16 @@ export function ThemeToggle() {
       <ToggleGroupItem
         value="light"
         aria-label="Toggle light mode"
-        size="icon"
-        variant="primary"
         className="size-8"
       >
         <Sun weight="bold" />
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="dark"
-        aria-label="Toggle dark mode"
-        size="icon"
-        variant="primary"
-        className="size-8"
-      >
+      <ToggleGroupItem value="dark" aria-label="Toggle dark mode" className="size-8">
         <Moon weight="bold" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="system"
         aria-label="Toggle system default"
-        size="icon"
-        variant="primary"
         className="size-8"
       >
         <Desktop weight="bold" />

diff --git a/src/v2/components/ui/Toggle.tsx b/src/v2/components/ui/Toggle.tsx
@@ -10,24 +10,26 @@ const toggleVariants = cva(
   {
     variants: {
       variant: {
-        default:
+        secondary:
           "text-secondary-foreground hover:bg-secondary data-[state=on]:bg-secondary active:bg-secondary-hover",
         primary:
+          "hover:bg-secondary-hover active:bg-secondary-active data-[state=on]:bg-primary data-[state=on]:text-primary-foreground bg-secondary text-secondary-foreground",
+        "primary-ghost":
           "bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
         mono: "text-white hover:bg-white/10 data-[state=on]:bg-white/15 hover:text-white data-[state=on]:text-white",
         outline:
           "border border-input bg-transparent hover:bg-accent/50 hover:text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3",
         sm: "h-8 px-2.5",
+        md: "h-10 px-3",
         lg: "h-11 px-5 font-semibold text-base",
         icon: "size-9",
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: "secondary",
+      size: "md",
     },
   }
 )

diff --git a/src/v2/components/ui/ToggleGroup.tsx b/src/v2/components/ui/ToggleGroup.tsx
@@ -13,8 +13,8 @@ import {
 } from "react"
 
 const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
-  size: "default",
-  variant: "default",
+  size: "md",
+  variant: "secondary",
 })
 
 const ToggleGroup = forwardRef<