Merge pull request #34903 from overleaf/mj-settings-tabs-hover

[web] Add hover states to settings tabs

GitOrigin-RevId: c41c200231d0308267fc346d2949ef659a1950bc

services/web/frontend/js/features/settings/components/settings-modal-body.tsx

@@ -53,7 +53,7 @@ const SettingsNavLink = ({ entry }: { entry: SettingsEntry }) => {
         href={entry.href}
         target="_blank"
         rel="noopener"
-        className="ide-settings-tab-link"
+        className="ide-settings-tab-link ide-settings-tab-link-anchor"
       >
         <MaterialIcon
           className="ide-settings-tab-link-icon"
@@ -73,8 +73,9 @@ const SettingsNavLink = ({ entry }: { entry: SettingsEntry }) => {
       <>
         <NavLink
           eventKey={entry.key}
-          className="ide-settings-tab-link"
+          className="ide-settings-tab-link ide-settings-tab-link-button"
           key={entry.key}
+          as="button"
         >
           <MaterialIcon
             className="ide-settings-tab-link-icon"

services/web/frontend/stylesheets/pages/editor/settings.scss

@@ -25,7 +25,7 @@
   align-items: flex-start;
   flex-direction: row;
   gap: var(--spacing-02);
-  color: var(--neutral-90);
+  color: var(--content-primary);
   padding: var(--spacing-02);
   border-radius: var(--border-radius-base);
   font-size: var(--font-size-02);
@@ -33,7 +33,19 @@
   text-decoration: none;
 
   &:visited {
-    color: var(--neutral-90);
+    color: var(--content-primary);
+  }
+
+  &.ide-settings-tab-link-button:hover:not(.active),
+  &.ide-settings-tab-link-button:focus:not(.active) {
+    background-color: var(--bg-light-secondary);
+    color: var(--content-primary);
+  }
+
+  &.ide-settings-tab-link-anchor:hover,
+  &.ide-settings-tab-link-anchor:focus {
+    color: var(--link-ui-hover);
+    background-color: var(--bg-light-secondary);
   }
 
   &.active {