From 613d691fbf26e4061ff45c28b3f7475874312e55 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 14 Aug 2024 09:46:03 -0500
Subject: [PATCH] Merge pull request #19937 from overleaf/jel-new-period-toggle

[web] Add space between options in new plans period toggle

GitOrigin-RevId: fee13d4e933a5f2d16f14bbd1fd0b9b130a0084e
---
 .../app/plans/plans-new-design.less           | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 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 8fa5c3f872..cc0db7f88a 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -8,14 +8,7 @@
   @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
 );
 
-@switcher-container-width: 270px;
-@switcher-container-height: 44px;
-@switcher-container-border-radius: @switcher-container-height / 2;
-@switcher-container-padding: 6px;
 @switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
-@switcher-padding-vertical: 2px;
-@switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
-@switcher-border-radius: @switcher-height / 2;
 
 @nondiscounted-price-element-height: var(--line-height-02);
 
@@ -211,21 +204,19 @@
     display: flex;
     justify-content: center;
     background-color: var(--neutral-10);
-    width: @switcher-container-width;
-    height: @switcher-container-height;
-    border-radius: @switcher-container-border-radius;
-    padding: @switcher-container-padding;
-    margin-top: @spacing-09;
+    border-radius: var(--border-radius-full-new);
+    padding: var(--spacing-03);
+    margin-top: var(--spacing-09);
     margin-bottom: @switcher-container-margin-bottom;
+    gap: var(--spacing-04);
 
     .plans-new-period-switcher {
       font-size: var(--font-size-05);
       font-weight: 600;
       line-height: var(--line-height-04);
       text-align: center;
-      padding: 2px 8px;
-      height: @switcher-height;
-      border-radius: @switcher-border-radius;
+      padding: var(--spacing-01) var(--spacing-04);
+      border-radius: var(--border-radius-full-new);
       display: flex;
       align-items: center;
       border: unset;
@@ -246,6 +237,15 @@
         }
       }
 
+      &:focus,
+      &:focus-visible {
+        outline: 0;
+      }
+
+      &:focus-visible {
+        .box-shadow-button-input();
+      }
+
       .plans-new-discount-badge {
         margin-left: 6px;
       }