style: adjustments in scope select

webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx

@@ -1,5 +1,14 @@
 import type { WorksheetProperties } from "@ironcalc/wasm";
-import { Box, MenuItem, TextField, styled } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  FormHelperText,
+  MenuItem,
+  Paper,
+  Select,
+  TextField,
+  styled,
+} from "@mui/material";
 import { t } from "i18next";
 import { Check, Tag } from "lucide-react";
 import { useState } from "react";
@@ -29,6 +38,8 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
   const [formula, setFormula] = useState(initialFormula);
   const [formulaError, setFormulaError] = useState(false);
 
+  const isSelected = (value: string) => scope === value;
+
   return (
     <Container>
       <ContentArea>
@@ -66,32 +77,63 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
             <StyledLabel htmlFor="scope">
               {t("name_manager_dialog.scope_label")}
             </StyledLabel>
-            <StyledTextField
+            <FormControl fullWidth size="small" error={formulaError}>
-              id="scope"
+              <StyledSelect
-              variant="outlined"
+                id="scope"
-              select
+                value={scope}
-              size="small"
+                onChange={(event) => {
-              margin="none"
+                  setScope(event.target.value as string);
-              fullWidth
+                }}
-              error={formulaError}
+                renderValue={(value: unknown) => {
-              value={scope}
+                  const stringValue = value as string;
-              onChange={(event) => {
+                  return stringValue === "[Global]" ? (
-                setScope(event.target.value);
+                    <>
-              }}
+                      <MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
-            >
+                      <MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
-              <MenuItem value={"[Global]"}>
+                    </>
-                <MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
+                  ) : (
-                <MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
+                    stringValue
-              </MenuItem>
+                  );
-              {worksheets.map((option) => (
+                }}
-                <MenuItem key={option.name} value={option.name}>
+                MenuProps={{
-                  <MenuSpan>{option.name}</MenuSpan>
+                  PaperProps: {
-                </MenuItem>
+                    component: StyledMenuPaper,
-              ))}
+                  },
-            </StyledTextField>
+                  anchorOrigin: {
-            <StyledHelperText>
+                    vertical: "bottom",
-              {t("name_manager_dialog.scope_helper")}
+                    horizontal: "center",
-            </StyledHelperText>
+                  },
+                  transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                  },
+                  marginThreshold: 0,
+                }}
+              >
+                <StyledMenuItem value={"[Global]"}>
+                  {isSelected("[Global]") ? <CheckIcon /> : <IconPlaceholder />}
+                  <MenuSpan $selected={isSelected("[Global]")}>
+                    {t("name_manager_dialog.workbook")}
+                  </MenuSpan>
+                  <MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
+                </StyledMenuItem>
+                {worksheets.map((option) => (
+                  <StyledMenuItem key={option.name} value={option.name}>
+                    {isSelected(option.name) ? (
+                      <CheckIcon />
+                    ) : (
+                      <IconPlaceholder />
+                    )}
+                    <MenuSpan $selected={isSelected(option.name)}>
+                      {option.name}
+                    </MenuSpan>
+                  </StyledMenuItem>
+                ))}
+              </StyledSelect>
+              <StyledHelperText>
+                {t("name_manager_dialog.scope_helper")}
+              </StyledHelperText>
+            </FormControl>
           </FieldWrapper>
           <FieldWrapper>
             <StyledLabel htmlFor="formula">
@@ -154,9 +196,10 @@ const ContentArea = styled("div")({
   overflow: "auto",
 });
 
-const MenuSpan = styled("span")`
+const MenuSpan = styled("span")<{ $selected?: boolean }>`
   font-size: 12px;
   font-family: "Inter";
+  font-weight: ${(props) => (props.$selected ? "bold" : "normal")};
 `;
 
 const MenuSpanGrey = styled("span")`
@@ -166,6 +209,16 @@ const MenuSpanGrey = styled("span")`
   color: ${theme.palette.grey[400]};
 `;
 
+const CheckIcon = () => (
+  <Check style={{ width: "16px", height: "16px", marginRight: "8px" }} />
+);
+
+const IconPlaceholder = styled("div")`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+`;
+
 const HeaderBox = styled(Box)`
   font-size: 14px;
   font-family: "Inter";
@@ -222,15 +275,54 @@ const StyledTextField = styled(TextField)(() => ({
     margin: 0,
     fontFamily: "Inter",
     fontSize: "12px",
+    padding: "8px",
   },
   "& .MuiInputBase-input": {
-    padding: "8px",
+    padding: "0px",
   },
   "& .MuiInputBase-inputMultiline": {
     padding: "0px",
   },
 }));
 
+const StyledSelect = styled(Select)(() => ({
+  fontFamily: "Inter",
+  fontSize: "12px",
+  "& .MuiSelect-select": {
+    padding: "8px",
+  },
+}));
+
+const StyledMenuPaper = styled(Paper)(() => ({
+  padding: 4,
+  marginTop: "4px",
+  "&.MuiPaper-root": {
+    borderRadius: "8px",
+  },
+  "& .MuiList-padding": {
+    padding: 0,
+  },
+  "& .MuiList-root": {
+    padding: 0,
+  },
+}));
+
+const StyledMenuItem = styled(MenuItem)(() => ({
+  padding: 8,
+  borderRadius: 4,
+  display: "flex",
+  alignItems: "center",
+  "&.Mui-selected": {
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: theme.palette.grey[50],
+    },
+  },
+  "&:hover": {
+    backgroundColor: theme.palette.grey[50],
+  },
+}));
+
 const FieldWrapper = styled(Box)`
   display: flex;
   flex-direction: column;
@@ -246,12 +338,20 @@ const StyledLabel = styled("label")`
   display: block;
 `;
 
-const StyledHelperText = styled("p")`
+const StyledHelperText = styled(FormHelperText)(() => ({
-  font-size: 12px;
+  fontSize: "12px",
-  font-family: "Inter";
+  fontFamily: "Inter",
-  color: ${theme.palette.grey[500]};
+  color: theme.palette.grey[500],
-  margin: 0;
+  margin: 0,
-  line-height: 1.25;
+  marginLeft: 0,
-`;
+  marginRight: 0,
+  padding: 0,
+  lineHeight: 1.4,
+  "&.MuiFormHelperText-root": {
+    marginTop: "6px",
+    marginLeft: 0,
+    marginRight: 0,
+  },
+}));
 
 export default EditNamedRange;