Merge pull request #18986 from overleaf/jel-faq-tabs-match-figma

[web] Style updates to new tab style to match Figma

GitOrigin-RevId: d78101cc53e00f309e52798214b9bc97d047828f

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -128,7 +128,7 @@
 
         &:focus {
           background-color: unset;
-          border: 1px solid var(--green-50);
+          outline: 0;
         }
 
         &:hover {
@@ -137,8 +137,8 @@
 
         // tab navigation focus style
         &:focus-visible {
-          &:extend(.input-focus-style);
-          background-color: white;
+          .box-shadow-button-input();
+          outline: 0;
         }
 
         @media (max-width: @screen-xs-max) {

services/web/frontend/stylesheets/components/tabs.less

@@ -47,31 +47,52 @@
   .nav-tabs-container {
     overflow-x: auto;
     margin-bottom: var(--spacing-11);
-
+    text-align: center;
     .nav-tabs {
-      border: 0 !important;
+      display: inline-flex;
+      border-bottom: var(--border-width-base) solid var(--neutral-20);
       margin: 0 auto;
       padding: 0;
       text-align: center;
       min-width: max-content; // This is for horizontal scrolling
+      border-top: 2px solid transparent; // so that top focus border is visible
 
       li {
         display: inline-block;
         float: none;
-        margin-bottom: 0; //override navs.less
+        margin-bottom: calc(var(--border-width-base) * -1);
+        margin-right: var(--spacing-04);
+
+        &:last-child {
+          margin-right: 0;
+        }
 
         a {
           border: 0;
-          color: @neutral-70;
-          border-bottom: 3px solid @neutral-20 !important;
+          border-radius: 0;
+          color: var(--neutral-70);
           margin-right: unset;
           padding: var(--spacing-04);
+          line-height: var(--line-height-03);
 
           &:focus,
           &:hover {
-            background-color: transparent !important;
             border: 0;
           }
+
+          &:focus,
+          &:focus-visible {
+            background-color: unset;
+            outline: 0;
+          }
+
+          &:hover {
+            background-color: var(--neutral-10);
+          }
+
+          &:focus-visible {
+            .box-shadow-button-input();
+          }
         }
       }