chore(tangle-dapp): Update modals (header, footer, body) (#2506)

tangle-network · Aug 7, 2024 · 4af242d · 4af242d
1 parent e91a8ba
commit 4af242d
Show file tree

Hide file tree

Showing 23 changed files with 142 additions and 176 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawalConfirmationModal.tsx b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>