fix room nav item selected styles

cinnyapp · May 10, 2024 · bda7adc · bda7adc
1 parent 12a9d47
commit bda7adc
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 16 deletions.
diff --git 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
@@ -194,15 +194,15 @@ export function RoomNavItem({
     <NavItem
       variant="Background"
       radii="400"
-      highlight={unread !== undefined || selected}
+      highlight={unread !== undefined}
       aria-selected={selected}
       data-hover={!!menuAnchor}
       onContextMenu={handleContextMenu}
       {...hoverProps}
       {...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />