web: minor ui changes and fixes

apps/web/src/app.tsx

@@ -163,7 +163,7 @@ function DesktopAppContents() {
               initialSize={isTablet ? 0 : 250}
               className={`nav-pane`}
               snapSize={200}
-              minSize={40}
+              minSize={50}
               maxSize={isTablet ? 0 : 500}
               style={{
                 overflow: "initial",

apps/web/src/components/editor/action-bar.tsx

@@ -272,9 +272,9 @@ const TabStrip = React.memo(function TabStrip() {
           variant="secondary"
           {...CREATE_BUTTON_MAP.notes}
           data-test-id={`create-new-note`}
-          sx={{ p: 1, bg: "transparent" }}
+          sx={{ p: 1, bg: "accent" }}
         >
-          <NoteAdd size={16} />
+          <NoteAdd size={16} color="accentForeground" />
         </Button>
         <Button
           disabled={!canGoBack}

apps/web/src/components/navigation-menu/index.tsx

@@ -221,7 +221,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
         borderRight: "1px solid var(--separator)",
         pt: 1,
         transition: "width 0.1s ease-in",
-        width: isNavPaneCollapsed ? (expanded ? 250 : 40) : "100%"
+        width: isNavPaneCollapsed ? (expanded ? 250 : 50) : "100%"
       }}
       onMouseEnter={() => {
         clearTimeout(mouseHoverTimeout.current);
@@ -298,8 +298,8 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
         sx={{
           justifyContent: isCollapsed ? "center" : "space-between",
           alignItems: "center",
-          borderTop: "1px solid var(--border)",
-          borderBottom: "1px solid var(--border)",
+          borderTop: "1px solid var(--separator)",
+          borderBottom: "1px solid var(--separator)",
           mt: 1,
           mb: 1,
           px: 1,
@@ -309,8 +309,9 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
         <Flex
           sx={{
             flexDirection: isCollapsed ? "column" : "row",
-            alignItems: "center",
-            gap: "small"
+            alignItems: isCollapsed ? "stretch" : "center",
+            gap: "small",
+            flex: 1
           }}
         >
           {tabs.map((tab) => (

apps/web/src/components/navigation-menu/navigation-item.tsx

@@ -78,7 +78,7 @@ function NavigationItem(
         ),
         borderRadius: "default",
         px: isCollapsed ? 1 : 2,
-        height: 25,
+        py: 1,
         alignItems: "center",
         position: "relative",
         ":focus": { bg: selected ? "hover-selected" : "hover" },
@@ -96,7 +96,7 @@ function NavigationItem(
           p: 0,
           flex: 1,
           alignItems: "center",
-          justifyContent: "flex-start",
+          justifyContent: isCollapsed ? "center" : "flex-start",
           display: "flex"
         }}
         onContextMenu={(e) => {
@@ -108,27 +108,28 @@ function NavigationItem(
       >
         {Icon ? (
           <Icon
-            size={14}
+            size={isCollapsed ? 16 : 14}
             color={color || (selected ? "icon-selected" : "icon")}
             rotate={isLoading}
           />
         ) : null}
 
-        <Text
-          variant="body"
-          sx={{
-            display: isCollapsed ? "none" : "block",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            fontWeight: "normal",
-            color: selected ? "paragraph-selected" : "paragraph"
-          }}
-          ml={1}
-          data-test-id="title"
-        >
-          {title}
-        </Text>
+        {isCollapsed ? null : (
+          <Text
+            variant="body"
+            sx={{
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              fontWeight: "normal",
+              color: selected ? "paragraph-selected" : "paragraph"
+            }}
+            ml={1}
+            data-test-id="title"
+          >
+            {title}
+          </Text>
+        )}
       </Button>
       {children && !isCollapsed ? children : null}
     </Flex>

apps/web/src/components/navigation-menu/tab-item.tsx

@@ -66,7 +66,7 @@ export function TabItem(props: TabItemProps & FlexProps) {
           p: 1,
           flex: 1,
           alignItems: "center",
-          justifyContent: "flex-start",
+          justifyContent: "center",
           display: "flex"
         }}
         title={title}

apps/web/src/dialogs/settings/index.tsx

@@ -334,7 +334,7 @@ function SettingsSideBar(props: SettingsSideBarProps) {
                 variant={"subBody"}
                 sx={{
                   fontWeight: "bold",
-                  color: "paragraph-secondary",
+                  color: "heading",
                   mb: 1,
                   ml: 1,
                   overflow: "hidden",