From 4cef8b62c17d71cf321cd5f64b29b23d5bc58973 Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Tue, 18 Jun 2024 16:30:33 +0200
Subject: [PATCH] Button: Add ability to opt-out of upper case transform
 (#4690)

---
 src/components/modals/stars/StarsBalanceModal.tsx | 2 +-
 src/components/ui/Button.scss                     | 5 +++++
 src/components/ui/Button.tsx                      | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/stars/StarsBalanceModal.tsx b/src/components/modals/stars/StarsBalanceModal.tsx
index c6561103d..916a746a6 100644
--- a/src/components/modals/stars/StarsBalanceModal.tsx
+++ b/src/components/modals/stars/StarsBalanceModal.tsx
@@ -165,7 +165,7 @@ const StarsBalanceModal = ({
               <StarTopupOption option={option} starsCount={starsCount} onClick={handleClick} />
             ))}
             {!areOptionsExtended && (
-              <Button className={styles.moreOptions} isText onClick={markOptionsExtended}>
+              <Button className={styles.moreOptions} noForcedUpperCase isText onClick={markOptionsExtended}>
                 {lang('Stars.Purchase.ShowMore')}
                 <Icon className={styles.iconDown} name="down" />
               </Button>
diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss
index 334cabd07..92098ba53 100644
--- a/src/components/ui/Button.scss
+++ b/src/components/ui/Button.scss
@@ -43,6 +43,7 @@
   overflow: hidden;
   transition: background-color 0.15s, color 0.15s;
   text-decoration: none !important;
+  text-transform: uppercase;
 
   --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
 
@@ -53,6 +54,10 @@
     transition: none !important;
   }
 
+  &.no-upper-case {
+    text-transform: none;
+  }
+
   &.disabled {
     cursor: var(--custom-cursor, default);
 
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 908b109ba..9ff2b3b9e 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -47,6 +47,7 @@ export type OwnProps = {
   isRectangular?: boolean;
   withPremiumGradient?: boolean;
   noPreventDefault?: boolean;
+  noForcedUpperCase?: boolean;
   shouldStopPropagation?: boolean;
   style?: string;
   onClick?: (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -102,6 +103,7 @@ const Button: FC<OwnProps> = ({
   isRectangular,
   noPreventDefault,
   shouldStopPropagation,
+  noForcedUpperCase,
   style,
 }) => {
   // eslint-disable-next-line no-null/no-null
@@ -134,6 +136,7 @@ const Button: FC<OwnProps> = ({
     isShiny && 'shiny',
     withPremiumGradient && 'premium',
     isRectangular && 'rectangular',
+    noForcedUpperCase && 'no-upper-case',
   );
 
   const handleClick = useLastCallback((e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {