update: populate drawer, styling

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

@@ -1,33 +1,51 @@
-import React from 'react';
+import { Button, Tooltip, styled } from "@mui/material";
-import Button from "@mui/material/Button";
+import { t } from "i18next";
-import { styled } from "@mui/material/styles";
+import { BookOpen, Plus } from "lucide-react";
+import type React from "react";
 import { theme } from "../../../theme";
 
 interface NamedRangesProps {
   title?: string;
-  // Add props as needed for your use case
 }
 
-const NamedRanges: React.FC<NamedRangesProps> = ({ title = "Named Ranges" }) => {
+const NamedRanges: React.FC<NamedRangesProps> = ({
+  title = "Named Ranges",
+}) => {
   return (
     <Container>
       <Content>
         <h3>{title}</h3>
-        <p>This is the Named Ranges component.</p>
-        <p>You can customize this content based on your specific needs.</p>
       </Content>
-      <Divider />
       <Footer>
-        <FooterButton variant="contained" color="primary">
+        <Tooltip
-          Save changes
+          title={t("name_manager_dialog.help")}
-        </FooterButton>
+          slotProps={{
+            popper: {
+              modifiers: [{ name: "offset", options: { offset: [0, -8] } }],
+            },
+          }}
+        >
+          <HelpLink
+            href="https://docs.ironcalc.com/web-application/name-manager.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <BookOpen />
+          </HelpLink>
+        </Tooltip>
+        <NewButton
+          variant="contained"
+          disableElevation
+          startIcon={<Plus size={16} />}
+        >
+          {t("name_manager_dialog.new")}
+        </NewButton>
       </Footer>
     </Container>
   );
 };
 
 const Container = styled("div")({
-  padding: "16px",
   height: "100%",
   display: "flex",
   flexDirection: "column",
@@ -43,24 +61,38 @@ const Content = styled("div")({
   },
 });
 
-const Divider = styled("div")({
+const Footer = styled("div")`
-  height: "1px",
+  padding: 8px;
-  width: "100%",
+  display: flex;
-  backgroundColor: theme.palette.grey[300],
+  align-items: center;
-  margin: "0",
+  justify-content: space-between;
-});
+  font-size: 12px;
+  color: ${theme.palette.grey["600"]};
+  border-top: 1px solid ${theme.palette.grey["300"]};
+`;
 
-const Footer = styled("div")({
+const HelpLink = styled("a")`
-  height: "40px",
+  display: flex;
-  display: "flex",
+  align-items: center;
-  alignItems: "center",
+  gap: 8px;
-  justifyContent: "flex-end",
+  font-size: 12px;
-  padding: "0 8px",
+  font-weight: 400;
-  flexShrink: 0,
+  font-family: "Inter";
-});
+  color: ${theme.palette.grey["600"]};
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+  svg {
+    width: 16px;
+    height: 16px;
+    color: ${theme.palette.grey["600"]};
+  }
+`;
 
-const FooterButton = styled(Button)({
+const NewButton = styled(Button)`
-  width: "100%",
+  text-transform: none;
-});
+  min-width: fit-content;
+`;
 
 export default NamedRanges;

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

@@ -1,5 +1,4 @@
 import Breadcrumbs from "@mui/material/Breadcrumbs";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import { styled } from "@mui/material/styles";
@@ -28,7 +27,7 @@ const RightDrawer = ({
   width = DEFAULT_DRAWER_WIDTH,
   children,
   showCloseButton = true,
-  title = "Right Drawer",
+  title = "Named Ranges",
 }: RightDrawerProps) => {
   if (!isOpen) return null;
 
@@ -39,7 +38,6 @@ const RightDrawer = ({
           <HeaderTitle>
             <HeaderBreadcrumbs separator="›">
               <HeaderBreadcrumbLink href="/">{title}</HeaderBreadcrumbLink>
-              <HeaderBreadcrumbLink href="/">Catalog</HeaderBreadcrumbLink>
             </HeaderBreadcrumbs>
           </HeaderTitle>
           <Tooltip
@@ -149,9 +147,8 @@ const Divider = styled("div")({
 
 const DrawerContent = styled("div")({
   flex: 1,
-  overflow: "auto",
+  height: "100%",
 });
 
-
 export default RightDrawer;
 export { DEFAULT_DRAWER_WIDTH };