Skip to content

Commit 215e43d

Browse files
hussmartinezhussmartinez
authored
chore: minting dialog responsive (#3708)
* chore: MintProgressModalBodyHistory responsive * chore: dialogs history page responsive * chore: make minting dialogs responsive responsive
1 parent b684b0e commit 215e43d

File tree

4 files changed

+71
-56
lines changed

4 files changed

+71
-56
lines changed

‎packages/grant-explorer/src/features/attestations/MintProgressModalBody.tsx

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from "react";
1+
import { PropsWithChildren, useState } from "react";
22
import { ProgressStatus } from "../../hooks/attestations/config";
33
import { useAccount, useBalance } from "wagmi";
44
import {
@@ -29,6 +29,37 @@ type MintProgressModalBodyProps = {
2929
subheading?: string;
3030
};
3131

32+
const MintProgressModalBody = ({
33+
heading,
34+
subheading,
35+
children,
36+
isOnAction,
37+
}: PropsWithChildren<{
38+
heading: string;
39+
subheading: string;
40+
isOnAction: boolean;
41+
}>) => (
42+
<div
43+
className={`max-w-[710px] p-6 flex flex-col justify-center text-black ${!isOnAction ? "sm:p-10 items-center text-center gap-2 sm:gap-6" : "gap-8"}`}
44+
>
45+
<div className={`flex flex-col gap-2 ${isOnAction ? "" : "sm:gap-6"}`}>
46+
<div
47+
className={`${isOnAction ? "text-3xl/[34px]" : "text-5xl/[39px]"} font-modern-era-bold`}
48+
>
49+
{heading}
50+
</div>
51+
<div
52+
className={`${isOnAction ? "text-[16px]/[26px]" : "text-[20px]/[26px]"} font-modern-era-regular`}
53+
>
54+
{subheading}
55+
</div>
56+
</div>
57+
<div className="flex flex-col justify-center items-center w-full">
58+
<div className="min-w-[288px] sm:w-[405px] w-full">{children}</div>
59+
</div>
60+
</div>
61+
);
62+
3263
// MintProgressModalBodyThankYou component
3364
export function MintProgressModalBodyThankYou(
3465
props: MintProgressModalBodyProps
@@ -53,15 +84,11 @@ export function MintProgressModalBodyThankYou(
5384
const { data: attestationFee } = useAttestationFee();
5485

5586
return (
56-
<div
57-
className={`w-[450px] min-h-full flex flex-col justify-center text-black p-6 gap-8`}
87+
<MintProgressModalBody
88+
heading={heading ?? ""}
89+
subheading={subheading ?? ""}
90+
isOnAction={true}
5891
>
59-
<div className={`flex flex-col gap-2`}>
60-
<div className={`text-3xl/[34px] font-modern-era-bold`}>{heading}</div>
61-
<div className={`text-[16px]/[26px] font-modern-era-regular`}>
62-
{subheading}
63-
</div>
64-
</div>
6592
<MintingProcessContent
6693
status={status}
6794
balance={balance?.value}
@@ -74,7 +101,7 @@ export function MintProgressModalBodyThankYou(
74101
handleAttest={handleAttest}
75102
isLoading={isLoading}
76103
/>
77-
</div>
104+
</MintProgressModalBody>
78105
);
79106
}
80107

@@ -119,21 +146,11 @@ export function MintProgressModalBodyHistory(
119146
status !== ProgressStatus.IS_SUCCESS;
120147

121148
return (
122-
<div
123-
className={`min-w-full max-w-[710px] min-h-full flex flex-col justify-center text-black ${!isOnAction ? "p-10 items-center text-center gap-6" : "p-6 gap-8"}`}
149+
<MintProgressModalBody
150+
heading={heading ?? ""}
151+
subheading={subheading ?? ""}
152+
isOnAction={isOnAction}
124153
>
125-
<div className={`flex flex-col ${isOnAction ? "gap-2" : "gap-6"}`}>
126-
<div
127-
className={`${isOnAction ? "text-3xl/[34px]" : "text-5xl/[39px]"} font-modern-era-bold`}
128-
>
129-
{heading}
130-
</div>
131-
<div
132-
className={`${isOnAction ? "text-[16px]/[26px]" : "text-[20px]/[26px]"} font-modern-era-regular`}
133-
>
134-
{subheading}
135-
</div>
136-
</div>
137154
{status === ProgressStatus.SELECTING_COLOR ? (
138155
<PreviewFrameHistoryPage
139156
selectBackground={selectBackground as () => void}
@@ -148,6 +165,7 @@ export function MintProgressModalBodyHistory(
148165
impactImageCid={impactImageCid as string}
149166
attestationLink={attestationLink ?? ""}
150167
isShareButtonsAbove={false}
168+
imageSize="size-[288px] sm:size-[400px]"
151169
/>
152170
) : (
153171
<MintingProcessContent
@@ -163,6 +181,6 @@ export function MintProgressModalBodyHistory(
163181
attestationFee={attestationFee}
164182
/>
165183
)}
166-
</div>
184+
</MintProgressModalBody>
167185
);
168186
}

‎packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -92,44 +92,41 @@ export const PreviewFrameHistoryPage = ({
9292
selectedColor: string;
9393
}) => {
9494
const { defaultColor, colorMapper } = useColorAndBackground();
95-
9695
return (
97-
<div className="flex flex-col items-center gap-6">
98-
<div
99-
className="flex flex-col w-auto items-center relative rounded-3xl"
100-
style={{
101-
backgroundImage: `url(${previewBackground})`,
102-
backgroundSize: "cover",
103-
backgroundPosition: "center",
104-
backgroundRepeat: "no-repeat",
105-
width: "400px",
106-
height: "400px",
107-
}}
108-
></div>
96+
<div className="flex flex-col items-center gap-2 sm:gap-6">
97+
<img
98+
className="w-full max-w-[400px] min-w-[287px]"
99+
src={previewBackground}
100+
alt="preview"
101+
/>
109102
<div className="flex flex-wrap items-center space-x-2 z-30">
110103
<div className="text-lg font-modern-era-regular">Pick your color</div>
111-
{Object.keys(colorMapper).map((key, index) => (
112-
<div
113-
key={index}
114-
onClick={() => selectBackground(key)}
115-
className={`w-5 h-5 rounded-full cursor-pointer ${
116-
selectedColor === key ? "border-1 border-black" : ""
117-
}`}
118-
style={{
119-
backgroundColor:
120-
selectedColor === key
104+
{Object.keys(colorMapper).map((key, index) => {
105+
const isSelected = selectedColor === index.toString();
106+
return (
107+
<div
108+
key={index}
109+
onClick={() => selectBackground(key)}
110+
className={`size-5 rounded-full cursor-pointer ${
111+
isSelected
112+
? "border border-[#555555] bg-[${colorMapper[key as unknown as keyof typeof colorMapper]}]"
113+
: `bg-[${defaultColor}]`
114+
}`}
115+
style={{
116+
backgroundColor: isSelected
121117
? colorMapper[key as unknown as keyof typeof colorMapper]
122118
: defaultColor,
123-
}}
124-
/>
125-
))}
119+
}}
120+
/>
121+
);
122+
})}
126123
</div>
127124
<div
128125
className={`flex align-center justify-center border-[1px] rounded-[8px] bg-rainbow-gradient border-transparent`}
129126
>
130127
<Button
131128
type="button"
132-
className={`px-4 py-1 rounded-[8px] bg-white font-medium font-mono text-base text-black h-8 whitespace-nowrap border-transparent hover:shadow-md`}
129+
className={`px-4 py-1 rounded-[8px] bg-white font-medium font-mono text-base text-black h-12 sm:h-8 whitespace-nowrap border-transparent hover:shadow-md`}
133130
onClick={nextStep}
134131
data-testid="mint-donation-button"
135132
>

‎packages/grant-explorer/src/features/attestations/components/MintingProcessContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const MintingProcessContent = ({
3030
isLoading: boolean;
3131
attestationFee: bigint;
3232
}) => (
33-
<div className="flex flex-col gap-6 items-start justify-center w-[405px]">
33+
<div className="flex flex-col gap-6 items-start justify-center w-full">
3434
{status === ProgressStatus.IS_ERROR && <ErrorMessage />}
3535

3636
<BalanceDisplay balance={balance} notEnoughFunds={notEnoughFunds} />

‎packages/grant-explorer/src/features/common/components/Modal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function Modal({
2323
<Transition.Root show={isOpen} as={Fragment}>
2424
<Dialog
2525
as="div"
26-
className="fixed inset-0 z-40 flex items-center justify-center overflow-y-auto m-10"
26+
className="fixed inset-0 z-40 flex items-center justify-center mx-5 sm:mx-10"
2727
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
2828
onClose={onClose}
2929
>
@@ -49,7 +49,7 @@ export default function Modal({
4949
leaveTo="opacity-0 scale-95"
5050
>
5151
<Dialog.Panel
52-
className={`relative bg-white rounded-3xl text-left shadow-xl transform transition-all overflow-x-auto overflow-y-auto ${padding ? padding : "p-10"}`}
52+
className={`relative bg-white rounded-3xl text-left shadow-xl transform transition-all overflow-x-auto ${padding ? padding : "p-10"}`}
5353
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
5454
>
5555
{showCloseButton && (
@@ -66,7 +66,7 @@ export default function Modal({
6666
<CloseIcon className="size-5" />
6767
</button>
6868
)}
69-
{children}
69+
<div className="max-h-[90vh] overflow-y-auto">{children}</div>
7070
</Dialog.Panel>
7171
</Transition.Child>
7272
</Dialog>

0 commit comments

Comments
 (0)