Update modal styles on mobile (#898)

Closes: AENG-36 Closes: AENG-37 This PR updates the modal component styles on mobile devices.
thesis · Nov 28, 2024 · 524e309 · 524e309
2 parents c217341 + b37293e
commit 524e309
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 17 deletions.
diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
@@ -42,7 +42,7 @@ function MezoBeehiveModalBase() {
         </Flex>
       </ModalHeader>
 
-      <ModalBody gap={6} pb={8} overflowX="hidden">
+      <ModalBody gap={6} pb={{ base: 0, sm: 8 }} overflowX="hidden">
         <VStack spacing={1}>
           {data && (
             <HStack>

diff --git a/dapp/src/components/TransactionModal/ActionFormModal.tsx b/dapp/src/components/TransactionModal/ActionFormModal.tsx
@@ -107,7 +107,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
     <>
       {!isLoading && <ModalCloseButton />}
       <ModalHeader>{heading}</ModalHeader>
-      <ModalBody px={10}>
+      <ModalBody>
         <Box w="100%">
           <FormComponent onSubmitForm={handleSubmitFormWrapper} />
         </Box>

diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx
@@ -22,7 +22,7 @@ export default function ResumeModal({ closeModal }: BaseModalProps) {
 
   return (
     <>
-      <ModalHeader pb={6} textAlign="center">
+      <ModalHeader pb={{ sm: 6 }} textAlign="center">
         Paused
       </ModalHeader>
       <ModalBody textAlign="start" py={6} mx={3} gap={4}>

diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx
@@ -32,7 +32,7 @@ export default function SuccessModal({ type }: SuccessModalProps) {
   return (
     <>
       <ModalCloseButton />
-      <ModalHeader textAlign="center" pt={16}>
+      <ModalHeader textAlign="center" pt={{ sm: 16 }}>
         {ACTION_FLOW_TYPES.UNSTAKE === type
           ? "Withdrawal initiated!"
           : "Deposit received!"}

diff --git a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
@@ -61,7 +61,7 @@ export default function WalletInteractionModal({
   return (
     <>
       {step === "opening-wallet" && <ModalCloseButton />}
-      <ModalHeader textAlign="center" pt={16} pb={12}>
+      <ModalHeader textAlign="center" pt={{ sm: 16 }} pb={{ base: 4, sm: 12 }}>
         {header}
       </ModalHeader>
       <ModalBody gap={12}>

diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
@@ -136,7 +136,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           </TextSm>
           {activeStepData.title}
         </ModalHeader>
-        <ModalBody textAlign="left" display="block" color="brown.80" px="10">
+        <ModalBody textAlign="left" display="block" color="brown.80">
           {activeStepData.content(embeddedApp)}
         </ModalBody>
         <ModalFooter

diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
@@ -2,23 +2,24 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy"
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
 const baseStyleContainer = defineStyle({
-  px: 8,
+  px: { base: 3, sm: 8 },
 })
 
 const baseStyleDialog = defineStyle({
   marginTop: { base: 12, sm: "var(--chakra-space-modal_shift)" },
   marginBottom: 8,
   boxShadow: "none",
   borderRadius: "xl",
+  p: { base: 5, sm: 0 },
   bg: "gold.100",
   border: "none",
 })
 
 const baseCloseButton = defineStyle({
-  top: -7,
-  right: -7,
-  boxSize: 7,
-  rounded: "100%",
+  top: { base: 3, sm: -7 },
+  right: { base: 3, sm: -7 },
+  boxSize: { sm: 7 },
+  rounded: { sm: "100%" },
   bg: "opacity.white.5",
 
   _hover: {
@@ -37,8 +38,8 @@ const baseStyleHeader = defineStyle({
   fontSize: "xl",
   lineHeight: "xl",
   fontWeight: "bold",
-  pt: 10,
-  px: 10,
+  pt: { sm: 10 },
+  px: { sm: 10 },
   pb: 8,
 })
 
@@ -50,15 +51,15 @@ const baseStyleBody = defineStyle({
   alignItems: "center",
   gap: 6,
   pt: 0,
-  px: 8,
-  pb: 10,
+  px: { base: 0, sm: 10 },
+  pb: { base: 0, sm: 10 },
 })
 
 const baseStyleFooter = defineStyle({
   flexDirection: "column",
   gap: 6,
-  px: 8,
-  pb: 10,
+  px: { base: 0, sm: 8 },
+  pb: { base: 0, sm: 10 },
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)