Merge pull request #18889 from overleaf/mf-plans-new-tab-active-green

[web] Change text and icon color to green when new plans page tab is active

GitOrigin-RevId: 745b15538aa89afdb35a642f6927ecce0f1b40ee

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

@@ -101,7 +101,7 @@
 
         &:focus {
           background-color: unset;
-          border: 1px solid var(--emerald-green);
+          border: 1px solid var(--green-50);
         }
 
         &:hover {
@@ -121,6 +121,7 @@
         .plans-new-tab-link {
           border: 1px solid white;
           position: relative;
+          color: var(--green-50);
 
           // remove the border on tab focus
           &:focus-visible {
@@ -135,7 +136,7 @@
             background: border-box
               linear-gradient(
                 to bottom,
-                @emerald-green 0%,
+                @green-50 0%,
                 @neutral-20 85%,
                 @neutral-20 100%
               );
@@ -166,7 +167,7 @@
 
         .plans-new-discount-badge {
           background-color: #eaf6ef;
-          color: var(--emerald-green);
+          color: var(--green-50);
         }
       }
     }
@@ -209,13 +210,13 @@
       }
 
       &.active {
-        background-color: var(--emerald-green);
+        background-color: var(--green-50);
         color: white;
         box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
 
         .plans-new-discount-badge {
           background-color: #eaf6ef;
-          color: var(--emerald-green);
+          color: var(--green-50);
         }
       }