web: fix various colors

apps/web/src/app.tsx

@@ -178,7 +178,7 @@ function DesktopAppContents({
                 flexDirection: "column",
                 flex: 1,
                 bg: "background",
-                borderRight: "1px solid var(--border)"
+                borderRight: "1px solid var(--separator)"
               }}
             >
               {isAppLoaded && <CachedRouter />}

apps/web/src/components/list-container/index.tsx

@@ -159,10 +159,9 @@ function ListContainer(props: ListContainerProps) {
               onKeyDown={(e) => onKeyDown(e.nativeEvent)}
               components={{
                 Scroller: CustomScrollbarsVirtualList,
-                Item: (props) => (
+                Item: ({ item: _item, ...props }) => (
                   <div
                     {...props}
-                    style={{ paddingBottom: 1 }}
                     onFocus={() => onFocus(props["data-item-index"])}
                     onMouseDown={(e) =>
                       onMouseDown(e.nativeEvent, props["data-item-index"])

apps/web/src/components/list-item/index.tsx

@@ -76,6 +76,7 @@ function ListItem(props: ListItemProps) {
       ? store.selectedItems.length > 1 && isInSelection
       : isInSelection;
   });
+  const selected = isSelected || isMenuTarget || isFocused;
 
   return (
     <Flex
@@ -112,7 +113,7 @@ function ListItem(props: ListItemProps) {
       pl={1}
       pr={2}
       py={1}
-      mb={isCompact ? 0 : 1}
+      mb={isCompact ? 0 : 0}
       tabIndex={-1}
       dir="auto"
       sx={{
@@ -130,24 +131,20 @@ function ListItem(props: ListItemProps) {
 
         borderLeft: "5px solid",
         borderLeftColor: isFocused ? accent : "transparent",
-        ml: "2px",
-        mr: "1px",
 
-        backgroundColor:
-          isSelected || isMenuTarget || isFocused
-            ? "background-selected"
-            : background,
+        backgroundColor: selected ? "background-selected" : background,
 
         ":hover": {
-          backgroundColor: isSelected ? "hover-selected" : "hover"
+          backgroundColor: selected ? "hover-selected" : "hover"
         },
         ":focus": {
-          backgroundColor: isSelected ? "hover-selected" : "hover"
+          backgroundColor: selected ? "hover-selected" : "hover"
         },
         ":focus-visible": {
           outline: `1px solid`,
           outlineColor: accent === "accent" ? "accent" : alpha("accent", 0.7),
-          backgroundColor: isSelected ? "background-selected" : background
+          backgroundColor:
+            isSelected || isFocused ? "background-selected" : background
         }
       }}
       onKeyPress={(e) => {
@@ -172,7 +169,8 @@ function ListItem(props: ListItemProps) {
           overflow: "hidden",
           textOverflow: "ellipsis",
           fontWeight: isCompact || isSimple ? "body" : "bold",
-          color: heading,
+          color:
+            selected && heading === "heading" ? `${heading}-selected` : heading,
           display: "block"
         }}
       >
@@ -185,6 +183,7 @@ function ListItem(props: ListItemProps) {
           variant="body"
           data-test-id={`description`}
           sx={{
+            color: selected ? "paragraph-selected" : "paragraph",
             lineHeight: `1.2rem`,
             overflow: "hidden",
             textOverflow: "ellipsis",

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

@@ -141,7 +141,19 @@ function NavigationMenu(props: NavigationMenuProps) {
   }, [location, previousLocation, state]);
 
   return (
-    <ScopedThemeProvider scope="navigationMenu" injectCssVars={false}>
+    <ScopedThemeProvider
+      scope="navigationMenu"
+      sx={{
+        display: "flex",
+        zIndex: 1,
+        position: "relative",
+        flex: 1,
+        height: "100%",
+        overflow: "hidden",
+        bg: "background",
+        borderRight: "1px solid var(--separator)"
+      }}
+    >
       <AnimatedFlex
         id="navigation-menu"
         data-test-id="navigation-menu"
@@ -154,15 +166,9 @@ function NavigationMenu(props: NavigationMenuProps) {
         }}
         transition={{ duration: 0.2, ease: "easeInOut" }}
         sx={{
-          zIndex: 1,
-          position: "relative",
-          flex: 1,
-          height: "100%",
           overflow: "hidden",
           flexDirection: "column",
-          justifyContent: "space-between",
-          bg: "background",
-          borderRight: "1px solid var(--border)"
+          justifyContent: "space-between"
         }}
         px={0}
       >

apps/web/src/components/note/index.tsx

@@ -179,7 +179,7 @@ function Note(props: NoteProps) {
         <Flex
           sx={{
             fontSize: "subBody",
-            color: "var(--paragraph-secondary)",
+            color: "paragraph-secondary",
             alignItems: "center",
             gap: 1
           }}

apps/web/src/components/status-bar/index.tsx

@@ -56,7 +56,7 @@ function StatusBar() {
       bg="background"
       sx={{
         borderTop: "1px solid",
-        borderTopColor: "border",
+        borderTopColor: "separator",
         justifyContent: "space-between",
         display: ["none", "none", "flex"]
       }}