update: styling and layout

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

@@ -1,10 +1,11 @@
 import type { WorksheetProperties } from "@ironcalc/wasm";
-import { Box, IconButton, MenuItem, TextField, styled } from "@mui/material";
+import { Box, MenuItem, TextField, styled } from "@mui/material";
 import { t } from "i18next";
-import { Check, X } from "lucide-react";
+import { Check, Tag } from "lucide-react";
 import { useState } from "react";
 import type React from "react";
 import { theme } from "../../../theme";
+import { Footer, NewButton } from "./NamedRanges";
 
 interface EditNamedRangeProps {
   worksheets: WorksheetProperties[];
@@ -31,14 +32,22 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
   return (
     <Container>
       <ContentArea>
+        <HeaderBox>
+          <HeaderIcon>
+            <Tag />
+          </HeaderIcon>
+          <HeaderBoxText>{name || "New Named Range"}</HeaderBoxText>
+        </HeaderBox>
         <StyledBox>
           <FieldWrapper>
             <StyledLabel htmlFor="name">Range name</StyledLabel>
             <StyledTextField
+              autoFocus={true}
               id="name"
               variant="outlined"
               size="small"
               margin="none"
+              placeholder="Enter range name"
               fullWidth
               error={formulaError}
               value={name}
@@ -74,6 +83,9 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
                 </MenuItem>
               ))}
             </StyledTextField>
+            <StyledHelperText>
+              The scope of the named range determines where it is available.
+            </StyledHelperText>
           </FieldWrapper>
           <FieldWrapper>
             <StyledLabel htmlFor="formula">Refers to</StyledLabel>
@@ -83,6 +95,8 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
               size="small"
               margin="none"
               fullWidth
+              multiline
+              rows={3}
               error={formulaError}
               value={formula}
               onChange={(event) => setFormula(event.target.value)}
@@ -92,28 +106,31 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
               onClick={(event) => event.stopPropagation()}
             />
           </FieldWrapper>
+          <FieldWrapper></FieldWrapper>
         </StyledBox>
       </ContentArea>
       <Footer>
-        <IconsWrapper>
-          <StyledIconButton
+        <NewButton
+          variant="contained"
+          color="secondary"
+          disableElevation
+          onClick={onCancel}
+        >
+          Cancel
+        </NewButton>
+        <NewButton
+          variant="contained"
+          disableElevation
+          startIcon={<Check size={16} />}
           onClick={() => {
             const error = onSave(name, scope, formula);
             if (error) {
               setFormulaError(true);
             }
           }}
-            title={t("name_manager_dialog.apply")}
         >
-            <StyledCheck size={16} />
-          </StyledIconButton>
-          <StyledIconButton
-            onClick={onCancel}
-            title={t("name_manager_dialog.discard")}
-          >
-            <X size={16} />
-          </StyledIconButton>
-        </IconsWrapper>
+          {t("name_manager_dialog.apply")}
+        </NewButton>
       </Footer>
     </Container>
   );
@@ -142,6 +159,43 @@ const MenuSpanGrey = styled("span")`
   color: ${theme.palette.grey[400]};
 `;
 
+const HeaderBox = styled(Box)`
+  font-size: 14px;
+  font-family: "Inter";
+  font-weight: 600;
+  width: auto;
+  gap: 8px;
+  padding: 24px 12px;
+  color: ${theme.palette.text.primary};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  border-bottom: 1px solid ${theme.palette.grey["200"]};
+  `;
+
+const HeaderBoxText = styled("span")`
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  `;
+
+const HeaderIcon = styled(Box)`
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  background-color: ${theme.palette.grey["100"]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 16px;
+    height: 16px;
+    color: ${theme.palette.grey["600"]};
+  }
+`;
+
 const StyledBox = styled(Box)`
   display: flex;
   flex-direction: column;
@@ -157,7 +211,6 @@ const StyledBox = styled(Box)`
 
 const StyledTextField = styled(TextField)(() => ({
   "& .MuiInputBase-root": {
-    height: "36px",
     width: "100%",
     margin: 0,
     fontFamily: "Inter",
@@ -166,38 +219,11 @@ const StyledTextField = styled(TextField)(() => ({
   "& .MuiInputBase-input": {
     padding: "8px",
   },
-}));
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.error.main,
-  borderRadius: "8px",
-  "&:hover": {
-    backgroundColor: theme.palette.grey["50"],
-  },
-  "&.Mui-disabled": {
-    opacity: 0.6,
-    color: theme.palette.error.light,
+  "& .MuiInputBase-inputMultiline": {
+    padding: "0px",
   },
 }));
 
-const StyledCheck = styled(Check)(({ theme }) => ({
-  color: theme.palette.success.main,
-}));
-
-const Footer = styled("div")`
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  font-size: 12px;
-  color: ${theme.palette.grey["600"]};
-  border-top: 1px solid ${theme.palette.grey["300"]};
-`;
-
-const IconsWrapper = styled(Box)({
-  display: "flex",
-});
-
 const FieldWrapper = styled(Box)`
   display: flex;
   flex-direction: column;
@@ -213,4 +239,12 @@ const StyledLabel = styled("label")`
   display: block;
 `;
 
+const StyledHelperText = styled("p")`
+  font-size: 10px;
+  font-family: "Inter";
+  color: ${theme.palette.grey[400]};
+  margin: 0;
+  line-height: 1.25;
+`;
+
 export default EditNamedRange;

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

@@ -1,7 +1,7 @@
 import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
 import { Button, Tooltip, styled } from "@mui/material";
 import { t } from "i18next";
-import { BookOpen, ChevronRight, Plus } from "lucide-react";
+import { BookOpen, Plus } from "lucide-react";
 import { useState } from "react";
 import { theme } from "../../../theme";
 import EditNamedRange from "./EditNamedRange";
@@ -140,9 +140,9 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
                   tabIndex={0}
                 >
                   <ListItemText>
-                    <ScopeText>{scopeName}</ScopeText>
-                    <ChevronRightStyled />
                     <NameText>{definedName.name}</NameText>
+                    <ScopeText>{scopeName}</ScopeText>
+                    <FormulaText>{definedName.formula}</FormulaText>
                   </ListItemText>
                 </ListItem>
               );
@@ -218,8 +218,9 @@ const ListItemText = styled("div")({
   fontFamily: theme.typography.fontFamily,
   flex: 1,
   display: "flex",
-  alignItems: "center",
-  gap: "4px",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: "2px",
 });
 
 const ScopeText = styled("span")({
@@ -227,18 +228,18 @@ const ScopeText = styled("span")({
   color: theme.palette.common.black,
 });
 
-const ChevronRightStyled = styled(ChevronRight)({
-  width: "12px",
-  height: "12px",
-  color: theme.palette.grey[500],
+const FormulaText = styled("span")({
+  fontSize: "12px",
+  color: theme.palette.grey[600],
 });
 
 const NameText = styled("span")({
   fontSize: "12px",
   color: theme.palette.common.black,
+  fontWeight: 600,
 });
 
-const Footer = styled("div")`
+export const Footer = styled("div")`
   padding: 8px;
   display: flex;
   align-items: center;
@@ -246,6 +247,7 @@ const Footer = styled("div")`
   font-size: 12px;
   color: ${theme.palette.grey["600"]};
   border-top: 1px solid ${theme.palette.grey["300"]};
+  gap: 8px;
 `;
 
 const HelpLink = styled("a")`
@@ -267,10 +269,17 @@ const HelpLink = styled("a")`
   }
 `;
 
-const NewButton = styled(Button)`
+export const NewButton = styled(Button)`
   text-transform: none;
   min-width: fit-content;
   font-size: 12px;
+  &.MuiButton-colorSecondary {
+    background-color: ${theme.palette.grey[200]};
+    color: ${theme.palette.grey[700]};
+    &:hover {
+      background-color: ${theme.palette.grey[300]};
+    }
+  }
 `;
 
 export default NamedRanges;