Merge pull request #6911 from Namanv0509/currency-switcher

fix currency switcher styling

Author: Namanv0509

src/sections/Pricing/index.js

@@ -45,49 +45,56 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
 export const CurrencySelect = ({ currency, setCurrency }) => {
   return (
     <FormControl
-      variant="outlined"
-      size="small"
-      sx={{
-        minWidth: 150,
-        "& .MuiInputLabel-root": { color: "white" },
-        "& .MuiInputLabel-root.Mui-focused": { color: "#00B39F" },
-        "& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
-        "& .MuiSelect-icon": { color: "white" },
-        "& .MuiSelect-select": { color: "white" },
-        "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
-      }}
-    >
-      <InputLabel>Currency</InputLabel>
-      <Select
-        value={currency}
-        sx={{
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#00B39F",
-          },
-        }}
-        onChange={(e) => setCurrency(e.target.value)}
-        label="Currency"
-        renderValue={(value) => (
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
-            <Typography variant="body1">{Currencies[value].symbol}</Typography>
-            <Typography variant="body2" >
-              {Currencies[value].name}
-            </Typography>
-          </Box>
-        )}
-      >
-        {Object.entries(Currencies).map(([code, { symbol, name }]) => (
-          <MenuItem key={code} value={code}>
-            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-              <Typography variant="body1">{symbol}</Typography>
-              <Typography variant="body2" >
-                {name}
-              </Typography>
-            </Box>
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
+  variant="outlined"
+  size="small"
+  sx={{
+    minWidth: 150,
+    "& .MuiInputLabel-root": {
+      color: "white",
+      "&.Mui-focused": { color: "#00B39F" },
+    },
+    "& .MuiOutlinedInput-root": {
+      color: "white",
+      "& .MuiSelect-icon": { color: "white" },
+      "& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#00B39F",
+      },
+    },
+    "&:hover": {
+      "& .MuiInputLabel-root": { color: "#00B39F" },
+      "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#00B39F",
+        borderWidth: "2px",
+      },
+    },
+  }}
+>
+  <InputLabel id="currency-selector-label">Currency</InputLabel>
+  <Select
+    labelId="currency-selector-label"
+    value={currency}
+    onChange={(e) => {
+      setCurrency(e.target.value);
+    }}
+    label="Currency"
+    renderValue={(value) => (
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
+        <Typography variant="body1">{Currencies[value]?.symbol}</Typography>
+        <Typography variant="body2">{Currencies[value]?.name}</Typography>
+      </Box>
+    )}
+  >
+    {Object.entries(Currencies).map(([code, { symbol, name }]) => (
+      <MenuItem key={code} value={code}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Typography variant="body1">{symbol}</Typography>
+          <Typography variant="body2">{name}</Typography>
+        </Box>
+      </MenuItem>
+    ))}
+  </Select>
+</FormControl>
   );
 };