Skip to content

Commit 477fdef

Browse files
ChetanFTWChetanFTW
committed
Fix: overflow_cards #6952
Signed-off-by: ChetanFTW <devchetan42@gmail.com>
1 parent 142f58d commit 477fdef

1 file changed

Lines changed: 47 additions & 90 deletions

File tree

‎src/sections/Pricing/index.js‎

Lines changed: 47 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useState } from "react";
22
import PricingWrapper from "./pricing.style";
33
import Comparison from "./comparison";
44
import FAQ from "../General/Faq";
@@ -42,101 +42,58 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
4242
});
4343

4444
export const CurrencySelect = ({ currency, setCurrency }) => {
45-
const [open, setOpen] = useState(false);
46-
47-
// Lock both <html> and <body> while the dropdown is open
48-
useEffect(() => {
49-
if (!open) return;
50-
const prevBody = document.body.style.overflow;
51-
const prevHtml = document.documentElement.style.overflow;
52-
document.body.style.overflow = "hidden";
53-
document.documentElement.style.overflow = "hidden";
54-
return () => {
55-
document.body.style.overflow = prevBody;
56-
document.documentElement.style.overflow = prevHtml;
57-
};
58-
}, [open]);
59-
60-
const handleClose = () => setOpen(false);
61-
const handleOpen = () => setOpen(true);
62-
6345
return (
64-
<>
65-
{/* Transparent overlay: blocks the page & closes on outside click */}
66-
{open && (
67-
<Box
68-
onMouseDown={handleClose}
69-
onTouchStart={handleClose}
70-
sx={{
71-
position: "fixed",
72-
inset: 0,
73-
zIndex: 1299, // below MUI Menu (paper is set to 1301)
74-
}}
75-
/>
76-
)}
77-
78-
<FormControl
79-
variant="outlined"
80-
size="small"
81-
sx={{
82-
minWidth: 150,
83-
"& .MuiInputLabel-root": {
84-
color: "white",
85-
"&.Mui-focused": { color: "#00B39F" },
86-
},
87-
"& .MuiOutlinedInput-root": {
88-
color: "white",
89-
"& .MuiSelect-icon": { color: "white" },
90-
"& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
91-
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
92-
borderColor: "#00B39F",
93-
},
46+
<FormControl
47+
variant="outlined"
48+
size="small"
49+
sx={{
50+
minWidth: 150,
51+
"& .MuiInputLabel-root": {
52+
color: "white",
53+
"&.Mui-focused": { color: "#00B39F" },
54+
},
55+
"& .MuiOutlinedInput-root": {
56+
color: "white",
57+
"& .MuiSelect-icon": { color: "white" },
58+
"& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
59+
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
60+
borderColor: "#00B39F",
9461
},
95-
"&:hover": {
96-
"& .MuiInputLabel-root": { color: "#00B39F" },
97-
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
98-
borderColor: "#00B39F",
99-
borderWidth: "2px",
100-
},
62+
},
63+
"&:hover": {
64+
"& .MuiInputLabel-root": { color: "#00B39F" },
65+
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
66+
borderColor: "#00B39F",
67+
borderWidth: "2px",
10168
},
69+
},
70+
}}
71+
>
72+
<InputLabel id="currency-selector-label">Currency</InputLabel>
73+
<Select
74+
labelId="currency-selector-label"
75+
value={currency}
76+
onChange={(e) => {
77+
setCurrency(e.target.value);
10278
}}
79+
label="Currency"
80+
renderValue={(value) => (
81+
<Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
82+
<Typography variant="body1">{Currencies[value]?.symbol}</Typography>
83+
<Typography variant="body2">{Currencies[value]?.name}</Typography>
84+
</Box>
85+
)}
10386
>
104-
<InputLabel id="currency-selector-label">Currency</InputLabel>
105-
<Select
106-
labelId="currency-selector-label"
107-
value={currency}
108-
label="Currency"
109-
open={open}
110-
onOpen={handleOpen}
111-
onClose={handleClose}
112-
onChange={(e) => {
113-
setCurrency(e.target.value);
114-
handleClose();
115-
}}
116-
MenuProps={{
117-
disableScrollLock: false,
118-
keepMounted: true,
119-
PaperProps: { sx: { zIndex: 1301 } }, // ensure menu is above overlay
120-
ModalProps: { keepMounted: true, disableScrollLock: false },
121-
}}
122-
renderValue={(value) => (
123-
<Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
124-
<Typography variant="body1">{Currencies[value]?.symbol}</Typography>
125-
<Typography variant="body2">{Currencies[value]?.name}</Typography>
87+
{Object.entries(Currencies).map(([code, { symbol, name }]) => (
88+
<MenuItem key={code} value={code}>
89+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
90+
<Typography variant="body1">{symbol}</Typography>
91+
<Typography variant="body2">{name}</Typography>
12692
</Box>
127-
)}
128-
>
129-
{Object.entries(Currencies).map(([code, { symbol, name }]) => (
130-
<MenuItem key={code} value={code}>
131-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
132-
<Typography variant="body1">{symbol}</Typography>
133-
<Typography variant="body2">{name}</Typography>
134-
</Box>
135-
</MenuItem>
136-
))}
137-
</Select>
138-
</FormControl>
139-
</>
93+
</MenuItem>
94+
))}
95+
</Select>
96+
</FormControl>
14097
);
14198
};
14299

0 commit comments

Comments
 (0)