From 5c8e1a94031b3008c921fb9081485150b1f4b2fb Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 21 Jun 2024 17:25:10 +0530
Subject: [PATCH] fix: Permit signature re-design papercuts (#25383)

---
 .../components/confirm/footer/footer.tsx             |  8 +-------
 .../confirm/info/__snapshots__/info.test.tsx.snap    |  4 ++--
 .../__snapshots__/typed-sign.test.tsx.snap           | 12 ++++++------
 .../__snapshots__/permit-simulation.test.tsx.snap    |  1 +
 .../permit-simulation/permit-simulation.tsx          |  2 +-
 .../confirm/info/typed-sign/typed-sign.tsx           |  6 +++---
 .../confirm/__snapshots__/confirm.test.tsx.snap      |  4 ++--
 7 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx
index 61b9fe36a90e..5d1f75ed8783 100644
--- 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
index 086498a0f4d8..3988a5be2c86 100644
--- 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/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
index 1d14c6815c89..f3ecfa197f0b 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
+++ b/ui/pages/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/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
index b5deeb02f612..111bc553477f 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/__snapshots__/permit-simulation.test.tsx.snap
+++ b/ui/pages/confirmations/components/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/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index 6aa8ec159ec0..dd023b5a6554 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/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
index 766ef740e952..c4922b64be81 100644
--- 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,7 +53,7 @@ const TypedSignInfo: React.FC = () => {
       >
         {isPermit && (
           <>
-            <Box padding={2}>
+            <Box paddingInline={2}>
               <ConfirmInfoRow label={t('spender')}>
                 <ConfirmInfoRowAddress address={spender} />
               </ConfirmInfoRow>
@@ -61,7 +61,7 @@ const TypedSignInfo: React.FC = () => {
             <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
index c28f6bec6360..148d433b61ef 100644
--- 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"