fix(frontend): update designs for grant confirmation and status dialogs

frontend/app/components/redesign/components/dialogs/BaseDialog.tsx

@@ -31,23 +31,19 @@ export const BaseDialog: React.FC<Props> = ({ children, className }) => {
   return (
     <dialog
       ref={dialogRef}
-      className="bg-transparent backdrop:bg-[#8995a7]/65 shadow-2xl"
+      className={cx(
+        'fixed w-[calc(100%-2rem)] max-w-[34rem] rounded-lg border border-interface-edge-container bg-interface-bg-container shadow-2xl backdrop:bg-[#8995a7]/65',
+        className,
+      )}
     >
-      <div
-        className={cx(
-          'bg-interface-bg-container border border-interface-edge-container rounded-lg',
-          className,
-        )}
+      <button
+        onClick={closeDialog}
+        className="absolute top-3 right-3 w-6 h-6 hover:bg-secondary-hover-surface transition-colors z-30"
+        aria-label="Close dialog"
       >
-        <button
-          onClick={closeDialog}
-          className="absolute top-3 right-3 w-6 h-6 hover:bg-secondary-hover-surface transition-colors z-30"
-          aria-label="Close dialog"
-        >
-          <SVGClose className="w-6 h-6" />
-        </button>
-        {children}
-      </div>
+        <SVGClose className="w-6 h-6" />
+      </button>
+      {children}
     </dialog>
   )
 }

frontend/app/components/redesign/components/dialogs/GrantConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ToolsSecondaryButton } from '@/components'
-import { Heading5, BodyEmphasis } from '@/typography'
+import { BodyEmphasis, BodyStandard } from '@/typography'
 import { BaseDialog } from './BaseDialog'
 
 interface Props {
@@ -13,24 +13,25 @@ export const GrantConfirmationDialog: React.FC<Props> = ({
   grantRedirect,
 }) => {
   return (
-    <BaseDialog
-      className="p-8 pb-4
-        flex flex-col items-center gap-6 w-full max-w-[442px]"
-    >
+    <BaseDialog className="p-md pt-xl flex flex-col items-center gap-md">
       <div className="text-center">
-        <Heading5>Please confirm you are owner of</Heading5>
+        <BodyEmphasis>Confirm you are the owner of</BodyEmphasis>
         {walletAddress && (
-          <div className="flex w-full justify-center text-center mt-2">
-            <BodyEmphasis>{walletAddress}</BodyEmphasis>
+          <div className="flex justify-center text-center mt-2">
+            <BodyStandard className="!text-text-success">
+              {walletAddress}
+            </BodyStandard>
           </div>
         )}
       </div>
-      <div className="text-center">
-        <p className="text-base leading-md font-normal text-text-primary">
-          You will need to confirm a grant to prove that you are the owner of
-          the wallet address. <br /> No funds will be withdrawn from your
-          wallet.
-        </p>
+      <div className=" text-center">
+        <BodyStandard className="!text-field-helpertext-default">
+          The privacy and safety of your data is important to us. Please confirm
+          you own the wallet address shown above.
+        </BodyStandard>
+        <BodyEmphasis className="!text-field-helpertext-default">
+          No funds will be withdrawn from your wallet.
+        </BodyEmphasis>
       </div>
       <div className="w-full">
         <ToolsSecondaryButton

frontend/app/components/redesign/components/dialogs/ProfilesDialog.tsx

@@ -137,10 +137,7 @@ export const ProfilesDialog: React.FC<Props> = ({
   }
 
   return (
-    <BaseDialog
-      className="pt-4xl pb-md px-0
-        flex flex-col items-center gap-lg w-[514px]"
-    >
+    <BaseDialog className="pt-4xl pb-md px-0 flex flex-col items-center gap-lg">
       <div className="px-md w-full text-center">
         <div className="text-style-body-standard space-y-2xs">
           <p>We found previous edits correlated to this wallet address.</p>

frontend/app/components/redesign/components/dialogs/ScriptDialog.tsx

@@ -32,7 +32,7 @@ export const ScriptDialog: React.FC<Props> = ({ wallet }) => {
 
   return (
     <BaseDialog
-      className="pt-xl px-md pb-md flex flex-col items-center gap-md w-full max-w-[544px]"
+      className="p-md pt-xl flex flex-col items-center gap-md"
       aria-labelledby="script-dialog-title"
     >
       <div className="flex gap-xs items-center justify-center">

frontend/app/components/redesign/components/dialogs/StatusDialog.tsx

@@ -17,22 +17,18 @@ export const StatusDialog: React.FC<Props> = ({
   status,
 }) => {
   return (
-    <BaseDialog
-      className="p-8 pb-4
-        flex flex-col items-center gap-6 w-[426px]"
-    >
-      <div className="flex items-center justify-center">
+    <BaseDialog className="p-md pt-xl flex flex-col items-center gap-md">
+      <div className="flex items-center gap-2">
         {status === 'error' || fieldErrors ? (
-          <SVGErrorVector className="w-[60px] h-[60px]" />
+          <SVGErrorVector className="size-6" />
         ) : (
-          <SVGMarkSuccess className="w-[60px] h-[60px]" />
+          <SVGMarkSuccess className="size-6" />
         )}
-      </div>
-      <div className="text-center">
-        <p className="text-base leading-md font-normal text-text-primary">
+        <p className="text-base leading-md font-bold text-text-primary">
           {message}
         </p>
       </div>
+
       {fieldErrors && Object.keys(fieldErrors).length && (
         <details className="self-start text-left">
           <ul className="list-disc ml-6 text-sm text-field-helpertext-default">

frontend/tailwind.config.ts

@@ -389,7 +389,6 @@ export default {
         '128': '36rem',
         'md-old': '28rem',
       },
-
       padding: {
         '3xs': '2px',
         '2xs': '4px',