From bda7adc03303fa3c58c046d3dab6e41dfd287e1f Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 10 May 2024 09:00:44 +0530
Subject: [PATCH] fix room nav item selected styles

---
 src/app/components/nav/styles.css.ts      | 3 ---
 src/app/features/room-nav/RoomNavItem.tsx | 4 ++--
 src/app/pages/client/direct/Direct.tsx    | 2 +-
 src/app/pages/client/explore/Explore.tsx  | 6 +++---
 src/app/pages/client/home/Home.tsx        | 6 +++---
 src/app/pages/client/inbox/Inbox.tsx      | 4 ++--
 src/app/pages/client/space/Space.tsx      | 4 ++--
 7 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts
index 6504d11720..6205595cbf 100644
--- a/src/app/components/nav/styles.css.ts
+++ b/src/app/components/nav/styles.css.ts
@@ -115,9 +115,6 @@ export const NavItemContent = style({
       textDecoration: 'unset',
     },
     [`.${NavItemBase}[data-highlight=true] &`]: {
-      fontWeight: config.fontWeight.W500,
-    },
-    [`.${NavItemBase}[aria-selected=true] &`]: {
       fontWeight: config.fontWeight.W600,
     },
   },
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 8bcd5fa174..1e8510f938 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -194,7 +194,7 @@ export function RoomNavItem({
     <NavItem
       variant="Background"
       radii="400"
-      highlight={unread !== undefined || selected}
+      highlight={unread !== undefined}
       aria-selected={selected}
       data-hover={!!menuAnchor}
       onContextMenu={handleContextMenu}
@@ -202,7 +202,7 @@ export function RoomNavItem({
       {...focusWithinProps}
     >
       <NavLink to={linkPath}>
-        <NavItemContent size="T300">
+        <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
               {showAvatar ? (
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index f5b6ad9834..5e69c8ca45 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -113,7 +113,7 @@ export function Direct() {
                 <NavCategory>
                   <NavItem variant="Background" radii="400" aria-selected={createSelected}>
                     <NavLink to={getDirectCreatePath()}>
-                      <NavItemContent size="T300">
+                      <NavItemContent>
                         <Box as="span" grow="Yes" alignItems="Center" gap="200">
                           <Avatar size="200" radii="400">
                             <Icon src={Icons.Plus} size="100" filled={createSelected} />
diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx
index e80a4186d9..5d97e27133 100644
--- a/src/app/pages/client/explore/Explore.tsx
+++ b/src/app/pages/client/explore/Explore.tsx
@@ -187,7 +187,7 @@ export function Explore() {
               <NavCategory>
                 <NavItem variant="Background" radii="400" aria-selected={featuredSelected}>
                   <NavLink to={getExploreFeaturedPath()}>
-                    <NavItemContent size="T300">
+                    <NavItemContent>
                       <Box as="span" grow="Yes" alignItems="Center" gap="200">
                         <Avatar size="200" radii="400">
                           <Icon src={Icons.Bulb} size="100" filled={featuredSelected} />
@@ -208,7 +208,7 @@ export function Explore() {
                     aria-selected={selectedServer === userServer}
                   >
                     <NavLink to={getExploreServerPath(userServer)}>
-                      <NavItemContent size="T300">
+                      <NavItemContent>
                         <Box as="span" grow="Yes" alignItems="Center" gap="200">
                           <Avatar size="200" radii="400">
                             <Icon
@@ -243,7 +243,7 @@ export function Explore() {
                       aria-selected={server === selectedServer}
                     >
                       <NavLink to={getExploreServerPath(server)}>
-                        <NavItemContent size="T300">
+                        <NavItemContent>
                           <Box as="span" grow="Yes" alignItems="Center" gap="200">
                             <Avatar size="200" radii="400">
                               <Icon
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index b23bb73f61..266674e48a 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -143,7 +143,7 @@ export function Home() {
                 <NavCategory>
                   <NavItem variant="Background" radii="400" aria-selected={createSelected}>
                     <NavLink to={getHomeCreatePath()}>
-                      <NavItemContent size="T300">
+                      <NavItemContent>
                         <Box as="span" grow="Yes" alignItems="Center" gap="200">
                           <Avatar size="200" radii="400">
                             <Icon src={Icons.Plus} size="100" filled={createSelected} />
@@ -159,7 +159,7 @@ export function Home() {
                   </NavItem>
                   <NavItem variant="Background" radii="400" aria-selected={joinSelected}>
                     <NavLink to={getHomeJoinPath()}>
-                      <NavItemContent size="T300">
+                      <NavItemContent>
                         <Box as="span" grow="Yes" alignItems="Center" gap="200">
                           <Avatar size="200" radii="400">
                             <Icon src={Icons.Link} size="100" filled={joinSelected} />
@@ -175,7 +175,7 @@ export function Home() {
                   </NavItem>
                   <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
                     <NavLink to={getHomeSearchPath()}>
-                      <NavItemContent size="T300">
+                      <NavItemContent>
                         <Box as="span" grow="Yes" alignItems="Center" gap="200">
                           <Avatar size="200" radii="400">
                             <Icon src={Icons.Search} size="100" filled={searchSelected} />
diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx
index 17815e7a26..3718598a60 100644
--- a/src/app/pages/client/inbox/Inbox.tsx
+++ b/src/app/pages/client/inbox/Inbox.tsx
@@ -29,7 +29,7 @@ function InvitesNavItem() {
       aria-selected={invitesSelected}
     >
       <NavLink to={getInboxInvitesPath()}>
-        <NavItemContent size="T300">
+        <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
               <Icon src={Icons.Mail} size="100" filled={invitesSelected} />
@@ -70,7 +70,7 @@ export function Inbox() {
               <NavCategory>
                 <NavItem variant="Background" radii="400" aria-selected={notificationsSelected}>
                   <NavLink to={getInboxNotificationsPath()}>
-                    <NavItemContent size="T300">
+                    <NavItemContent>
                       <Box as="span" grow="Yes" alignItems="Center" gap="200">
                         <Avatar size="200" radii="400">
                           <Icon
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 2cf0e73956..4ce3e96efc 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -101,7 +101,7 @@ export function Space() {
               <NavCategory>
                 <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
                   <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
-                    <NavItemContent size="T300">
+                    <NavItemContent>
                       <Box as="span" grow="Yes" alignItems="Center" gap="200">
                         <Avatar size="200" radii="400">
                           <Icon src={Icons.Flag} size="100" filled={lobbySelected} />
@@ -117,7 +117,7 @@ export function Space() {
                 </NavItem>
                 <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
                   <NavLink to={getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
-                    <NavItemContent size="T300">
+                    <NavItemContent>
                       <Box as="span" grow="Yes" alignItems="Center" gap="200">
                         <Avatar size="200" radii="400">
                           <Icon src={Icons.Search} size="100" filled={searchSelected} />