From 4af242d270644b4f51ff700c75e224eb359a6ed7 Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavanvsoratur@gmail.com>
Date: Wed, 7 Aug 2024 15:04:00 +0530
Subject: [PATCH] chore(tangle-dapp): Update modals (header, footer, body)
 (#2506)

---
 .../app/bridge/BridgeConfirmationModal.tsx    |  8 ++-
 .../stakeAndUnstake/SelectTokenModal.tsx      |  6 +--
 .../UnstakeRequestSubmittedModal.tsx          |  8 ++-
 .../CancelUnstakeModal.tsx                    |  8 ++-
 .../WithdrawalConfirmationModal.tsx           |  8 ++-
 .../BondMoreTxContainer.tsx                   | 24 ++++-----
 .../DelegateTxContainer.tsx                   |  6 +--
 .../ManageProfileModalContainer.tsx           |  8 +--
 .../PayoutAllTxContainer.tsx                  | 26 +++++-----
 .../PayoutTxContainer/PayoutTxContainer.tsx   | 28 +++++-----
 .../RebondTxContainer/RebondTxContainer.tsx   | 24 ++++-----
 .../StopNominationTxContainer.tsx             | 22 ++++----
 .../TransferTxContainer.tsx                   | 52 +++++++++----------
 .../UnbondTxContainer/UnbondTxContainer.tsx   | 24 ++++-----
 .../UpdateNominationsTxContainer.tsx          |  8 ++-
 .../UpdatePayeeTxContainer.tsx                |  6 +--
 .../WithdrawUnbondedTxContainer.tsx           | 16 +++---
 .../RunCircuitServiceModalTrigger.tsx         | 20 +++----
 .../src/components/Modal/ModalContent.tsx     |  1 +
 .../src/components/Modal/ModalFooter.tsx      |  2 +-
 .../src/components/Modal/ModalHeader.tsx      |  2 +-
 .../WalletConnectionCard.tsx                  |  6 +--
 .../src/stories/organisms/Modal.stories.jsx   |  5 +-
 23 files changed, 142 insertions(+), 176 deletions(-)

diff --git a/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx b/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
index 708d23d53..c57db9d40 100644
--- a/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
@@ -85,11 +85,9 @@ const BridgeConfirmationModal: FC<BridgeConfirmationModalProps> = ({
       <ModalContent
         isCenter
         isOpen={isOpen}
-        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px]"
       >
-        <ModalHeader titleVariant="h4" onClose={handleClose}>
-          Bridge Confirmation
-        </ModalHeader>
+        <ModalHeader onClose={handleClose}>Bridge Confirmation</ModalHeader>
 
         <div className="p-9 space-y-8">
           <div className="flex flex-col items-center gap-4">
@@ -115,7 +113,7 @@ const BridgeConfirmationModal: FC<BridgeConfirmationModalProps> = ({
           <FeeDetails />
         </div>
 
-        <ModalFooter className="flex flex-col gap-1 px-8 py-6">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
             isLoading={isTransferring}
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectTokenModal.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectTokenModal.tsx
index a98c2677b..3965b1d3c 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectTokenModal.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectTokenModal.tsx
@@ -45,11 +45,9 @@ const SelectTokenModal: FC<SelectTokenModalProps> = ({
       <ModalContent
         isCenter
         isOpen={isOpen}
-        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px]"
       >
-        <ModalHeader titleVariant="h4" onClose={onClose}>
-          Select Token
-        </ModalHeader>
+        <ModalHeader onClose={onClose}>Select Token</ModalHeader>
 
         <div className="p-9 space-y-4 max-h-[500px] overflow-y-auto">
           {options.map((option) => {
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/UnstakeRequestSubmittedModal.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/UnstakeRequestSubmittedModal.tsx
index cc73834f3..1536b9f1c 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/UnstakeRequestSubmittedModal.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/UnstakeRequestSubmittedModal.tsx
@@ -49,11 +49,9 @@ const UnstakeRequestSubmittedModal: FC<UnstakeRequestSubmittedModalProps> = ({
       <ModalContent
         isCenter
         isOpen={isOpen}
-        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px]"
       >
-        <ModalHeader titleVariant="h4" onClose={onClose}>
-          Unstake Request Submitted
-        </ModalHeader>
+        <ModalHeader onClose={onClose}>Unstake Request Submitted</ModalHeader>
 
         <div className="flex flex-col items-center justify-center gap-2 p-9">
           <ModalIcon
@@ -73,7 +71,7 @@ const UnstakeRequestSubmittedModal: FC<UnstakeRequestSubmittedModalProps> = ({
           <ExternalLink href={TANGLE_DOCS_URL}>Learn More</ExternalLink>
         </div>
 
-        <ModalFooter className="flex px-8 py-6 space-y-0">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             href={viewExplorerHref?.toString()}
             // In case that the explorer URL could not be obtained,
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/CancelUnstakeModal.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/CancelUnstakeModal.tsx
index ea43e9888..8eb8ba0cf 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/CancelUnstakeModal.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/CancelUnstakeModal.tsx
@@ -41,11 +41,9 @@ const CancelUnstakeModal: FC<CancelUnstakeModalProps> = ({
       <ModalContent
         isCenter
         isOpen={isOpen}
-        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px]"
       >
-        <ModalHeader titleVariant="h4" onClose={onClose}>
-          Cancel Unstake
-        </ModalHeader>
+        <ModalHeader onClose={onClose}>Cancel Unstake</ModalHeader>
 
         <div className="flex flex-col items-center justify-center gap-2 p-9">
           <ModalIcon Icon={CloseCircleLineIcon} />
@@ -63,7 +61,7 @@ const CancelUnstakeModal: FC<CancelUnstakeModalProps> = ({
           <ExternalLink href={TANGLE_DOCS_URL}>Learn More</ExternalLink>
         </div>
 
-        <ModalFooter className="flex gap-1 px-8 py-6 space-y-0">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             onClick={onClose}
             isFullWidth
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawalConfirmationModal.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawalConfirmationModal.tsx
index 297c5d679..e394c4303 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawalConfirmationModal.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawalConfirmationModal.tsx
@@ -47,11 +47,9 @@ const WithdrawalConfirmationModal: FC<WithdrawalConfirmationModalProps> = ({
       <ModalContent
         isCenter
         isOpen={isOpen}
-        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px]"
       >
-        <ModalHeader titleVariant="h4" onClose={onClose}>
-          Withdrawal Success
-        </ModalHeader>
+        <ModalHeader onClose={onClose}>Withdrawal Success</ModalHeader>
 
         <div className="flex flex-col items-center justify-center gap-2 p-9">
           <ModalIcon
@@ -68,7 +66,7 @@ const WithdrawalConfirmationModal: FC<WithdrawalConfirmationModalProps> = ({
           </Typography>
         </div>
 
-        <ModalFooter className="flex px-8 py-6 space-y-0">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             href={viewExplorerHref?.toString()}
             // In case that the explorer URL could not be obtained,
diff --git a/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx b/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
index 861169d31..ca4ebb759 100644
--- a/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
+++ b/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
@@ -81,11 +81,9 @@ const BondMoreTxContainer: FC<BondMoreTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[416px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[416px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModalAndReset}>
-          Add Stake
-        </ModalHeader>
+        <ModalHeader onClose={closeModalAndReset}>Add Stake</ModalHeader>
 
         <div className="space-y-4 p-9">
           <AmountInput
@@ -105,23 +103,23 @@ const BondMoreTxContainer: FC<BondMoreTxContainerProps> = ({
           </Typography>
         </div>
 
-        <ModalFooter className="flex flex-col gap-1 px-8 py-6">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
-            isDisabled={!canSubmitTx}
-            isLoading={isBondMoreTxLoading}
-            onClick={submitAndSignTx}
+            variant="secondary"
+            href={TANGLE_DOCS_STAKING_URL}
+            target="_blank"
           >
-            Confirm
+            Learn More
           </Button>
 
           <Button
             isFullWidth
-            variant="secondary"
-            href={TANGLE_DOCS_STAKING_URL}
-            target="_blank"
+            isDisabled={!canSubmitTx}
+            isLoading={isBondMoreTxLoading}
+            onClick={submitAndSignTx}
           >
-            Learn More
+            Confirm
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/apps/tangle-dapp/containers/DelegateTxContainer/DelegateTxContainer.tsx b/apps/tangle-dapp/containers/DelegateTxContainer/DelegateTxContainer.tsx
index c3cd367db..9a110e89e 100644
--- a/apps/tangle-dapp/containers/DelegateTxContainer/DelegateTxContainer.tsx
+++ b/apps/tangle-dapp/containers/DelegateTxContainer/DelegateTxContainer.tsx
@@ -163,9 +163,9 @@ const DelegateTxContainer: FC<DelegateTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[838px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[838px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModalAndReset}>
+        <ModalHeader onClose={closeModalAndReset}>
           Setup Nomination {currentStep}
         </ModalHeader>
 
@@ -196,7 +196,7 @@ const DelegateTxContainer: FC<DelegateTxContainerProps> = ({
           )}
         </div>
 
-        <ModalFooter className="flex gap-1 items-center">
+        <ModalFooter className="flex items-center gap-2">
           {delegateTxStep === DelegateTxSteps.BOND_TOKENS ? (
             <Button
               isFullWidth
diff --git a/apps/tangle-dapp/containers/ManageProfileModalContainer/ManageProfileModalContainer.tsx b/apps/tangle-dapp/containers/ManageProfileModalContainer/ManageProfileModalContainer.tsx
index 32e09ff99..c96f008c8 100644
--- a/apps/tangle-dapp/containers/ManageProfileModalContainer/ManageProfileModalContainer.tsx
+++ b/apps/tangle-dapp/containers/ManageProfileModalContainer/ManageProfileModalContainer.tsx
@@ -237,13 +237,9 @@ const ManageProfileModalContainer: FC<ManageProfileModalContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[800px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[800px]"
       >
-        <ModalHeader
-          titleVariant="h4"
-          onClose={() => setIsModalOpen(false)}
-          className="pb-4 p-9"
-        >
+        <ModalHeader onClose={() => setIsModalOpen(false)}>
           {getStepTitle(step, profileType, isCreatingProfile)}
         </ModalHeader>
 
diff --git a/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx b/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
index 8cec287f7..743cf7b43 100644
--- a/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
+++ b/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
@@ -69,11 +69,9 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[838px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[838px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModal}>
-          Payout Stakers
-        </ModalHeader>
+        <ModalHeader onClose={closeModal}>Payout Stakers</ModalHeader>
 
         <div className="grid grid-cols-2 gap-9 p-9">
           <div className="flex flex-col gap-9">
@@ -136,16 +134,7 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
           </div>
         </div>
 
-        <ModalFooter className="flex flex-col gap-1 px-8 py-6">
-          <Button
-            isFullWidth
-            isDisabled={!canSubmitTx}
-            isLoading={payoutAllTxStatus === TxStatus.PROCESSING}
-            onClick={submitTx}
-          >
-            Confirm
-          </Button>
-
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
             variant="secondary"
@@ -155,6 +144,15 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
           >
             Learn More
           </Button>
+
+          <Button
+            isFullWidth
+            isDisabled={!canSubmitTx}
+            isLoading={payoutAllTxStatus === TxStatus.PROCESSING}
+            onClick={submitTx}
+          >
+            Confirm
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/apps/tangle-dapp/containers/PayoutTxContainer/PayoutTxContainer.tsx b/apps/tangle-dapp/containers/PayoutTxContainer/PayoutTxContainer.tsx
index 2206f7bea..515f2d2ff 100644
--- a/apps/tangle-dapp/containers/PayoutTxContainer/PayoutTxContainer.tsx
+++ b/apps/tangle-dapp/containers/PayoutTxContainer/PayoutTxContainer.tsx
@@ -61,11 +61,9 @@ const PayoutTxContainer: FC<PayoutTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[838px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[838px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModal}>
-          Payout Stakers
-        </ModalHeader>
+        <ModalHeader onClose={closeModal}>Payout Stakers</ModalHeader>
 
         <div className="grid grid-cols-2 gap-9 p-9">
           <div className="flex flex-col gap-9">
@@ -122,7 +120,17 @@ const PayoutTxContainer: FC<PayoutTxContainerProps> = ({
           </div>
         </div>
 
-        <ModalFooter className="flex flex-col gap-1 px-8 py-6">
+        <ModalFooter className="flex items-center gap-2">
+          <Button
+            isFullWidth
+            variant="secondary"
+            href={TANGLE_DOCS_STAKING_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn More
+          </Button>
+
           <Button
             isFullWidth
             isDisabled={!canSubmitTx}
@@ -131,16 +139,6 @@ const PayoutTxContainer: FC<PayoutTxContainerProps> = ({
           >
             Confirm
           </Button>
-
-          <a
-            href={TANGLE_DOCS_STAKING_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Button isFullWidth variant="secondary">
-              Learn More
-            </Button>
-          </a>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx b/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
index 33a48581b..c1d88268e 100644
--- a/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
+++ b/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
@@ -71,11 +71,9 @@ const RebondTxContainer: FC<RebondTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[416px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[416px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModalAndReset}>
-          Rebond Funds
-        </ModalHeader>
+        <ModalHeader onClose={closeModalAndReset}>Rebond Funds</ModalHeader>
 
         <div className="space-y-4 p-9">
           <Typography variant="body1" fw="normal">
@@ -108,23 +106,23 @@ const RebondTxContainer: FC<RebondTxContainerProps> = ({
           </div>
         </div>
 
-        <ModalFooter className="flex flex-col gap-1 px-8 py-6">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
-            isDisabled={!canSubmitTx}
-            isLoading={rebondTxStatus === TxStatus.PROCESSING}
-            onClick={submitTx}
+            variant="secondary"
+            href={TANGLE_DOCS_STAKING_URL}
+            target="_blank"
           >
-            Confirm
+            Learn More
           </Button>
 
           <Button
             isFullWidth
-            variant="secondary"
-            href={TANGLE_DOCS_STAKING_URL}
-            target="_blank"
+            isDisabled={!canSubmitTx}
+            isLoading={rebondTxStatus === TxStatus.PROCESSING}
+            onClick={submitTx}
           >
-            Learn More
+            Confirm
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/apps/tangle-dapp/containers/StopNominationTxContainer/StopNominationTxContainer.tsx b/apps/tangle-dapp/containers/StopNominationTxContainer/StopNominationTxContainer.tsx
index b53ee9bfa..76939a135 100644
--- a/apps/tangle-dapp/containers/StopNominationTxContainer/StopNominationTxContainer.tsx
+++ b/apps/tangle-dapp/containers/StopNominationTxContainer/StopNominationTxContainer.tsx
@@ -42,9 +42,9 @@ const StopNominationTxContainer: FC<StopNominationTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[416px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[416px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModal} className="mb-4">
+        <ModalHeader onClose={closeModal} className="mb-4">
           Stop Nominations
         </ModalHeader>
 
@@ -58,23 +58,23 @@ const StopNominationTxContainer: FC<StopNominationTxContainerProps> = ({
           </Typography>
         </div>
 
-        <ModalFooter className="px-8 py-6 flex flex-col gap-1">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
-            isDisabled={isNominating === null || !isNominating}
-            isLoading={chillTxStatus === TxStatus.PROCESSING}
-            onClick={submitTx}
+            variant="secondary"
+            href={TANGLE_DOCS_STAKING_URL}
+            target="_blank"
           >
-            Confirm
+            Learn More
           </Button>
 
           <Button
             isFullWidth
-            variant="secondary"
-            href={TANGLE_DOCS_STAKING_URL}
-            target="_blank"
+            isDisabled={isNominating === null || !isNominating}
+            isLoading={chillTxStatus === TxStatus.PROCESSING}
+            onClick={submitTx}
           >
-            Learn More
+            Confirm
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx b/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
index 225efa338..ea4ba775a 100644
--- a/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
+++ b/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
@@ -171,10 +171,10 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[550px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[550px]"
         onCloseAutoFocus={reset}
       >
-        <ModalHeader titleVariant="h4" onClose={() => setIsModalOpen(false)}>
+        <ModalHeader onClose={() => setIsModalOpen(false)}>
           Transfer {nativeTokenSymbol} Tokens
         </ModalHeader>
 
@@ -254,33 +254,29 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
           )}
         </div>
 
-        <ModalFooter className="flex items-center gap-2 px-8 py-6 space-y-0">
-          <div className="flex-1">
-            <Button
-              isFullWidth
-              variant="secondary"
-              href={TANGLE_DOCS_URL}
-              target="_blank"
-            >
-              Learn More
-            </Button>
-          </div>
+        <ModalFooter className="flex items-center gap-2">
+          <Button
+            isFullWidth
+            variant="secondary"
+            href={TANGLE_DOCS_URL}
+            target="_blank"
+          >
+            Learn More
+          </Button>
 
-          <div className="flex-1">
-            <Button
-              isFullWidth
-              isLoading={!isReady}
-              loadingText={getTxStatusText(status)}
-              onClick={handleSend}
-              isDisabled={
-                !canInitiateTx ||
-                executeTransferTx === null ||
-                !isValidReceiverAddress
-              }
-            >
-              Send
-            </Button>
-          </div>
+          <Button
+            isFullWidth
+            isLoading={!isReady}
+            loadingText={getTxStatusText(status)}
+            onClick={handleSend}
+            isDisabled={
+              !canInitiateTx ||
+              executeTransferTx === null ||
+              !isValidReceiverAddress
+            }
+          >
+            Send
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx b/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
index d6a7c30da..e3cee09a2 100644
--- a/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
+++ b/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
@@ -113,11 +113,9 @@ const UnbondTxContainer: FC<UnbondTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[416px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[416px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModalAndReset}>
-          Unbond Stake
-        </ModalHeader>
+        <ModalHeader onClose={closeModalAndReset}>Unbond Stake</ModalHeader>
 
         <div className="space-y-4 p-9">
           <AmountInput
@@ -142,23 +140,23 @@ const UnbondTxContainer: FC<UnbondTxContainerProps> = ({
           </Typography>
         </div>
 
-        <ModalFooter className="flex flex-col gap-1 px-8 py-6">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
-            isDisabled={!canSubmitTx}
-            isLoading={unbondTxStatus === TxStatus.PROCESSING}
-            onClick={submitTx}
+            variant="secondary"
+            href={TANGLE_DOCS_STAKING_URL}
+            target="_blank"
           >
-            Confirm
+            Learn More
           </Button>
 
           <Button
             isFullWidth
-            variant="secondary"
-            href={TANGLE_DOCS_STAKING_URL}
-            target="_blank"
+            isDisabled={!canSubmitTx}
+            isLoading={unbondTxStatus === TxStatus.PROCESSING}
+            onClick={submitTx}
           >
-            Learn More
+            Confirm
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/apps/tangle-dapp/containers/UpdateNominationsTxContainer/UpdateNominationsTxContainer.tsx b/apps/tangle-dapp/containers/UpdateNominationsTxContainer/UpdateNominationsTxContainer.tsx
index 7c678f432..c5ff3e873 100644
--- a/apps/tangle-dapp/containers/UpdateNominationsTxContainer/UpdateNominationsTxContainer.tsx
+++ b/apps/tangle-dapp/containers/UpdateNominationsTxContainer/UpdateNominationsTxContainer.tsx
@@ -113,11 +113,9 @@ const UpdateNominationsTxContainer: FC<UpdateNominationsTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[1000px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[1000px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModal}>
-          Update Nominations
-        </ModalHeader>
+        <ModalHeader onClose={closeModal}>Update Nominations</ModalHeader>
 
         <div className="px-8 py-6">
           <SelectValidators
@@ -134,7 +132,7 @@ const UpdateNominationsTxContainer: FC<UpdateNominationsTxContainerProps> = ({
           )}
         </div>
 
-        <ModalFooter className="flex items-center gap-1">
+        <ModalFooter className="flex items-center gap-2">
           <Button isFullWidth variant="secondary" onClick={closeModal}>
             Cancel
           </Button>
diff --git a/apps/tangle-dapp/containers/UpdatePayeeTxContainer/UpdatePayeeTxContainer.tsx b/apps/tangle-dapp/containers/UpdatePayeeTxContainer/UpdatePayeeTxContainer.tsx
index 4c7d920f0..337995bf6 100644
--- a/apps/tangle-dapp/containers/UpdatePayeeTxContainer/UpdatePayeeTxContainer.tsx
+++ b/apps/tangle-dapp/containers/UpdatePayeeTxContainer/UpdatePayeeTxContainer.tsx
@@ -58,9 +58,9 @@ const UpdatePayeeTxContainer: FC<UpdatePayeeTxContainerProps> = ({
       <ModalContent
         isCenter
         isOpen={isModalOpen}
-        className="w-full max-w-[416px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        className="w-full max-w-[416px]"
       >
-        <ModalHeader titleVariant="h4" onClose={closeModalAndReset}>
+        <ModalHeader onClose={closeModalAndReset}>
           Change Reward Destination
         </ModalHeader>
 
@@ -72,7 +72,7 @@ const UpdatePayeeTxContainer: FC<UpdatePayeeTxContainerProps> = ({
           />
         </div>
 
-        <ModalFooter className="px-8 py-6 flex items-center gap-2">
+        <ModalFooter className="flex items-center gap-2">
           <Button
             isFullWidth
             variant="secondary"
diff --git a/apps/tangle-dapp/containers/WithdrawUnbondedTxContainer/WithdrawUnbondedTxContainer.tsx b/apps/tangle-dapp/containers/WithdrawUnbondedTxContainer/WithdrawUnbondedTxContainer.tsx
index 2d86c18cf..55644e29a 100644
--- a/apps/tangle-dapp/containers/WithdrawUnbondedTxContainer/WithdrawUnbondedTxContainer.tsx
+++ b/apps/tangle-dapp/containers/WithdrawUnbondedTxContainer/WithdrawUnbondedTxContainer.tsx
@@ -61,11 +61,9 @@ const WithdrawUnbondedTxContainer: FC<WithdrawUnbondedTxContainerProps> = ({
         <ModalContent
           isCenter
           isOpen={isModalOpen}
-          className="w-full max-w-[416px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+          className="w-full max-w-[416px]"
         >
-          <ModalHeader titleVariant="h4" onClose={closeModal}>
-            Withdraw Funds
-          </ModalHeader>
+          <ModalHeader onClose={closeModal}>Withdraw Funds</ModalHeader>
 
           <div className="p-9 space-y-6">
             <Typography variant="body1" fw="normal">
@@ -85,7 +83,11 @@ const WithdrawUnbondedTxContainer: FC<WithdrawUnbondedTxContainerProps> = ({
             </div>
           </div>
 
-          <ModalFooter className="px-8 py-6 flex flex-col gap-1">
+          <ModalFooter className="flex items-center gap-2">
+            <Button isFullWidth onClick={onRebondClick} variant="secondary">
+              Rebond
+            </Button>
+
             <Button
               isFullWidth
               isDisabled={!canSubmitTx}
@@ -94,10 +96,6 @@ const WithdrawUnbondedTxContainer: FC<WithdrawUnbondedTxContainerProps> = ({
             >
               Confirm
             </Button>
-
-            <Button isFullWidth onClick={onRebondClick} variant="secondary">
-              Rebond
-            </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
diff --git a/apps/zk-explorer/components/RunCircuitServiceModalTrigger.tsx b/apps/zk-explorer/components/RunCircuitServiceModalTrigger.tsx
index b7cb04595..e293feaba 100644
--- a/apps/zk-explorer/components/RunCircuitServiceModalTrigger.tsx
+++ b/apps/zk-explorer/components/RunCircuitServiceModalTrigger.tsx
@@ -82,7 +82,7 @@ export const RunCircuitServiceModalTrigger: FC<
         <ModalContent
           usePortal
           isCenter
-          className="bg-mono-0 dark:bg-mono-180 rounded-xl max-w-[550px] w-full"
+          className=" w-full max-w-[550px]"
           isOpen={isOpen}
         >
           <ModalHeader onClose={() => setIsOpen(false)}>
@@ -124,15 +124,7 @@ export const RunCircuitServiceModalTrigger: FC<
             </div>
           </div>
 
-          <ModalFooter>
-            <Button
-              onClick={handleContinue}
-              isFullWidth
-              isDisabled={selectedRadioItemId === null}
-            >
-              Continue
-            </Button>
-
+          <ModalFooter className="flex items-center gap-2">
             <Button
               href={WEBB_DOCS_URL}
               target="_blank"
@@ -142,6 +134,14 @@ export const RunCircuitServiceModalTrigger: FC<
             >
               Learn more
             </Button>
+
+            <Button
+              onClick={handleContinue}
+              isFullWidth
+              isDisabled={selectedRadioItemId === null}
+            >
+              Continue
+            </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
diff --git a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx
index 2c3464ea2..75b83b19e 100644
--- a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx
+++ b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx
@@ -59,6 +59,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
                   ? '-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'
                   : 'top-0 left-0',
               ),
+              'bg-mono-0 dark:bg-mono-180 rounded-2xl',
               className,
             )}
             ref={ref}
diff --git a/libs/webb-ui-components/src/components/Modal/ModalFooter.tsx b/libs/webb-ui-components/src/components/Modal/ModalFooter.tsx
index ba4419a7a..9e3473374 100644
--- a/libs/webb-ui-components/src/components/Modal/ModalFooter.tsx
+++ b/libs/webb-ui-components/src/components/Modal/ModalFooter.tsx
@@ -8,7 +8,7 @@ export const ModalFooter = forwardRef<HTMLDivElement, PropsOf<'div'>>(
       <div
         {...props}
         className={twMerge(
-          'space-y-2 px-8 py-6 border-t border-mono-60 dark:border-mono-140',
+          'px-8 py-6 border-t border-mono-60 dark:border-mono-140',
           className,
         )}
         ref={ref}
diff --git a/libs/webb-ui-components/src/components/Modal/ModalHeader.tsx b/libs/webb-ui-components/src/components/Modal/ModalHeader.tsx
index f19b20f85..931e10548 100644
--- a/libs/webb-ui-components/src/components/Modal/ModalHeader.tsx
+++ b/libs/webb-ui-components/src/components/Modal/ModalHeader.tsx
@@ -5,7 +5,7 @@ import { Typography } from '../../typography/Typography';
 import { Close as CloseIcon } from '@webb-tools/icons';
 
 export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
-  ({ children, className, onClose, titleVariant = 'h5', ...props }, ref) => {
+  ({ children, className, onClose, titleVariant = 'h4', ...props }, ref) => {
     return (
       <div
         {...props}
diff --git a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx
index 560c168af..88177d750 100644
--- a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx
+++ b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx
@@ -60,7 +60,7 @@ export const WalletConnectionCard = forwardRef<
         <div
           {...props}
           className={twMerge(
-            'flex max-w-max rounded-lg bg-mono-0 dark:bg-mono-190',
+            'flex max-w-max rounded-lg bg-mono-0 dark:bg-mono-180',
             className,
           )}
           ref={ref}
@@ -120,7 +120,7 @@ export const WalletConnectionCard = forwardRef<
       <div
         {...props}
         className={twMerge(
-          'max-w-full w-[356px] min-h-[448px] mx-9 rounded-lg bg-mono-0 dark:bg-mono-190',
+          'max-w-full w-[356px] min-h-[448px] mx-9 rounded-lg bg-mono-0 dark:bg-mono-180',
           'flex flex-col',
           className,
         )}
@@ -316,7 +316,7 @@ const WalletList: FC<
           {wallets.map((wallet) => (
             <ListItem
               key={wallet.id}
-              className="cursor-pointer"
+              className="cursor-pointer bg-mono-0 dark:bg-mono-180"
               onClick={() => onWalletSelect?.(wallet)}
             >
               <div className="flex items-center gap-2">
diff --git a/libs/webb-ui-components/src/stories/organisms/Modal.stories.jsx b/libs/webb-ui-components/src/stories/organisms/Modal.stories.jsx
index 43ed11e4a..9ce2f5047 100644
--- a/libs/webb-ui-components/src/stories/organisms/Modal.stories.jsx
+++ b/libs/webb-ui-components/src/stories/organisms/Modal.stories.jsx
@@ -57,10 +57,7 @@ const Template = () => {
       <ModalTrigger asChild>
         <Button>Click me</Button>
       </ModalTrigger>
-      <ModalContent
-        className="flex items-center justify-center"
-        isOpen={isOpen}
-      >
+      <ModalContent isOpen={isOpen}>
         <WalletConnectionCard
           onClose={() => setIsOpen(false)}
           wallets={wallets}