From 330261be1a92b72f3b3552e9100b746111948145 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Wed, 22 Oct 2025 00:25:59 -0400
Subject: [PATCH 1/2] feat(button): add responsive breakpoint sizes to small,
 medium, large button variants

---
 src/components/Button.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index b8677fb..3a74983 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -6,9 +6,9 @@ const buttonVariants = tv({
     // all button variants
     variants: {
         size: {
-            sm: 'h-14 w-[220px] text-2xl text-md font-semibold rounded-lg',
-            md: 'h-16 w-82 text-2xl font-semibold rounded-lg',
-            lg: 'h-11 w-[501px] text-lg font-medium rounded-md',
+            sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
+            md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
+            lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
             circ: 'h-11 w-11 text-2xl rounded-full'
         },
         color: {

From 2344cb76fd876ddbe8687b1cdc8d52667ae8c666 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Wed, 22 Oct 2025 10:22:51 -0400
Subject: [PATCH 2/2] style(button): replace hex codes with custom tailwind
 colors

---
 src/components/Button.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 3a74983..756e7a3 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -12,9 +12,9 @@ const buttonVariants = tv({
             circ: 'h-11 w-11 text-2xl rounded-full'
         },
         color: {
-            primary: 'bg-[#1E1E1E] text-white border-1 border-[#1E1E1E]',
-            secondary: 'bg-white text-[#1E1E1E] border-1 border-[#1E1E1E]',
-            gradient: 'bg-gradient-to-b from-[#15F30D] to-[#0561A7] text-white'
+            primary: 'bg-eerie text-white border-1 border-eerie',
+            secondary: 'bg-white text-eerie border-1 border-eerie',
+            gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white'
         }
     },
     // default button styles if no specified props