fix: Permit signature re-design papercuts (#25383)

MetaMask · Jun 21, 2024 · 5c8e1a9 · 5c8e1a9
1 parent 5c9b126
commit 5c8e1a9
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 21 deletions.
diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx
@@ -28,10 +28,6 @@ import { confirmSelector } from '../../../selectors';
 import { REDESIGN_TRANSACTION_TYPES } from '../../../utils';
 import { getConfirmationSender } from '../utils';
 
-function getIconName(hasUnconfirmedAlerts: boolean): IconName {
-  return hasUnconfirmedAlerts ? IconName.SecuritySearch : IconName.Danger;
-}
-
 const ConfirmButton = ({
   alertOwnerId = '',
   disabled,
@@ -73,9 +69,7 @@ const ConfirmButton = ({
       <Button
         block
         data-testid="confirm-footer-button"
-        startIconName={
-          hasDangerAlerts ? getIconName(hasUnconfirmedDangerAlerts) : undefined
-        }
+        startIconName={hasDangerAlerts ? IconName.Danger : undefined}
         onClick={hasDangerAlerts ? handleOpenConfirmModal : onSubmit}
         danger={hasDangerAlerts}
         size={ButtonSize.Lg}

diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Info renders info section for typed sign request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -123,7 +123,7 @@ exports[`Info renders info section for typed sign request 1`] = `
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"

diff --git a/...s/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/...s/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -50,7 +50,7 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -439,7 +439,7 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -481,7 +481,7 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -870,7 +870,7 @@ exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -912,7 +912,7 @@ exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box mm-box--padding-inline-2"
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"

diff --git a/...s/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap b/...s/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`PermitSimulation renders component correctly 1`] = `
       </div>
       <div
         class="mm-box"
+        style="margin-left: auto;"
       >
         <div
           class="mm-box mm-box--display-flex"

diff --git a/.../confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/.../confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -56,7 +56,7 @@ const PermitSimulation: React.FC = () => {
         <ConfirmInfoRowText text={t('permitSimulationDetailInfo')} />
       </ConfirmInfoRow>
       <ConfirmInfoRow label={t('approve')}>
-        <Box>
+        <Box style={{ marginLeft: 'auto' }}>
           <Box display={Display.Flex}>
             <Box display={Display.Inline} marginInlineEnd={1}>
               <Text

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -53,15 +53,15 @@ const TypedSignInfo: React.FC = () => {
       >
         {isPermit && (
           <>
-            <Box padding={2}>
+            <Box paddingInline={2}>
               <ConfirmInfoRow label={t('spender')}>
                 <ConfirmInfoRowAddress address={spender} />
               </ConfirmInfoRow>
             </Box>
             <ConfirmInfoRowDivider />
           </>
         )}
-        <Box padding={2}>
+        <Box paddingInline={2}>
           <ConfirmInfoRow
             label={t('requestFrom')}
             tooltip={t('requestFromInfo')}
@@ -70,7 +70,7 @@ const TypedSignInfo: React.FC = () => {
           </ConfirmInfoRow>
         </Box>
         {isValidAddress(verifyingContract) && (
-          <Box padding={2}>
+          <Box paddingInline={2}>
             <ConfirmInfoRow label={t('interactingWith')}>
               <ConfirmInfoRowAddress address={verifyingContract} />
             </ConfirmInfoRow>

diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -381,7 +381,7 @@ exports[`Confirm should match snapshot for typed sign signature 1`] = `
             class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
           >
             <div
-              class="mm-box mm-box--padding-2"
+              class="mm-box mm-box--padding-inline-2"
             >
               <div
                 class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -423,7 +423,7 @@ exports[`Confirm should match snapshot for typed sign signature 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-box--padding-2"
+              class="mm-box mm-box--padding-inline-2"
             >
               <div
                 class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ exports[`PermitSimulation renders component correctly 1`] = ` @@
           </div>
           <div
             class="mm-box"
+            style="margin-left: auto;"
           >
             <div
               class="mm-box mm-box--display-flex"
@@ Expand Down @@