From 1f7f359c91596e1314ee8a8cb9e6dde42cfd0de3 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 18 Nov 2024 14:02:28 -0700
Subject: [PATCH] Merge pull request #21942 from
 overleaf/ds-checkout-redesign-TrialCouponSummary

Checkout Redesign - Add the TrialCouponSummary component in redesign version

GitOrigin-RevId: 5d0483b403e13ce0a4d055ef449d4bc6938c42eb
---
 .../bootstrap-5/pages/subscription.scss       | 19 +++++++++++++++++++
 .../bootstrap-5/pages/website-redesign.scss   | 13 +++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
index 07b642f5be..d7e45e6614 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
@@ -208,6 +208,25 @@
       .price-cancel-anytime {
         @include body-xs;
       }
+
+      .trial-coupon-summary {
+        padding-top: var(--spacing-08);
+
+        .trial-coupon-summary-list-container {
+          padding-left: 0;
+
+          li {
+            display: flex;
+            color: var(--neutral-90);
+            align-items: center;
+            justify-content: flex-start;
+            margin-bottom: var(--spacing-04);
+            gap: var(--spacing-05);
+
+            @include body-sm;
+          }
+        }
+      }
     }
 
     hr {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
index 334c8e58d4..9bf2d99bda 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
@@ -251,4 +251,17 @@
   .page-header {
     border-bottom-width: 0;
   }
+
+  .round-background {
+    border-radius: 50%;
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+  }
+
+  .green-round-background {
+    @extend .round-background;
+
+    background: var(--green-30);
+  }
 }