From 4d12c36cf8624bd90d0313371a8225cfe97408a7 Mon Sep 17 00:00:00 2001
From: Vladimir Saric <92527393+VSaric@users.noreply.github.com>
Date: Wed, 4 Jan 2023 18:01:52 +0100
Subject: [PATCH] Align custom spending cap Max button in approve screen for
 multiple languages (#16927)

* Align custom spending cap Max button in approve screen for multiple languages

* Modify some css styles and adding Box props

* Using ButtonLink component instead of <button/>

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
---
 .../custom-spending-cap.js                    | 42 ++++++++++---------
 .../app/custom-spending-cap/index.scss        | 17 +-------
 .../ui/review-spending-cap/index.scss         |  5 ---
 .../review-spending-cap.js                    |  8 ++--
 4 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js
index 9afedc0b5..ef2d13ae3 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js
@@ -5,6 +5,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
 import Typography from '../../ui/typography';
+import { ButtonLink } from '../../component-library';
 import {
   ALIGN_ITEMS,
   COLORS,
@@ -15,6 +16,7 @@ import {
   TYPOGRAPHY,
   JUSTIFY_CONTENT,
   SIZES,
+  BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
 import { getCustomTokenAmount } from '../../../selectors';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
@@ -112,21 +114,6 @@ export default function CustomSpendingCap({
 
   return (
     <>
-      <Box
-        textAlign={TEXT_ALIGN.END}
-        className="custom-spending-cap__max-button"
-      >
-        <button
-          className="custom-spending-cap__input--max-button"
-          type="link"
-          onClick={(e) => {
-            e.preventDefault();
-            handleChange(currentTokenBalance);
-          }}
-        >
-          {t('max')}
-        </button>
-      </Box>
       <Box
         className="custom-spending-cap"
         borderRadius={SIZES.SM}
@@ -174,9 +161,8 @@ export default function CustomSpendingCap({
               value={value}
               titleDetail={
                 showUseDefaultButton && (
-                  <button
-                    className="custom-spending-cap__input--button"
-                    type="link"
+                  <ButtonLink
+                    size={SIZES.AUTO}
                     onClick={(e) => {
                       e.preventDefault();
                       setShowUseDefaultButton(false);
@@ -184,12 +170,30 @@ export default function CustomSpendingCap({
                     }}
                   >
                     {t('useDefault')}
-                  </button>
+                  </ButtonLink>
                 )
               }
               titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
               allowDecimals
             />
+            <Box
+              width={BLOCK_SIZES.MAX}
+              marginLeft="auto"
+              paddingRight={4}
+              paddingBottom={2}
+              textAlign={TEXT_ALIGN.END}
+              className="custom-spending-cap__max"
+            >
+              <ButtonLink
+                size={SIZES.AUTO}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleChange(currentTokenBalance);
+                }}
+              >
+                {t('max')}
+              </ButtonLink>
+            </Box>
             <Typography
               color={COLORS.TEXT_DEFAULT}
               variant={TYPOGRAPHY.H7}
diff --git a/ui/components/app/custom-spending-cap/index.scss b/ui/components/app/custom-spending-cap/index.scss
index e2ab68851..3864e3618 100644
--- a/ui/components/app/custom-spending-cap/index.scss
+++ b/ui/components/app/custom-spending-cap/index.scss
@@ -3,26 +3,13 @@
     display: contents;
   }
 
-  &__max-button {
+  &__max {
     position: relative;
+    margin-top: -30px;
   }
 
   &__input {
     width: 100%;
-
-    &--button {
-      background: none;
-      color: var(--color-primary-default);
-    }
-
-    &--max-button {
-      color: var(--color-text-alternative);
-      background: none;
-      position: absolute;
-      margin-top: 55px;
-      margin-inline-start: -75px;
-      z-index: 1;
-    }
   }
 
   #custom-spending-cap-input-value {
diff --git a/ui/components/ui/review-spending-cap/index.scss b/ui/components/ui/review-spending-cap/index.scss
index fdcb3d562..c9000d842 100644
--- a/ui/components/ui/review-spending-cap/index.scss
+++ b/ui/components/ui/review-spending-cap/index.scss
@@ -20,11 +20,6 @@
   &__heading-detail {
     flex-grow: 1;
     align-self: center;
-
-    &__button {
-      background: none;
-      color: var(--color-primary-default);
-    }
   }
 
   i {
diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/ui/components/ui/review-spending-cap/review-spending-cap.js
index 38761de63..bce174345 100644
--- a/ui/components/ui/review-spending-cap/review-spending-cap.js
+++ b/ui/components/ui/review-spending-cap/review-spending-cap.js
@@ -4,6 +4,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../box';
 import Tooltip from '../tooltip';
 import Typography from '../typography';
+import { ButtonLink } from '../../component-library';
 import {
   ALIGN_ITEMS,
   COLORS,
@@ -93,16 +94,15 @@ export default function ReviewSpendingCap({
           className="review-spending-cap__heading-detail"
           textAlign={TEXT_ALIGN.END}
         >
-          <button
-            className="review-spending-cap__heading-detail__button"
-            type="link"
+          <ButtonLink
+            size={SIZES.AUTO}
             onClick={(e) => {
               e.preventDefault();
               onEdit();
             }}
           >
             {t('edit')}
-          </button>
+          </ButtonLink>
         </Box>
       </Box>
       <Box>