refactor(tangle-dapp): Better modal sizing

tangle-network · Nov 16, 2024 · f6ac68d · f6ac68d
1 parent 8b4856b
commit f6ac68d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx
@@ -84,7 +84,7 @@ const OnboardingModal: FC<OnboardingModalProps> = ({
       <ModalContent
         onInteractOutside={() => setIsOpen(false)}
         isOpen={isOpen}
-        size="lg"
+        size="md"
       >
         <ModalHeader onClose={() => setIsOpen(false)}>{title}</ModalHeader>
 

diff --git a/apps/tangle-dapp/containers/LsCreatePoolModal.tsx b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx
@@ -122,7 +122,7 @@ const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
           Create a Liquid Staking Pool
         </ModalHeader>
 
-        <ModalBody>
+        <ModalBody className="gap-4">
           {/**
            * In case that a testnet is selected, it's helpful to let the users
            * know that the pool will be created on the testnet, and that
@@ -135,7 +135,7 @@ const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
             />
           )}
 
-          <div className="flex items-center gap-2 justify-stretch">
+          <div className="flex flex-col sm:flex-row items-center gap-4 justify-stretch">
             <TextInput
               id="ls-create-pool-name"
               title="Pool Name"

diff --git a/apps/tangle-dapp/containers/UpdatePayeeTxContainer/UpdatePayeeTxContainer.tsx b/apps/tangle-dapp/containers/UpdatePayeeTxContainer/UpdatePayeeTxContainer.tsx
@@ -58,7 +58,7 @@ const UpdatePayeeTxContainer: FC<UpdatePayeeTxContainerProps> = ({
       <ModalContent
         onInteractOutside={() => setIsModalOpen(false)}
         isOpen={isModalOpen}
-        size="sm"
+        size="md"
       >
         <ModalHeader onClose={closeModalAndReset}>
           Change Reward Destination