fix: updated buttons to rounded

FrontendFreaks · Oct 19, 2023 · c7b3126 · c7b3126
1 parent d9e38c6
commit c7b3126
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 17 deletions.
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
@@ -35,11 +35,11 @@ export default function Home() {
             <Link
               href="https://discord.com/invite/vee94km4Wh"
               target="_blank"
-              className={cn(buttonVariants({ variant: "outline" }))}
+              className={cn(buttonVariants({ variant: "outlineRounded" }))}
             >
-              Join Discord Community
+              Join Community
             </Link>
-            <Link href="/batch" className={cn(buttonVariants())}>
+            <Link href="/batch" className={cn(buttonVariants({ variant: "rounded" }))}>
               Get Started
             </Link>
           </div>

diff --git a/components/layout/site-footer.tsx b/components/layout/site-footer.tsx
@@ -29,9 +29,9 @@ export default function SiteFooter({}: Props) {
           <Link
               href="https://discord.com/invite/vee94km4Wh"
               target="_blank"
-              className={`${cn(buttonVariants()) } md:flex md:min-w-fit`}
+              className={`${cn(buttonVariants({ variant: "rounded" })) } md:flex md:min-w-fit`}
             >
-              Join Discord Community
+              Join Community
             </Link>
           <a
             href="/batch/build/react/fundamentals"

diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
@@ -14,18 +14,13 @@ export default function SiteHeader({}: Props) {
       <div className="container flex h-14 items-center md:gap-6 gap-9 md:px-8 px-0">
         <MainNav items={navConfig} />
         <ModeToggle />
-        {/* <a href="https://discord.com/invite/vee94km4Wh" target="_blank">
-          <Button className="hidden md:flex md:min-w-fit rounded-full">
-          Join Discord Community
-          </Button>
-          
-        </a> */}
+
          <Link
               href="https://discord.com/invite/vee94km4Wh"
               target="_blank"
-              className={`${cn(buttonVariants()) } hidden w-0 md:flex md:min-w-fit`}
+              className={`${cn(buttonVariants({ variant: "rounded" })) } hidden w-0 md:flex md:min-w-fit`}
             >
-              Join Discord Community
+              Join Community
             </Link>
       </div>
     </header>

diff --git a/components/tracks.tsx b/components/tracks.tsx
@@ -33,7 +33,7 @@ export default function Tracks({}: Props) {
           </div>
           <Link
             href="/batch/learn/html/basic"
-            className={cn(buttonVariants(), "px-8 py-2 mt-4")}
+            className={cn(buttonVariants({ variant: "rounded" }), "px-8 py-2 mt-4")}
           >
             Join
           </Link>
@@ -55,7 +55,7 @@ export default function Tracks({}: Props) {
           </div>
           <Link
             href="/batch/dsa/loops"
-            className={cn(buttonVariants(), "px-8 py-2 mt-4")}
+            className={cn(buttonVariants({ variant: "rounded" }), "px-8 py-2 mt-4")}
           >
             Join
           </Link>
@@ -77,7 +77,7 @@ export default function Tracks({}: Props) {
           </div>
           <Link
             href="/batch/build/react/fundamentals"
-            className={cn(buttonVariants(), "px-8 py-2 mt-4")}
+            className={cn(buttonVariants({ variant: "rounded" }), "px-8 py-2 mt-4")}
           >
             Join
           </Link>
@@ -99,7 +99,7 @@ export default function Tracks({}: Props) {
           </div>
           <Link
             href="/batch/hire/hire"
-            className={cn(buttonVariants(), "px-8 py-2 mt-4")}
+            className={cn(buttonVariants({ variant: "rounded" }), "px-8 py-2 mt-4")}
           >
             Join
           </Link>

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -12,8 +12,11 @@ const buttonVariants = cva(
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+         rounded: "bg-primary text-primary-foreground hover:bg-primary/90 rounded-full",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          outlineRounded:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-full",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",