UPDATE: Better active states on Sheet Nav + Double click to rename sheets

webapp/src/components/SheetTabBar/SheetTab.tsx

@@ -1,6 +1,7 @@
 import { Button, Menu, MenuItem, styled } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
+import { theme } from "../../theme";
 import ColorPicker from "../colorPicker";
 import { isInReferenceMode } from "../editor/util";
 import type { WorkbookState } from "../workbookState";
@@ -38,8 +39,9 @@ function SheetTab(props: SheetTabProps) {
   };
   return (
     <>
-      <Wrapper
-        style={{ borderBottomColor: color, fontWeight: selected ? 600 : 400 }}
+      <TabWrapper
+        $color={color}
+        $selected={selected}
         onClick={(event) => {
           onSelected();
           event.stopPropagation();
@@ -55,11 +57,11 @@ function SheetTab(props: SheetTabProps) {
         }}
         ref={colorButton}
       >
-        <Name>{name}</Name>
+        <Name onDoubleClick={handleOpenRenameDialog}>{name}</Name>
         <StyledButton onClick={handleOpen}>
           <ChevronDown />
         </StyledButton>
-      </Wrapper>
+      </TabWrapper>
       <StyledMenu
         anchorEl={anchorEl}
         open={open}
@@ -146,16 +148,17 @@ const StyledMenuItem = styled(MenuItem)`
   height: 32px;
 `;
 
-const MenuItemWrapper = styled(MenuItem)`
+const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>`
   display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  width: calc(100% - 8px);
-  min-width: 172px;
-  margin: 0px 4px;
-  border-radius: 4px;
-  padding: 8px;
-  height: 32px;
+  margin-right: 12px;
+  border-bottom: 3px solid ${(props) => props.$color};
+  line-height: 37px;
+  padding: 0px 4px;
+  align-items: center;
+  cursor: pointer;
+  font-weight: ${(props) => (props.$selected ? 600 : 400)};
+  background-color: ${(props) =>
+    props.$selected ? `${theme.palette.grey[50]}80` : "transparent"};
 `;
 
 const StyledButton = styled(Button)`
@@ -165,26 +168,27 @@ const StyledButton = styled(Button)`
   padding: 0px;
   color: inherit;
   font-weight: inherit;
+  &:hover {
+    background-color: transparent;
+  }
+  &:active {
+    background-color: transparent;
+  }
   svg {
     width: 15px;
     height: 15px;
+    transition: transform 0.2s;
+  }
+  &:hover svg {
+    transform: translateY(2px);
   }
-`;
-
-const Wrapper = styled("div")`
-  display: flex;
-  margin-left: 20px;
-  border-bottom: 3px solid;
-  border-top: 3px solid white;
-  line-height: 34px;
-  align-items: center;
-  cursor: pointer;
 `;
 
 const Name = styled("div")`
   font-size: 12px;
   margin-right: 5px;
   text-wrap: nowrap;
+  user-select: none;
 `;
 
 export default SheetTab;

webapp/src/components/SheetTabBar/SheetTabBar.tsx

@@ -35,20 +35,23 @@ function SheetTabBar(props: SheetTabBarProps) {
 
   return (
     <Container>
-      <StyledButton
-        title={t("navigation.add_sheet")}
-        $pressed={false}
-        onClick={props.onAddBlankSheet}
-      >
-        <Plus />
-      </StyledButton>
-      <StyledButton
-        onClick={handleClick}
-        title={t("navigation.sheet_list")}
-        $pressed={false}
-      >
-        <Menu />
-      </StyledButton>
+      <LeftButtonsContainer>
+        <StyledButton
+          title={t("navigation.add_sheet")}
+          $pressed={false}
+          onClick={props.onAddBlankSheet}
+        >
+          <Plus />
+        </StyledButton>
+        <StyledButton
+          onClick={handleClick}
+          title={t("navigation.sheet_list")}
+          $pressed={false}
+        >
+          <Menu />
+        </StyledButton>
+      </LeftButtonsContainer>
+      <VerticalDivider />
       <Sheets>
         <SheetInner>
           {sheets.map((tab, index) => (
@@ -92,6 +95,8 @@ function SheetTabBar(props: SheetTabBarProps) {
 
 // Note I have to specify the font-family in every component that can be considered stand-alone
 const Container = styled("div")`
+  display: flex;
+  flex-direction: row;
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -99,10 +104,10 @@ const Container = styled("div")`
   display: flex;
   height: ${NAVIGATION_HEIGHT}px;
   align-items: center;
-  padding-left: 12px;
+  padding: 0px 12px;
   font-family: Inter;
-  background-color: #fff;
-  border-top: 1px solid #e0e0e0;
+  background-color: ${theme.palette.common.white};
+  border-top: 1px solid ${theme.palette.grey["300"]};
 `;
 
 const Sheets = styled("div")`
@@ -110,6 +115,9 @@ const Sheets = styled("div")`
   overflow: hidden;
   overflow-x: auto;
   scrollbar-width: none;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: row;
 `;
 
 const SheetInner = styled("div")`
@@ -119,8 +127,8 @@ const SheetInner = styled("div")`
 const Advert = styled("a")`
   display: flex;
   align-items: center;
-  color: #f2994a;
-  padding: 0px 12px;
+  color: ${theme.palette.primary.main};
+  padding: 0px 0px 0px 12px;
   font-size: 12px;
   text-decoration: none;
   border-left: 1px solid ${theme.palette.grey["300"]};
@@ -133,4 +141,19 @@ const Advert = styled("a")`
   }
 `;
 
+const LeftButtonsContainer = styled("div")`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  padding-right: 12px;
+`;
+
+const VerticalDivider = styled("div")`
+  height: 100%;
+  width: 0px;
+  @media (max-width: 769px) {
+    border-right: 1px solid ${theme.palette.grey["200"]};
+  }
+`;
+
 export default SheetTabBar;