Button: Add ability to opt-out of upper case transform (#4690)

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>

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);
 

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>) => {