From d94b6c203230beb4ffbdfb14b418226e325e83d9 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 26 Nov 2024 12:31:04 +0100 Subject: [PATCH 1/5] Update modal styles on mobile --- .../TransactionModal/ActionFormModal.tsx | 2 +- .../TransactionModal/ResumeModal.tsx | 2 +- .../TransactionModal/SuccessModal.tsx | 2 +- .../WalletInteractionModal.tsx | 2 +- dapp/src/theme/Modal.ts | 32 +++++++++++-------- dapp/src/theme/utils/semanticTokens.ts | 15 +++++++-- 6 files changed, 34 insertions(+), 21 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActionFormModal.tsx b/dapp/src/components/TransactionModal/ActionFormModal.tsx index 53ab0e42b..8c50be64e 100644 --- a/dapp/src/components/TransactionModal/ActionFormModal.tsx +++ b/dapp/src/components/TransactionModal/ActionFormModal.tsx @@ -107,7 +107,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) { <> {!isLoading && } {heading} - + diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx index 16cb45999..bc2159265 100644 --- 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 ( <> - + Paused diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx index e03d49658..5390a7e7f 100644 --- 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 ( <> - + {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 index dbbf4c53b..84a8469aa 100644 --- a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx +++ b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx @@ -54,7 +54,7 @@ export default function WalletInteractionModal({ return ( <> {step === "opening-wallet" && } - + {header} diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index fd79f1bdc..bd1846073 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -2,23 +2,27 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy" import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" const baseStyleContainer = defineStyle({ - px: 8, + px: { base: 3, md: 8 }, }) const baseStyleDialog = defineStyle({ - marginTop: { base: 12, sm: "var(--chakra-space-modal_shift)" }, + marginTop: { + base: "var(--chakra-space-modal_shift)", + md: "var(--chakra-space-modal_shift_xl)", + }, marginBottom: 8, boxShadow: "none", borderRadius: "xl", + p: { base: 5 }, bg: "gold.100", border: "none", }) const baseCloseButton = defineStyle({ - top: -7, - right: -7, - boxSize: 7, - rounded: "100%", + top: { base: 3, md: -7 }, + right: { base: 3, md: -7 }, + boxSize: { md: 7 }, + rounded: { md: "100%" }, bg: "opacity.white.5", _hover: { @@ -37,9 +41,9 @@ const baseStyleHeader = defineStyle({ fontSize: "xl", lineHeight: "xl", fontWeight: "bold", - pt: 10, - px: 10, - pb: 8, + pt: { md: 10 }, + px: { md: 10 }, + mb: 8, }) const baseStyleBody = defineStyle({ @@ -50,15 +54,15 @@ const baseStyleBody = defineStyle({ alignItems: "center", gap: 6, pt: 0, - px: 8, - pb: 10, + px: { base: 0, md: 8 }, + pb: { base: 0, md: 10 }, }) const baseStyleFooter = defineStyle({ flexDirection: "column", gap: 6, - px: 8, - pb: 10, + px: { base: 0, md: 8 }, + pb: { base: 0, md: 10 }, }) const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) @@ -87,7 +91,7 @@ const sizeXl = multiStyleConfig.definePartsStyle({ }) const sizeLg = multiStyleConfig.definePartsStyle({ - dialog: { w: "30rem" }, + dialog: { w: { xs: "95%" } }, }) const sizeFull = multiStyleConfig.definePartsStyle({ diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index 8ad1298ba..dfd56d42b 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -1,8 +1,17 @@ +const headerHeight = 28 +const headerHeightXl = 36 + +const modalShiftToHeaderHeight = { + [headerHeight]: 28, + [headerHeightXl]: "9.25rem", +} + export const semanticTokens = { space: { - header_height: 28, - header_height_xl: 36, - modal_shift: "9.75rem", // 156px + header_height: headerHeight, + header_height_xl: headerHeightXl, + modal_shift: modalShiftToHeaderHeight[headerHeight], + modal_shift_xl: modalShiftToHeaderHeight[headerHeightXl], dashboard_card_padding: 5, }, sizes: { From a69c04b4d62c504624dace04fd90e112a98f98f2 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 27 Nov 2024 14:28:16 +0100 Subject: [PATCH 2/5] Update breakpoints for modal styles --- .../TransactionModal/ResumeModal.tsx | 2 +- .../TransactionModal/SuccessModal.tsx | 2 +- .../WalletInteractionModal.tsx | 2 +- dapp/src/theme/Modal.ts | 25 ++++++++----------- dapp/src/theme/utils/semanticTokens.ts | 15 +++-------- 5 files changed, 17 insertions(+), 29 deletions(-) diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx index bc2159265..3547673dc 100644 --- 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 ( <> - + Paused diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx index 5390a7e7f..7fa7f8d31 100644 --- 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 ( <> - + {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 index 84a8469aa..e7add85ea 100644 --- a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx +++ b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx @@ -54,7 +54,7 @@ export default function WalletInteractionModal({ return ( <> {step === "opening-wallet" && } - + {header} diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index bd1846073..589d0f691 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -6,10 +6,7 @@ const baseStyleContainer = defineStyle({ }) const baseStyleDialog = defineStyle({ - marginTop: { - base: "var(--chakra-space-modal_shift)", - md: "var(--chakra-space-modal_shift_xl)", - }, + marginTop: { base: 12, sm: "var(--chakra-space-modal_shift)" }, marginBottom: 8, boxShadow: "none", borderRadius: "xl", @@ -19,10 +16,10 @@ const baseStyleDialog = defineStyle({ }) const baseCloseButton = defineStyle({ - top: { base: 3, md: -7 }, - right: { base: 3, md: -7 }, - boxSize: { md: 7 }, - rounded: { md: "100%" }, + top: { base: 3, sm: -7 }, + right: { base: 3, sm: -7 }, + boxSize: { sm: 7 }, + rounded: { sm: "100%" }, bg: "opacity.white.5", _hover: { @@ -41,8 +38,8 @@ const baseStyleHeader = defineStyle({ fontSize: "xl", lineHeight: "xl", fontWeight: "bold", - pt: { md: 10 }, - px: { md: 10 }, + pt: { sm: 10 }, + px: { sm: 10 }, mb: 8, }) @@ -54,15 +51,15 @@ const baseStyleBody = defineStyle({ alignItems: "center", gap: 6, pt: 0, - px: { base: 0, md: 8 }, - pb: { base: 0, md: 10 }, + px: { base: 0, sm: 8 }, + pb: { base: 0, sm: 10 }, }) const baseStyleFooter = defineStyle({ flexDirection: "column", gap: 6, - px: { base: 0, md: 8 }, - pb: { base: 0, md: 10 }, + px: { base: 0, sm: 8 }, + pb: { base: 0, sm: 10 }, }) const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index dfd56d42b..8ad1298ba 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -1,17 +1,8 @@ -const headerHeight = 28 -const headerHeightXl = 36 - -const modalShiftToHeaderHeight = { - [headerHeight]: 28, - [headerHeightXl]: "9.25rem", -} - export const semanticTokens = { space: { - header_height: headerHeight, - header_height_xl: headerHeightXl, - modal_shift: modalShiftToHeaderHeight[headerHeight], - modal_shift_xl: modalShiftToHeaderHeight[headerHeightXl], + header_height: 28, + header_height_xl: 36, + modal_shift: "9.75rem", // 156px dashboard_card_padding: 5, }, sizes: { From 6f92877d7db605e93c9523bd1c6f98b6554e01c8 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 28 Nov 2024 12:36:59 +0100 Subject: [PATCH 3/5] Improve padding in modal component on mobile --- dapp/src/components/MezoBeehiveModal.tsx | 2 +- dapp/src/theme/Modal.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx index ccc88a5e0..18ca145d8 100644 --- a/dapp/src/components/MezoBeehiveModal.tsx +++ b/dapp/src/components/MezoBeehiveModal.tsx @@ -42,7 +42,7 @@ function MezoBeehiveModalBase() { - + {data && ( diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index 589d0f691..5008352a8 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -10,7 +10,7 @@ const baseStyleDialog = defineStyle({ marginBottom: 8, boxShadow: "none", borderRadius: "xl", - p: { base: 5 }, + p: { base: 5, sm: 0 }, bg: "gold.100", border: "none", }) @@ -40,7 +40,7 @@ const baseStyleHeader = defineStyle({ fontWeight: "bold", pt: { sm: 10 }, px: { sm: 10 }, - mb: 8, + pb: 8, }) const baseStyleBody = defineStyle({ From 41c0fd96f70b983486ade2b3048adc87ee9fcc02 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 28 Nov 2024 12:50:21 +0100 Subject: [PATCH 4/5] Do not change the modal width There is no need to change the modal width - we should use the previous value. --- dapp/src/theme/Modal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index 5008352a8..506c7d038 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -88,7 +88,7 @@ const sizeXl = multiStyleConfig.definePartsStyle({ }) const sizeLg = multiStyleConfig.definePartsStyle({ - dialog: { w: { xs: "95%" } }, + dialog: { w: "30rem" }, }) const sizeFull = multiStyleConfig.definePartsStyle({ From b37293eec0dfc75fb88b8d8fc3c3c344d316f4fc Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 28 Nov 2024 13:26:59 +0100 Subject: [PATCH 5/5] Update `ModalBody` horizontal padding The `ModalHeader` and `ModalBoyd` components should have the same horizontal padding. --- dapp/src/components/WelcomeModal.tsx | 2 +- dapp/src/theme/Modal.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx index d29d17fdf..b68a6ce75 100644 --- a/dapp/src/components/WelcomeModal.tsx +++ b/dapp/src/components/WelcomeModal.tsx @@ -136,7 +136,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) { {activeStepData.title} - + {activeStepData.content(embeddedApp)}