Merge pull request #19662 from overleaf/jel-light-touch-tabs

[web] Update plan tab buttons for light touch redesign

GitOrigin-RevId: 0ee3e7a9c277097abd32dcae2cc49a1a4b01e6f0

services/web/app/views/subscriptions/plans/light-redesign/_cards_controls_tables.pug

@@ -1,6 +1,6 @@
 include ./_mixins
 
-.row.plans-top-switch
+.row.plans-top-switch.text-center
 	.col-xs-12
 		ul.nav(role="tablist")
 			li.active.plans-switch-individual(
@@ -11,7 +11,11 @@ include ./_mixins
 				event-segmentation='{"button": "individual"}'
 				role="presentation"
 			)
-				button.btn.btn-default-outline(role="tab" aria-controls="panel-individual" aria-selected="true") #{translate("indvidual_plans")}
+				button.btn(
+					role="tab"
+					aria-controls="panel-individual"
+					aria-selected="true"
+				) #{translate("indvidual_plans")}
 			li.plans-switch-group(
 				data-ol-plans-v2-view-tab='group'
 				event-tracking="plans-page-toggle-plan"
@@ -20,9 +24,8 @@ include ./_mixins
 				event-segmentation='{"button": "group"}'
 				role="presentation"
 			)
-				button.btn.btn-default-outline(
+				button.btn(
 					aria-controls="panel-group"
-					href="#"
 					role="tab"
 					aria-selected="false"
 				)
@@ -36,11 +39,10 @@ include ./_mixins
 				event-segmentation='{"button": "student"}'
 				role="presentation"
 			)
-				button.btn.btn-default-outline(
+				button.btn(
 					aria-controls="panel-student"
-					href="#"
 					role="tab"
-					aria-selected="false"					
+					aria-selected="false"
 				) #{translate("student_plans")}
 
 +monthly_annual_switch("annual", "plans-page-toggle-period")

services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less

@@ -1,11 +1,8 @@
 // m-a stands for: monthly annual
-@plans-top-switch-item-height: 34px;
-@plans-top-switch-item-border-radius: @plans-top-switch-item-height / 2;
 @plans-m-a-switch-height: 20px;
 @plans-highlighted-text-height-desktop: 32px;
 @plans-highlighted-text-height-mobile: 41px;
 @plans-learn-more-link-color: hsl(206, 100%, 52%);
-@plans-top-switch-group-width-mobile: 46%;
 @plans-table-border-radius: var(--border-radius-medium-new);
 @plans-table-td-mobile-min-height: 34px;
 @highlighted-border: var(--border-width-base) solid var(--green-50);
@@ -72,74 +69,71 @@
   }
 
   .plans-top-switch ul {
-    display: flex;
+    background-color: var(--neutral-10);
+    display: inline-flex;
     justify-content: center;
-    margin-top: var(--spacing-09);
+    margin: var(--spacing-09) auto 0 auto;
+    border-radius: var(--border-radius-full-new);
+    padding: var(--spacing-01);
 
     li {
-      border-top: 1px solid @ol-blue-gray-3;
+      display: flex;
-      border-bottom: 1px solid @ol-blue-gray-3;
+      margin-right: var(--spacing-02);
-      height: @plans-top-switch-item-height;
+      &:last-child {
-
+        margin-right: 0;
-      &.plans-switch-individual {
-        border-right: 1px solid @ol-blue-gray-3;
-        border-left: 1px solid @ol-blue-gray-3;
-        border-top-left-radius: @plans-top-switch-item-border-radius;
-        border-bottom-left-radius: @plans-top-switch-item-border-radius;
       }
-
-      &.plans-switch-student {
-        border-right: 1px solid @ol-blue-gray-3;
-        border-left: 1px solid @ol-blue-gray-3;
-        border-top-right-radius: @plans-top-switch-item-border-radius;
-        border-bottom-right-radius: @plans-top-switch-item-border-radius;
-      }
-
       button {
-        padding: 4px 16px;
+        background-color: var(--neutral-10);
-        height: 100%;
+        color: var(--neutral-70);
+        border-radius: var(--border-radius-full-new);
+        font-size: var(--font-size-03);
+        font-weight: 600;
+        line-height: var(--line-height-03);
+        padding: 0 var(--spacing-04);
 
         // remove bootstrap default
         &.btn:active {
           box-shadow: none;
         }
 
-        // on Firefox, there will be a visible dotted border on the li element
+        &:hover {
-        // when it's `active` / `focus`
+          // same background as btn-secondary hover
-        // `outline: none` rule intends to eliminate that border
+          background-color: var(--neutral-20);
-        &:active,
+          color: var(--neutral-70);
+        }
+
         &:focus {
-          outline: none;
+          outline: 0;
+        }
+        &:focus-visible {
+          outline: 0;
+          .box-shadow-button-input();
         }
       }
 
       &.active {
-        background-color: @ol-blue-gray-4;
+        button {
-
+          cursor: pointer;
-        button.btn-default-outline {
+          background-color: var(--neutral-70);
-          color: @white;
+          border-color: var(--neutral-70);
+          color: var(--white);
         }
       }
-
-      &:not(.active) {
-        background-color: @white;
-      }
     }
 
     @media (max-width: @screen-xs-max) {
-      margin: 0 13px;
+      border-radius: var(--border-radius-base-new);
 
       li {
-        height: unset;
+        button {
-
+          font-size: var(--font-size-01);
-        &.plans-switch-individual,
+          line-height: var(--line-height-01);
-        &.plans-switch-student {
+          text-wrap: auto;
-          width: (100% - @plans-top-switch-group-width-mobile) / 2;
+          padding: var(--spacing-02) var(--spacing-04);
+          border-radius: var(--border-radius-base-new);
         }
 
         &.plans-switch-group {
-          width: @plans-top-switch-group-width-mobile;
-
           // force newline for the second span
           span:first-child::after {
             content: '';
@@ -150,23 +144,6 @@
             font-weight: 400;
           }
         }
-
-        &.plans-switch-individual,
-        &.plans-switch-student {
-          button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-          }
-        }
-
-        button {
-          white-space: unset;
-          padding: 4px 8px;
-          font-size: 14px;
-          width: 100%;
-        }
       }
     }
   }