From e42ff9232bcafcbb305480d81764d5190e2b095f Mon Sep 17 00:00:00 2001 From: KushPatel-18 Date: Sat, 11 Jul 2026 07:43:53 +0000 Subject: [PATCH 1/6] 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/6] 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/6] 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/6] 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", From 00e57086810e240cffe28b5cbfac212a80befdc0 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 10 Aug 2026 04:48:55 +0000 Subject: [PATCH 5/6] fix: tweaked button styles --- client/src/components/ui/button.tsx | 31 +++++++++++++---------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index 16fbd1d..03738b5 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -10,37 +10,34 @@ const buttonVariants = cva( { variants: { variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", + default: "bg-black text-white", // default should stay B/W (simple) destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + "rounded-xl bg-destructive text-destructive-foreground hover:bg-destructive/90", + ghost: + "rounded-xl border border-gray-300 text-gray-600 hover:border-accent", + link: "text-accent underline-offset-4 hover:underline", // Tab variants primary: - "rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-primary bg-primary text-gray-900", + "rounded-xl border px-5 py-2 text-sm transition-colors border-primary bg-primary text-gray-900 opacity-100 hover:bg-primary/80", secondary: - "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-secondary bg-white hover:bg-secondary hover:border-primary text-gray-900", + "rounded-xl border px-5 py-2 text-sm transition-colors border-secondary bg-white text-gray-700 hover:border-primary hover:bg-secondary", // Pagination Variants - paginationActive: "border border-accent bg-accent text-white", + paginationActive: + "rounded-xl border border-accent bg-accent text-white", paginationInactive: - "border border-accent/15 text-gray-600 hover:border-accent hover:accent hover:bg-accent/10", + "rounded-xl border border-gray-300 text-gray-600 hover:border-accent", paginationEndpoint: - "border border-gray-200 text-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40", + "rounded-xl border border-gray-300 text-gray-600 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40", // Call to Action (CTA) Variant - 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", + cta: "rounded-full px-5 py-2 border border-accent bg-accent/80 text-accent-foreground font-bold hover:bg-accent transition-colours", // pill shape }, size: { default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", + sm: "h-9 px-3", + lg: "h-11 px-8", icon: "h-10 w-10", tab: "h-10 w-10", pagination: "h-8 w-8", From 01c150a20b28c2dc77b657d36ded3ccfc97326da Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 10 Aug 2026 08:28:53 +0000 Subject: [PATCH 6/6] fix: outline variant for footer --- client/src/components/ui/button.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index 03738b5..2157837 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -13,6 +13,8 @@ const buttonVariants = cva( default: "bg-black text-white", // default should stay B/W (simple) destructive: "rounded-xl bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "rounded-xl bg-background hover:bg-accent hover:text-accent-foreground", ghost: "rounded-xl border border-gray-300 text-gray-600 hover:border-accent", link: "text-accent underline-offset-4 hover:underline",