From 5df8cf7ce4a49b3acc6dce3cd03249d05cfb4af8 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 20 Nov 2024 10:38:09 -0600
Subject: [PATCH] Merge pull request #20324 from overleaf/jel-plans-toggle

[web] Use input for period toggle on new plans

GitOrigin-RevId: 0e1b76d92aa2143eb6721b9b2cd19505803fb153
---
 .../app/plans/plans-new-design.less           | 46 ++++++++++---------
 services/web/locales/en.json                  |  1 +
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
index ac461349f6..701120d7ac 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -214,8 +214,8 @@
   }
 
   .plans-new-period-switcher-container {
+    position: relative;
     display: inline-flex;
-    justify-content: center;
     background-color: var(--neutral-10);
     border-radius: var(--border-radius-full-new);
     padding: var(--spacing-03);
@@ -227,46 +227,50 @@
       margin-bottom: var(--spacing-09);
     }
 
-    .plans-new-period-switcher {
+    label {
+      display: inline-flex;
+      align-items: center;
+      margin: 0;
       font-size: var(--font-size-05);
       font-weight: 600;
       line-height: var(--line-height-04);
       text-align: center;
       padding: var(--spacing-01) var(--spacing-04);
       border-radius: var(--border-radius-full-new);
-      display: flex;
-      align-items: center;
-      border: unset;
-      background-color: unset;
 
       &:hover {
         background-color: var(--neutral-20);
+        cursor: pointer;
       }
+    }
 
-      &.active {
-        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: var(--green-10);
-          color: var(--green-60);
-        }
-      }
-
+    input[type='radio'] {
+      position: absolute;
+      left: -9999px;
       &:focus,
       &:focus-visible {
         outline: 0;
       }
+    }
 
-      &:focus-visible {
-        .box-shadow-button-input();
-      }
+    input[type='radio']:focus-visible + label,
+    input[type='radio']:checked:focus-visible + label {
+      .box-shadow-button-input();
+    }
 
+    input[type='radio']:checked + label {
+      background-color: var(--green-50);
+      color: white;
+      box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
       .plans-new-discount-badge {
-        margin-left: 6px;
+        background-color: var(--green-10);
+        color: var(--green-60);
       }
     }
+
+    .plans-new-discount-badge {
+      margin-left: var(--spacing-03);
+    }
   }
 
   .plans-new-discount-badge {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index f4aab37bad..e63dedc252 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -209,6 +209,7 @@
   "beta_program_opt_out_action": "Opt-Out of Beta Program",
   "better_bibliographies": "Better bibliographies",
   "bibliographies": "Bibliographies",
+  "billing_period_sentence_case": "Billing period",
   "binary_history_error": "Preview not available for this file type",
   "blank_project": "Blank Project",
   "blocked_filename": "This file name is blocked.",