From e42ff9232bcafcbb305480d81764d5190e2b095f Mon Sep 17 00:00:00 2001 From: KushPatel-18 Date: Sat, 11 Jul 2026 07:43:53 +0000 Subject: [PATCH 1/4] Implemented Tab button variants --- client/src/components/ui/button.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index 260661b..0f24723 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -18,6 +18,15 @@ const buttonVariants = cva( "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", + // Tab variants + primary: + "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-300 bg-amber-300 text-gray-900", + secondary: + "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-200 bg-white text-gray-700 hover:border-amber-300 hover:bg-amber-50", + primaryFilter: + "rounded-full border border-amber-200 bg-white text-gray-400 hover:border-amber-300 hover:bg-amber-50", + secondaryFilter: + "h-10 w-10 px-1 py-1 rounded-full border border-amber-300 bg-amber-300 text-gray-900", }, size: { default: "h-10 px-4 py-2", From cb88aaaab7fa0ed7a0ca62ef6bcc64f734658eb4 Mon Sep 17 00:00:00 2001 From: KushPatel-18 Date: Sat, 11 Jul 2026 07:44:48 +0000 Subject: [PATCH 2/4] Implemented Pagination Button Variants --- client/src/components/ui/button.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index 0f24723..b45a557 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -23,6 +23,14 @@ const buttonVariants = cva( "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-300 bg-amber-300 text-gray-900", secondary: "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-200 bg-white text-gray-700 hover:border-amber-300 hover:bg-amber-50", + + // Pagination Variants + paginationActive: "border border-fuchsia-600 bg-fuchsia-600 text-white", + paginationInactive: + "border border-fuchsia-200 text-gray-600 hover:border-fuchsia-300 hover:bg-fuchsia-100", + paginationEndpoint: + "border border-gray-200 text-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40", + primaryFilter: "rounded-full border border-amber-200 bg-white text-gray-400 hover:border-amber-300 hover:bg-amber-50", secondaryFilter: From 909f1853f0485091f800b38f049c459424f2ad7c Mon Sep 17 00:00:00 2001 From: KushPatel-18 Date: Sat, 11 Jul 2026 07:48:47 +0000 Subject: [PATCH 3/4] Implemented CTA button variant and size for tab and pagination --- client/src/components/ui/button.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index b45a557..a87d1da 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"; const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { variants: { variant: { @@ -14,15 +15,18 @@ const buttonVariants = cva( "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", + // Tab variants primary: "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-300 bg-amber-300 text-gray-900", secondary: "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-200 bg-white text-gray-700 hover:border-amber-300 hover:bg-amber-50", + primaryFilter: + "rounded-full border border-amber-200 bg-white text-gray-400 hover:border-amber-300 hover:bg-amber-50", + secondaryFilter: + "h-10 w-10 px-1 py-1 rounded-full border border-amber-300 bg-amber-300 text-gray-900", // Pagination Variants paginationActive: "border border-fuchsia-600 bg-fuchsia-600 text-white", @@ -31,16 +35,17 @@ const buttonVariants = cva( paginationEndpoint: "border border-gray-200 text-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40", - primaryFilter: - "rounded-full border border-amber-200 bg-white text-gray-400 hover:border-amber-300 hover:bg-amber-50", - secondaryFilter: - "h-10 w-10 px-1 py-1 rounded-full border border-amber-300 bg-amber-300 text-gray-900", + // Call to Action (CTA) Variant + cta: "rounded-full px-5 py-2 border border-accent border-fuchsia-600 bg-fuchsia-600 text-white font-bold opacity-70 hover:opacity-100 transition-opacity duration-200 ease-in-out", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", + tab: "h-10 w-10", + pagination: "h-8 w-8", + inline: "h-auto w-auto p-0", }, }, defaultVariants: { From d89fd91d3249849d16b348421095dd1a09ca0b76 Mon Sep 17 00:00:00 2001 From: KushPatel-18 Date: Sat, 18 Jul 2026 07:14:28 +0000 Subject: [PATCH 4/4] Updated colours based on tailwind config --- client/src/components/ui/button.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index a87d1da..16fbd1d 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -20,23 +20,22 @@ const buttonVariants = cva( // Tab variants primary: - "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-300 bg-amber-300 text-gray-900", + "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-primary bg-primary text-gray-900", secondary: - "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-amber-200 bg-white text-gray-700 hover:border-amber-300 hover:bg-amber-50", - primaryFilter: - "rounded-full border border-amber-200 bg-white text-gray-400 hover:border-amber-300 hover:bg-amber-50", + "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-secondary bg-white text-gray-700 hover:border-primary hover:bg-secondary", + primaryFilter: "rounded-full border border-primary bg-primary", secondaryFilter: - "h-10 w-10 px-1 py-1 rounded-full border border-amber-300 bg-amber-300 text-gray-900", + "h-10 w-10 px-1 py-1 rounded-full border border-secondary bg-white hover:bg-secondary hover:border-primary text-gray-900", // Pagination Variants - paginationActive: "border border-fuchsia-600 bg-fuchsia-600 text-white", + paginationActive: "border border-accent bg-accent text-white", paginationInactive: - "border border-fuchsia-200 text-gray-600 hover:border-fuchsia-300 hover:bg-fuchsia-100", + "border border-accent/15 text-gray-600 hover:border-accent hover:accent hover:bg-accent/10", paginationEndpoint: "border border-gray-200 text-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40", // Call to Action (CTA) Variant - cta: "rounded-full px-5 py-2 border border-accent border-fuchsia-600 bg-fuchsia-600 text-white font-bold opacity-70 hover:opacity-100 transition-opacity duration-200 ease-in-out", + cta: "rounded-full px-5 py-2 border border-accent bg-accent text-white font-bold opacity-70 hover:opacity-100 transition-opacity duration-200 ease-in-out", }, size: { default: "h-10 px-4 py-2",