From 0a1416dad2d7ea796f0c09e7ed447d074bcfbf62 Mon Sep 17 00:00:00 2001
From: emil <33105890+poolsar42@users.noreply.github.com>
Date: Tue, 30 May 2023 16:33:33 -0400
Subject: [PATCH 1/4] chore(Design): Modal Cancel Button

---
 .../DeleteAppModal/DeleteAppModal.tsx         |  4 +--
 .../RotateCredsModal/RotateCredsModal.tsx     |  6 ++--
 .../routes/apps/$clientId/designer.beta.tsx   |  3 +-
 .../app/routes/apps/$clientId/domain-wip.tsx  |  4 +--
 .../app/components/applications/claims.tsx    |  4 +--
 .../settings/accounts/DisconnectModal.tsx     |  3 +-
 .../app/routes/settings/accounts/index.tsx    |  4 +--
 .../passport/app/routes/settings/advanced.tsx |  4 +--
 .../app/components/accounts/PfpNftModal.tsx   |  6 ++--
 .../accounts/UnsavedChangesModal.tsx          |  4 +--
 .../app/components/nfts/modal/index.tsx       | 29 +++++++++----------
 .../src/molecules/modal/Modal.tsx             | 21 ++++++++------
 12 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
index b7e55e7f9c..5fb86450f0 100644
--- a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
+++ b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
@@ -31,8 +31,8 @@ export const DeleteAppModal = ({
       handleClose={() => deleteAppCallback(false)}
     >
       <div
-        className={`w-[62vw] transform rounded-lg  bg-white px-4 pt-5 pb-4 
-         text-left shadow-xl transition-all sm:p-6 overflow-y-auto flex items-start space-x-4`}
+        className={`w-[62vw] rounded-lg transform bg-white px-4 pb-4 
+         text-left  transition-all sm:px-6 sm:pb-6 overflow-y-auto flex items-start space-x-4`}
       >
         <img src={dangerVector} />
 
diff --git a/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx b/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx
index 0852bd94b9..62ce42b433 100644
--- a/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx
+++ b/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx
@@ -18,10 +18,10 @@ export const RotateCredsModal = ({
   rotateCallback,
 }: RotateCredsModalProps) => {
   return (
-    <Modal isOpen={isOpen} fixed handleClose={() => closeCallback()}>
+    <Modal isOpen={isOpen} handleClose={() => closeCallback()}>
       <div
-        className={`w-[62vw] transform rounded-lg  bg-white px-4 pt-5 pb-4 
-         text-left shadow-xl transition-all sm:p-6 overflow-y-auto flex items-start space-x-4`}
+        className={`w-[62vw] rounded-lg  transform bg-white px-4 pb-4 
+         text-left transition-all sm:px-6 sm:pb-6 overflow-y-auto flex items-start space-x-4`}
       >
         <img src={dangerVector} />
 
diff --git a/apps/console/app/routes/apps/$clientId/designer.beta.tsx b/apps/console/app/routes/apps/$clientId/designer.beta.tsx
index f237e3884a..5669f21c1a 100644
--- a/apps/console/app/routes/apps/$clientId/designer.beta.tsx
+++ b/apps/console/app/routes/apps/$clientId/designer.beta.tsx
@@ -228,7 +228,8 @@ const ProviderModal = ({
 
   return (
     <Modal isOpen={isOpen} fixed handleClose={() => onClose(false)}>
-      <div className="bg-white px-6 py-8 max-w-full lg:w-[543px] lg:mx-auto border shadow rounded-lg">
+      <div className="bg-white rounded-lg px-6 pb-6 max-w-full lg:w-[543px]
+      lg:m-auto">
         <Text weight="semibold" className="text-left text-gray-800 mb-4">
           Login Provider Configuration
         </Text>
diff --git a/apps/console/app/routes/apps/$clientId/domain-wip.tsx b/apps/console/app/routes/apps/$clientId/domain-wip.tsx
index 6668b0988b..586c7ce317 100644
--- a/apps/console/app/routes/apps/$clientId/domain-wip.tsx
+++ b/apps/console/app/routes/apps/$clientId/domain-wip.tsx
@@ -397,8 +397,8 @@ const DeleteModal = ({
   return (
     <Modal isOpen={isOpen} closable={!isSubmitting} handleClose={onClose}>
       <div
-        className={`flex w-[512px] items-start space-x-4 px-4 pt-5 pb-4 text-left overflow-y-auto rounded-lg bg-white
-         shadow-xl transform transition-all`}
+        className={`flex w-[512px] rounded-lg  items-start space-x-4 px-4 pb-4 text-left overflow-y-auto bg-white
+         transform transition-all`}
       >
         <img src={dangerVector} alt="Danger" />
 
diff --git a/apps/passport/app/components/applications/claims.tsx b/apps/passport/app/components/applications/claims.tsx
index cf085a365f..888fb8ff4a 100644
--- a/apps/passport/app/components/applications/claims.tsx
+++ b/apps/passport/app/components/applications/claims.tsx
@@ -33,8 +33,8 @@ export const ConfirmRevocationModal = ({
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div
         className={`min-w-[260px] sm:min-w-[400px] md:max-w-[512px] lg:max-w-[512px]
-       relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left
-      shadow-xl transition-all sm:p-6 overflow-y-auto`}
+       relative transform rounded-lg bg-white px-4 pb-4 text-left
+      transition-all sm:px-6 sm:pb-6 overflow-y-auto`}
       >
         <div className="flex flex-row space-x-6 items-center justify-start">
           <img
diff --git a/apps/passport/app/components/settings/accounts/DisconnectModal.tsx b/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
index eef4e4ed5e..19e750e7a4 100644
--- a/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
+++ b/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
@@ -65,7 +65,8 @@ export default ({
   ) : (
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div
-        className={`max-w-full w-[512px] relative transform rounded-lg bg-white text-left shadow-xl transition-all overflow-y-auto`}
+        className={`max-w-full w-[512px] relative transform bg-white text-left 
+        transition-all rounded-lg overflow-y-auto`}
       >
         <div className="flex flex-row space-x-4 p-6">
           <img src={warn} alt="Not Found" />
diff --git a/apps/passport/app/routes/settings/accounts/index.tsx b/apps/passport/app/routes/settings/accounts/index.tsx
index b306880303..70ce7a70c8 100644
--- a/apps/passport/app/routes/settings/accounts/index.tsx
+++ b/apps/passport/app/routes/settings/accounts/index.tsx
@@ -120,8 +120,8 @@ const RenameModal = ({
 }) => (
   <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
     <div
-      className={`min-w-[300px] sm:min-w-[437px] relative transform rounded-lg
-      bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:p-6 overflow-y-auto`}
+      className={`min-w-[300px] sm:min-w-[437px] relative transform
+      bg-white px-4 pb-4 text-left rounded-lg transition-all sm:px-6 sm:pb-6 overflow-y-auto`}
     >
       <Text size="lg" weight="semibold" className="text-gray-900 mb-4">
         Name Your Account
diff --git a/apps/passport/app/routes/settings/advanced.tsx b/apps/passport/app/routes/settings/advanced.tsx
index 739be07b18..801147edbb 100644
--- a/apps/passport/app/routes/settings/advanced.tsx
+++ b/apps/passport/app/routes/settings/advanced.tsx
@@ -129,8 +129,8 @@ const DeleteRollupIdentityModal = ({
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div
         className={`min-w-[260px] sm:min-w-[400px] md:max-w-[512px] lg:max-w-[512px]
-     relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left
-    shadow-xl transition-all sm:p-6 overflow-y-auto`}
+     relative transform bg-white px-4 pb-4 text-left
+    transition-all sm:px-6 rounded-lg sm:pb-6 overflow-y-auto`}
       >
         <div className="flex flex-row space-x-6 items-center justify-start">
           <img
diff --git a/apps/profile/app/components/accounts/PfpNftModal.tsx b/apps/profile/app/components/accounts/PfpNftModal.tsx
index 961571a5c1..06b6335a3c 100644
--- a/apps/profile/app/components/accounts/PfpNftModal.tsx
+++ b/apps/profile/app/components/accounts/PfpNftModal.tsx
@@ -37,9 +37,9 @@ const PfpNftModal = ({
   return (
     <Modal isOpen={isOpen} fixed handleClose={handleClose}>
       <div
-        className="flex-1 relative transform rounded-lg bg-white
-        overflow-x-visible max-h-[900px] w-screen min-[480px]:w-full px-2 pt-5
-      pb-4 text-left shadow-xl transition-all overflow-y-auto"
+        className="flex-1 relative transform bg-white
+        overflow-x-visible max-h-[900px] w-screen min-[480px]:w-full px-2
+      pb-4 text-left transition-all rounded-lg overflow-y-auto"
       >
         {text?.length && (
           <Text
diff --git a/apps/profile/app/components/accounts/UnsavedChangesModal.tsx b/apps/profile/app/components/accounts/UnsavedChangesModal.tsx
index f1a9a5a5ad..95c0bea5d9 100644
--- a/apps/profile/app/components/accounts/UnsavedChangesModal.tsx
+++ b/apps/profile/app/components/accounts/UnsavedChangesModal.tsx
@@ -8,8 +8,8 @@ import warn from '../../assets/warning.svg'
 const UnsavedChangesModal = ({ isOpen, handleClose }) => {
   return (
     <Modal isOpen={isOpen} handleClose={handleClose}>
-      <div className="relative bg-white lg:w-[32rem] rounded-xl pb-3 pr-6">
-        <div className="relative bg-white rounded-xl pl-6 pt-6">
+      <div className="relative rounded-lg bg-white lg:w-[32rem] pb-3 pr-6">
+        <div className="relative bg-white pl-6">
           <div className="mb-[53px] flex flex-row items-start">
             <img src={warn} alt="warning" className="mr-4" />
             <div className="flex flex-col items-start">
diff --git a/apps/profile/app/components/nfts/modal/index.tsx b/apps/profile/app/components/nfts/modal/index.tsx
index 16d14171e2..d9e7ee877a 100644
--- a/apps/profile/app/components/nfts/modal/index.tsx
+++ b/apps/profile/app/components/nfts/modal/index.tsx
@@ -41,8 +41,8 @@ const NftModal = ({
           scrollbarColor: '#D1D5DB white',
         }}
         className={`flex-1 relative h-max w-full sm:min-w-[37rem] sm:max-h-[35rem] sm:max-w-[58rem] h-[86vh] sm:w-[62vw]
-          transform rounded-lg  bg-white px-4 pt-5 pb-4 
-         text-left shadow-xl transition-all sm:p-6 overflow-y-auto`}
+          transform bg-white rounded-lg px-4 pb-4 
+         text-left transition-all sm:px-6 sm:pb-6 overflow-y-auto`}
       >
         <div className="flex flex-col justify-between lg:flex-row max-w-full ">
           <div>
@@ -52,11 +52,10 @@ const NftModal = ({
               )}
 
               <img
-                className={`object-fill rounded-lg shrink-0 ${
-                  imgLoaded
-                    ? 'visible w-screen'
-                    : 'invisible absolute w-2.5 h-2.5'
-                }`}
+                className={`object-fill rounded-lg shrink-0 ${imgLoaded
+                  ? 'visible w-screen'
+                  : 'invisible absolute w-2.5 h-2.5'
+                  }`}
                 src={gatewayFromIpfs(nft?.url)}
                 onLoad={() => setImgLoaded(true)}
                 alt=""
@@ -176,15 +175,15 @@ const NftModal = ({
                                   </button>
                                 </div>
                               )) || (
-                                <Text
-                                  size="xs"
-                                  weight="semibold"
-                                  className="text-gray-700 pb-2 max-w-[12rem] md:max-w-[16rem] lg:max-w-[18rem] 
+                                  <Text
+                                    size="xs"
+                                    weight="semibold"
+                                    className="text-gray-700 pb-2 max-w-[12rem] md:max-w-[16rem] lg:max-w-[18rem] 
                             truncate"
-                                >
-                                  {d.value}
-                                </Text>
-                              )}
+                                  >
+                                    {d.value}
+                                  </Text>
+                                )}
                             </div>
                           )
                         }
diff --git a/packages/design-system/src/molecules/modal/Modal.tsx b/packages/design-system/src/molecules/modal/Modal.tsx
index 73334fbc15..3441774cb1 100644
--- a/packages/design-system/src/molecules/modal/Modal.tsx
+++ b/packages/design-system/src/molecules/modal/Modal.tsx
@@ -53,18 +53,21 @@ export const Modal = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel>
+              <Dialog.Panel className={`${fixed ? "pb-10" : ""}`}>
                 <div
-                  className={`flex flex-col ${
-                    fixed
-                      ? `w-full min-[480px]:w-[96vw] lg:w-[62vw] h-[96vh] lg:h-[76vh]`
-                      : `max-w-[96vw] lg:w-full max-h-[89vh] lg:h-full pb-10`
-                  }`}
+                  className={`flex flex-col
+                  border bg-white rounded-lg shadow-xl 
+                  ${fixed
+                      ? `h-max w-max min-[480px]:w-[96vw] lg:w-[62vw] h-[96vh] lg:h-[76vh]`
+                      : `h-max w-max min-h-max max-w-[96vw] lg:w-full max-h-[89vh] lg:h-full
+                      `
+                    }`}
                 >
-                  <div className="flex flex-row justify-end p-3">
+                  <div className="flex flex-row justify-end px-3">
                     <div
-                      className={`bg-white rounded-full p-2 text-3xl cursor-pointer
-                      ${!closable ? 'bg-[#f3f4f6] text-[#d1d5db]' : ''}`}
+                      className={`bg-white p-2 rounded-lg m-2 text-xl cursor-pointer
+                      ${!closable ? 'bg-[#f3f4f6] text-gray-500' : ''}
+                      hover:bg-[#F3F4F6]`}
                       onClick={() => {
                         if (handleClose && closable) handleClose(false)
                       }}

From d03ab11622e4f553b6f7a8c77dccf17261b5f060 Mon Sep 17 00:00:00 2001
From: emil <33105890+poolsar42@users.noreply.github.com>
Date: Thu, 1 Jun 2023 12:50:15 -0400
Subject: [PATCH 2/4] wip

---
 .../components/DeleteAppModal/DeleteAppModal.tsx    |  1 -
 .../app/routes/apps/$clientId/designer.beta.tsx     |  4 ++--
 .../settings/accounts/DisconnectModal.tsx           |  2 +-
 apps/profile/app/helpers/profile.ts                 | 13 ++++++++++---
 apps/profile/app/validation.ts                      |  2 +-
 .../design-system/src/molecules/modal/Modal.tsx     |  2 +-
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
index 5fb86450f0..cd9a6ea101 100644
--- a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
+++ b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
@@ -26,7 +26,6 @@ export const DeleteAppModal = ({
   return (
     <Modal
       isOpen={isOpen}
-      fixed
       closable={!isSubmitting}
       handleClose={() => deleteAppCallback(false)}
     >
diff --git a/apps/console/app/routes/apps/$clientId/designer.beta.tsx b/apps/console/app/routes/apps/$clientId/designer.beta.tsx
index 5669f21c1a..4637cda8af 100644
--- a/apps/console/app/routes/apps/$clientId/designer.beta.tsx
+++ b/apps/console/app/routes/apps/$clientId/designer.beta.tsx
@@ -228,8 +228,8 @@ const ProviderModal = ({
 
   return (
     <Modal isOpen={isOpen} fixed handleClose={() => onClose(false)}>
-      <div className="bg-white rounded-lg px-6 pb-6 max-w-full lg:w-[543px]
-      lg:m-auto">
+      <div className="bg-white rounded-lg px-6 pb-6 min-w-full lg:w-[543px]
+      lg:m-auto overflow-y-auto">
         <Text weight="semibold" className="text-left text-gray-800 mb-4">
           Login Provider Configuration
         </Text>
diff --git a/apps/passport/app/components/settings/accounts/DisconnectModal.tsx b/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
index 19e750e7a4..574efe95ab 100644
--- a/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
+++ b/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
@@ -68,7 +68,7 @@ export default ({
         className={`max-w-full w-[512px] relative transform bg-white text-left 
         transition-all rounded-lg overflow-y-auto`}
       >
-        <div className="flex flex-row space-x-4 p-6">
+        <div className="flex flex-row space-x-4 pb-6 px-6">
           <img src={warn} alt="Not Found" />
 
           <div className="flex-1">
diff --git a/apps/profile/app/helpers/profile.ts b/apps/profile/app/helpers/profile.ts
index f0fbea02dd..d8c3d10893 100644
--- a/apps/profile/app/helpers/profile.ts
+++ b/apps/profile/app/helpers/profile.ts
@@ -86,9 +86,16 @@ export const getAccountCryptoAddresses = async ({
   // TODO: need to type qc and rc
   const cryptoAddresses =
     addresses
-      .filter((e) => [NodeType.Crypto, NodeType.Vault].includes(e.rc.node_type))
-      .map((address) => address.qc.alias.toLowerCase() as string) ||
-    ([] as string[])
+      .filter((e) => {
+        return [NodeType.Crypto, NodeType.Vault].includes(e.rc.node_type) &&
+          e.rc.addr_type === CryptoAddressType.ETH
+      })
+      .map((address) => {
+        return address.qc.alias.toLowerCase() as string
+      })
+    || ([] as string[])
+
+
 
   return cryptoAddresses
 }
diff --git a/apps/profile/app/validation.ts b/apps/profile/app/validation.ts
index ebab2d837f..4b57f1b33f 100644
--- a/apps/profile/app/validation.ts
+++ b/apps/profile/app/validation.ts
@@ -54,7 +54,7 @@ export const NFTDetailSchema = z.object({
 export const NFTPropertySchema = z.object({
   display: z.string(),
   name: z.string(),
-  value: z.string(),
+  value: z.string().or(z.number()),
 })
 
 export const NFTSchema = z.object({
diff --git a/packages/design-system/src/molecules/modal/Modal.tsx b/packages/design-system/src/molecules/modal/Modal.tsx
index 3441774cb1..c93b949517 100644
--- a/packages/design-system/src/molecules/modal/Modal.tsx
+++ b/packages/design-system/src/molecules/modal/Modal.tsx
@@ -56,7 +56,7 @@ export const Modal = ({
               <Dialog.Panel className={`${fixed ? "pb-10" : ""}`}>
                 <div
                   className={`flex flex-col
-                  border bg-white rounded-lg shadow-xl 
+                  border bg-white rounded-lg shadow-xl overflow-auto thin-scrollbar
                   ${fixed
                       ? `h-max w-max min-[480px]:w-[96vw] lg:w-[62vw] h-[96vh] lg:h-[76vh]`
                       : `h-max w-max min-h-max max-w-[96vw] lg:w-full max-h-[89vh] lg:h-full

From 4ef8f305a488077962267c58106375357f7bf4aa Mon Sep 17 00:00:00 2001
From: emil <33105890+poolsar42@users.noreply.github.com>
Date: Thu, 1 Jun 2023 12:55:36 -0400
Subject: [PATCH 3/4] optional closable

---
 .../src/molecules/modal/Modal.tsx             | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/molecules/modal/Modal.tsx b/packages/design-system/src/molecules/modal/Modal.tsx
index c93b949517..2a985ed104 100644
--- a/packages/design-system/src/molecules/modal/Modal.tsx
+++ b/packages/design-system/src/molecules/modal/Modal.tsx
@@ -64,16 +64,17 @@ export const Modal = ({
                     }`}
                 >
                   <div className="flex flex-row justify-end px-3">
-                    <div
-                      className={`bg-white p-2 rounded-lg m-2 text-xl cursor-pointer
-                      ${!closable ? 'bg-[#f3f4f6] text-gray-500' : ''}
+                    {
+                      closable && <div
+                        className={`bg-white p-2 rounded-lg m-2 text-xl cursor-pointer
                       hover:bg-[#F3F4F6]`}
-                      onClick={() => {
-                        if (handleClose && closable) handleClose(false)
-                      }}
-                    >
-                      <HiOutlineX />
-                    </div>
+                        onClick={() => {
+                          if (handleClose) handleClose(false)
+                        }}
+                      >
+                        <HiOutlineX />
+                      </div>
+                    }
                   </div>
                   {children}
                 </div>

From a4a82389f21d140be355f2540f3bf6f004eec98f Mon Sep 17 00:00:00 2001
From: emil <33105890+poolsar42@users.noreply.github.com>
Date: Fri, 2 Jun 2023 22:47:23 -0400
Subject: [PATCH 4/4] wip

---
 apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx   | 2 +-
 .../app/components/RotateCredsModal/RotateCredsModal.tsx        | 2 +-
 apps/console/app/routes/apps/$clientId/domain-wip.tsx           | 2 +-
 apps/passport/app/components/applications/claims.tsx            | 2 +-
 .../app/components/settings/accounts/DisconnectModal.tsx        | 2 +-
 apps/passport/app/routes/settings/accounts/index.tsx            | 2 +-
 apps/passport/app/routes/settings/advanced.tsx                  | 2 +-
 apps/profile/app/components/accounts/PfpNftModal.tsx            | 2 +-
 apps/profile/app/components/nfts/modal/index.tsx                | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
index cd9a6ea101..cdef1ba2ab 100644
--- a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
+++ b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
@@ -30,7 +30,7 @@ export const DeleteAppModal = ({
       handleClose={() => deleteAppCallback(false)}
     >
       <div
-        className={`w-[62vw] rounded-lg transform bg-white px-4 pb-4 
+        className={`w-[62vw] rounded-lg bg-white px-4 pb-4 
          text-left  transition-all sm:px-6 sm:pb-6 overflow-y-auto flex items-start space-x-4`}
       >
         <img src={dangerVector} />
diff --git a/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx b/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx
index 62ce42b433..c3481273e8 100644
--- a/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx
+++ b/apps/console/app/components/RotateCredsModal/RotateCredsModal.tsx
@@ -20,7 +20,7 @@ export const RotateCredsModal = ({
   return (
     <Modal isOpen={isOpen} handleClose={() => closeCallback()}>
       <div
-        className={`w-[62vw] rounded-lg  transform bg-white px-4 pb-4 
+        className={`w-[62vw] rounded-lg  bg-white px-4 pb-4 
          text-left transition-all sm:px-6 sm:pb-6 overflow-y-auto flex items-start space-x-4`}
       >
         <img src={dangerVector} />
diff --git a/apps/console/app/routes/apps/$clientId/domain-wip.tsx b/apps/console/app/routes/apps/$clientId/domain-wip.tsx
index 586c7ce317..27b79bf3c1 100644
--- a/apps/console/app/routes/apps/$clientId/domain-wip.tsx
+++ b/apps/console/app/routes/apps/$clientId/domain-wip.tsx
@@ -398,7 +398,7 @@ const DeleteModal = ({
     <Modal isOpen={isOpen} closable={!isSubmitting} handleClose={onClose}>
       <div
         className={`flex w-[512px] rounded-lg  items-start space-x-4 px-4 pb-4 text-left overflow-y-auto bg-white
-         transform transition-all`}
+         transition-all`}
       >
         <img src={dangerVector} alt="Danger" />
 
diff --git a/apps/passport/app/components/applications/claims.tsx b/apps/passport/app/components/applications/claims.tsx
index 888fb8ff4a..84fefae505 100644
--- a/apps/passport/app/components/applications/claims.tsx
+++ b/apps/passport/app/components/applications/claims.tsx
@@ -33,7 +33,7 @@ export const ConfirmRevocationModal = ({
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div
         className={`min-w-[260px] sm:min-w-[400px] md:max-w-[512px] lg:max-w-[512px]
-       relative transform rounded-lg bg-white px-4 pb-4 text-left
+       relative rounded-lg bg-white px-4 pb-4 text-left
       transition-all sm:px-6 sm:pb-6 overflow-y-auto`}
       >
         <div className="flex flex-row space-x-6 items-center justify-start">
diff --git a/apps/passport/app/components/settings/accounts/DisconnectModal.tsx b/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
index 574efe95ab..5c05508d9f 100644
--- a/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
+++ b/apps/passport/app/components/settings/accounts/DisconnectModal.tsx
@@ -65,7 +65,7 @@ export default ({
   ) : (
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div
-        className={`max-w-full w-[512px] relative transform bg-white text-left 
+        className={`max-w-full w-[512px] relative bg-white text-left 
         transition-all rounded-lg overflow-y-auto`}
       >
         <div className="flex flex-row space-x-4 pb-6 px-6">
diff --git a/apps/passport/app/routes/settings/accounts/index.tsx b/apps/passport/app/routes/settings/accounts/index.tsx
index 70ce7a70c8..3620bcc54b 100644
--- a/apps/passport/app/routes/settings/accounts/index.tsx
+++ b/apps/passport/app/routes/settings/accounts/index.tsx
@@ -120,7 +120,7 @@ const RenameModal = ({
 }) => (
   <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
     <div
-      className={`min-w-[300px] sm:min-w-[437px] relative transform
+      className={`min-w-[300px] sm:min-w-[437px] relative
       bg-white px-4 pb-4 text-left rounded-lg transition-all sm:px-6 sm:pb-6 overflow-y-auto`}
     >
       <Text size="lg" weight="semibold" className="text-gray-900 mb-4">
diff --git a/apps/passport/app/routes/settings/advanced.tsx b/apps/passport/app/routes/settings/advanced.tsx
index 801147edbb..afeec9d518 100644
--- a/apps/passport/app/routes/settings/advanced.tsx
+++ b/apps/passport/app/routes/settings/advanced.tsx
@@ -129,7 +129,7 @@ const DeleteRollupIdentityModal = ({
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div
         className={`min-w-[260px] sm:min-w-[400px] md:max-w-[512px] lg:max-w-[512px]
-     relative transform bg-white px-4 pb-4 text-left
+     relative bg-white px-4 pb-4 text-left
     transition-all sm:px-6 rounded-lg sm:pb-6 overflow-y-auto`}
       >
         <div className="flex flex-row space-x-6 items-center justify-start">
diff --git a/apps/profile/app/components/accounts/PfpNftModal.tsx b/apps/profile/app/components/accounts/PfpNftModal.tsx
index 06b6335a3c..2c45321497 100644
--- a/apps/profile/app/components/accounts/PfpNftModal.tsx
+++ b/apps/profile/app/components/accounts/PfpNftModal.tsx
@@ -37,7 +37,7 @@ const PfpNftModal = ({
   return (
     <Modal isOpen={isOpen} fixed handleClose={handleClose}>
       <div
-        className="flex-1 relative transform bg-white
+        className="flex-1 relative bg-white
         overflow-x-visible max-h-[900px] w-screen min-[480px]:w-full px-2
       pb-4 text-left transition-all rounded-lg overflow-y-auto"
       >
diff --git a/apps/profile/app/components/nfts/modal/index.tsx b/apps/profile/app/components/nfts/modal/index.tsx
index d9e7ee877a..abdb807acb 100644
--- a/apps/profile/app/components/nfts/modal/index.tsx
+++ b/apps/profile/app/components/nfts/modal/index.tsx
@@ -41,7 +41,7 @@ const NftModal = ({
           scrollbarColor: '#D1D5DB white',
         }}
         className={`flex-1 relative h-max w-full sm:min-w-[37rem] sm:max-h-[35rem] sm:max-w-[58rem] h-[86vh] sm:w-[62vw]
-          transform bg-white rounded-lg px-4 pb-4 
+           bg-white rounded-lg px-4 pb-4 
          text-left transition-all sm:px-6 sm:pb-6 overflow-y-auto`}
       >
         <div className="flex flex-col justify-between lg:flex-row max-w-full ">