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>

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
+                  <ButtonLink
-                    className="custom-spending-cap__input--button"
+                    size={SIZES.AUTO}
-                    type="link"
                     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}

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 {

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 {

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
+          <ButtonLink
-            className="review-spending-cap__heading-detail__button"
+            size={SIZES.AUTO}
-            type="link"
             onClick={(e) => {
               e.preventDefault();
               onEdit();
             }}
           >
             {t('edit')}
-          </button>
+          </ButtonLink>
         </Box>
       </Box>
       <Box>