From 44614dba9d713ea0784f08f42358d71cc172a2d4 Mon Sep 17 00:00:00 2001
From: akcodez <ariakesh@yahoo.com>
Date: Tue, 2 Dec 2025 12:40:27 -0800
Subject: [PATCH] Refactor Button Styles for Responsive Design

Updated button styles to enhance responsiveness across devices by replacing fixed breakpoints with a mixin for the xl breakpoint. Adjusted typography and padding for smaller screens to ensure consistent appearance and usability. Improved comments for clarity on the import order and design tokens.
---
 shared/components/Button/Button.scss | 43 +++++++++++++++++++---------
 static/css/devportal2024-v1.css      | 23 ++++++++++-----
 styles/_breakpoints.scss             | 10 +++++++
 styles/xrpl.scss                     |  8 +-----
 4 files changed, 56 insertions(+), 28 deletions(-)
 create mode 100644 styles/_breakpoints.scss

diff --git a/shared/components/Button/Button.scss b/shared/components/Button/Button.scss
index 8392327aa0..fa00a3e9f4 100644
--- a/shared/components/Button/Button.scss
+++ b/shared/components/Button/Button.scss
@@ -12,8 +12,9 @@
 // .bds-btn__icon        - Icon element (inherits color via currentColor)
 // .bds-btn--disabled    - Disabled state modifier
 // .bds-btn--no-icon     - No icon modifier
-
-@import "../../../styles/colors";
+//
+// Note: This file is imported within xrpl.scss after Bootstrap and project
+// variables are loaded, so $grid-breakpoints, colors, and mixins are available.
 
 // =============================================================================
 // Design Tokens
@@ -188,6 +189,15 @@ $bds-btn-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
       transform: scaleX(0);
     }
   }
+
+  // ---------------------------------------------------------------------------
+  // Responsive Typography (<xl breakpoint)
+  // ---------------------------------------------------------------------------
+  @include media-breakpoint-down(xl) {
+    // Typography - Label R token (smaller screens)
+    font-size: 14px;
+    line-height: 20.1px;
+  }
 }
 
 // =============================================================================
@@ -271,9 +281,9 @@ $bds-btn-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
   }
 
   // ---------------------------------------------------------------------------
-  // Tablet & Mobile Responsive Styles (≤1023px)
+  // Tablet & Mobile Responsive Styles (<xl breakpoint)
   // ---------------------------------------------------------------------------
-  @media (max-width: 1023px) {
+  @include media-breakpoint-down(xl) {
     // Default/Enabled padding for smaller screens
     padding: 8px 15px 8px 16px;
     gap: 16px;
@@ -407,9 +417,9 @@ $bds-btn-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
   }
 
   // ---------------------------------------------------------------------------
-  // Tablet & Mobile Responsive Styles (≤1023px)
+  // Tablet & Mobile Responsive Styles (<xl breakpoint)
   // ---------------------------------------------------------------------------
-  @media (max-width: 1023px) {
+  @include media-breakpoint-down(xl) {
     padding: 6px 13px 6px 14px;
     gap: 16px;
 
@@ -573,7 +583,7 @@ $bds-btn-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
     }
 
     // Responsive hover states - ensure black color on mobile too
-    @media (max-width: 1023px) {
+    @include media-breakpoint-down(xl) {
       &:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
         color: $bds-btn-tertiary-black-text !important;
         padding: 8px 11px 8px 16px; // Match base tertiary mobile hover padding
@@ -682,9 +692,14 @@ $bds-btn-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
   }
 
   // ---------------------------------------------------------------------------
-  // Tablet & Mobile Responsive Styles (≤1023px)
+  // Tablet & Mobile Responsive Styles (<xl breakpoint)
   // ---------------------------------------------------------------------------
-  @media (max-width: 1023px) {
+  @include media-breakpoint-down(xl) {
+    // Typography - Body R token (smaller screens)
+    font-size: 16px;
+    line-height: 23.2px;
+    letter-spacing: 0px;
+
     padding: 8px 16px;
     gap: 16px;
 
@@ -745,7 +760,7 @@ html.dark {
     }
 
     // Focus State (keyboard navigation) - with icon - Tablet & Mobile (≤1023px)
-    @media (max-width: 1023px) {
+    @include media-breakpoint-down(xl) {
       &:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
         outline: $bds-btn-focus-border-width solid $white;
         outline-offset: 2px;
@@ -848,9 +863,9 @@ html.dark {
     }
 
     // ---------------------------------------------------------------------------
-    // Tablet & Mobile Responsive Styles (≤1023px)
+    // Tablet & Mobile Responsive Styles (<xl breakpoint)
     // ---------------------------------------------------------------------------
-    @media (max-width: 1023px) {
+    @include media-breakpoint-down(xl) {
       // Hover state - smaller screens (with icon)
       &:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
         color: $green-200;          // Green 200 - Text
@@ -963,9 +978,9 @@ html.dark {
     }
 
     // ---------------------------------------------------------------------------
-    // Tablet & Mobile Responsive Styles (≤1023px)
+    // Tablet & Mobile Responsive Styles (<xl breakpoint)
     // ---------------------------------------------------------------------------
-    @media (max-width: 1023px) {
+    @include media-breakpoint-down(xl) {
       // Hover state - smaller screens (with icon)
       &:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
         color: $green-200;          // Green 200 - Text
diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css
index fc16282791..5267d2635f 100644
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
@@ -11209,6 +11209,12 @@ button[disabled=disabled] {
 .bds-btn:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line {
   transform: scaleX(0);
 }
+@media (max-width: 1279.98px) {
+  .bds-btn {
+    font-size: 14px;
+    line-height: 20.1px;
+  }
+}
 
 .bds-btn--primary {
   color: #141414;
@@ -11252,7 +11258,7 @@ button[disabled=disabled] {
 .bds-btn--primary:disabled::before, .bds-btn--primary.bds-btn--disabled::before {
   display: none;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   .bds-btn--primary {
     padding: 8px 15px 8px 16px;
     gap: 16px;
@@ -11337,7 +11343,7 @@ button[disabled=disabled] {
 .bds-btn--secondary:disabled::before, .bds-btn--secondary.bds-btn--disabled::before {
   display: none;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   .bds-btn--secondary {
     padding: 6px 13px 6px 14px;
     gap: 16px;
@@ -11442,7 +11448,7 @@ button[disabled=disabled] {
 .bds-btn--black.bds-btn--tertiary:disabled, .bds-btn--black.bds-btn--tertiary.bds-btn--disabled {
   color: #838386;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   .bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
     color: #141414 !important;
     padding: 8px 11px 8px 16px;
@@ -11510,8 +11516,11 @@ button[disabled=disabled] {
 .bds-btn--tertiary:disabled::before, .bds-btn--tertiary.bds-btn--disabled::before {
   display: none;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   .bds-btn--tertiary {
+    font-size: 16px;
+    line-height: 23.2px;
+    letter-spacing: 0px;
     padding: 8px 16px;
     gap: 16px;
   }
@@ -11556,7 +11565,7 @@ html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled)
   outline-offset: 2px;
   padding: 8px 20px;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
     outline: 2px solid #FFFFFF;
     outline-offset: 2px;
@@ -11617,7 +11626,7 @@ html.dark .bds-btn--secondary:not(.bds-btn--black):disabled, html.dark .bds-btn-
 html.dark .bds-btn--secondary:not(.bds-btn--black):disabled::before, html.dark .bds-btn--secondary:not(.bds-btn--black).bds-btn--disabled::before {
   display: none;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   html.dark .bds-btn--secondary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
     color: #70EE97;
     border-color: #70EE97;
@@ -11689,7 +11698,7 @@ html.dark .bds-btn--tertiary:not(.bds-btn--black):disabled, html.dark .bds-btn--
   cursor: not-allowed;
   pointer-events: none;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279.98px) {
   html.dark .bds-btn--tertiary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
     color: #70EE97;
     text-decoration: underline;
diff --git a/styles/_breakpoints.scss b/styles/_breakpoints.scss
new file mode 100644
index 0000000000..79c89a8c30
--- /dev/null
+++ b/styles/_breakpoints.scss
@@ -0,0 +1,10 @@
+// Shared breakpoints for responsive design
+// These values are used by Bootstrap and custom components
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 576px,
+  lg: 992px,
+  xl: 1280px
+);
diff --git a/styles/xrpl.scss b/styles/xrpl.scss
index 1e3bcccedc..4266a17ef9 100644
--- a/styles/xrpl.scss
+++ b/styles/xrpl.scss
@@ -40,13 +40,7 @@ $font-family-sans-serif: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFon
 $base-size: 16px;
 $line-height-base: 1.5;
 
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 576px,
-  lg: 992px,
-  xl: 1280px
-);
+@import "_breakpoints.scss";
 
 // Bootstrap v5 - Import only what we need
 // Note: Bootstrap still uses @import internally, so we use @import for Bootstrap