From b59377f9bd282ca8cbb1d5224db7c5294d760a1e Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 3 Mar 2025 12:48:50 +0500
Subject: [PATCH] web: minor ui changes and fixes

---
 apps/web/src/app.tsx                          |  2 +-
 apps/web/src/components/editor/action-bar.tsx |  4 +-
 .../src/components/navigation-menu/index.tsx  | 11 +++---
 .../navigation-menu/navigation-item.tsx       | 37 ++++++++++---------
 .../components/navigation-menu/tab-item.tsx   |  2 +-
 apps/web/src/dialogs/settings/index.tsx       |  2 +-
 6 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index 854574ccb..1626b6c83 100644
--- a/apps/web/src/app.tsx
+++ b/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",
diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx
index dee87bc56..8946cf6f8 100644
--- a/apps/web/src/components/editor/action-bar.tsx
+++ b/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}
diff --git a/apps/web/src/components/navigation-menu/index.tsx b/apps/web/src/components/navigation-menu/index.tsx
index 6a8c38345..30e96fabd 100644
--- a/apps/web/src/components/navigation-menu/index.tsx
+++ b/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) => (
diff --git a/apps/web/src/components/navigation-menu/navigation-item.tsx b/apps/web/src/components/navigation-menu/navigation-item.tsx
index b38f0c71c..d4353e938 100644
--- a/apps/web/src/components/navigation-menu/navigation-item.tsx
+++ b/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>
diff --git a/apps/web/src/components/navigation-menu/tab-item.tsx b/apps/web/src/components/navigation-menu/tab-item.tsx
index 94a8055c7..e007bc64f 100644
--- a/apps/web/src/components/navigation-menu/tab-item.tsx
+++ b/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}
diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx
index aa592c050..eea1b2bc8 100644
--- a/apps/web/src/dialogs/settings/index.tsx
+++ b/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",