From d0df44b190c04cc1dbcd8fe205a9001ba064c550 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 31 Oct 2024 08:49:19 -0700
Subject: [PATCH] Merge pull request #21446 from overleaf/jel-content-pages-btn

[web] Fix spacing between `.btn` on gallery pages

GitOrigin-RevId: f3603ffb0a64b69fd3f12eae74639599aa5f8c9a
---
 .../web/app/views/_mixins/begin_now_card.pug  |  6 ++---
 .../stylesheets/bootstrap-5/pages/cms.scss    |  4 ----
 .../bootstrap-5/pages/content.scss            | 19 ++++++++++++++++
 .../bootstrap-5/pages/templates-v2.scss       | 11 +++++++---
 .../bootstrap-5/pages/website-redesign.scss   | 22 -------------------
 5 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/services/web/app/views/_mixins/begin_now_card.pug b/services/web/app/views/_mixins/begin_now_card.pug
index d53881996f..418a9620cd 100644
--- a/services/web/app/views/_mixins/begin_now_card.pug
+++ b/services/web/app/views/_mixins/begin_now_card.pug
@@ -13,12 +13,12 @@ mixin begin_now_card()
 						span now
 						span.text-green-bright }
 				p #{translate("discover_why_people_worldwide_trust_overleaf", {count: 18})}
-				p
+				p.card-links
 					if !isUserLoggedIn
 						a.btn.btn-primary.card-link(
 							href=registerURL
 						) #{translate("sign_up_for_free")}
-					a.card-link(
-						class = isUserLoggedIn ? 'btn btn-primary' : 'btn btn-secondary'
+					a.btn.card-link(
+						class = isUserLoggedIn ? 'btn-primary' : 'btn-secondary'
 						href=plansURL
 					) #{translate("explore_all_plans")}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 3fd3041964..4da92c58d2 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -66,10 +66,6 @@
     }
   }
 
-  .btn + .btn {
-    margin-left: var(--spacing-06);
-  }
-
   .card + .card {
     margin-top: var(--spacing-09);
   }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
index c7f10a48e7..61ad186d67 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
@@ -12,6 +12,25 @@
 
   word-break: break-word;
 
+  .btn + .btn,
+  .card-link + .card-link {
+    margin-left: var(--spacing-06);
+  }
+
+  .card-links {
+    @include media-breakpoint-down(md) {
+      .btn {
+        width: 100%;
+        margin-left: 0;
+        margin-top: var(--spacing-05);
+      }
+
+      .btn:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
   /*
       Links and Buttons
     */
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
index 6d1b2d8991..8c53317715 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
@@ -354,13 +354,18 @@
   }
 
   .cta-links-container {
-    margin: var(--spacing-09) 0;
+    margin-top: var(--spacing-09);
+    margin-bottom: var(--spacing-09);
 
     .cta-links {
       display: inline-flex;
-      gap: var(--spacing-04);
-      padding: unset;
+      align-items: flex-start;
       flex-wrap: wrap;
+      gap: var(--spacing-06);
+
+      .btn {
+        margin: 0; // gap will handle spacing
+      }
     }
   }
 
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 bd0d3c685a..615cf845d0 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
@@ -236,28 +236,6 @@
     --bs-card-spacer-x: var(--spacing-08);
   }
 
-  .cta-card {
-    .btn + .btn {
-      margin-left: var(--spacing-04);
-    }
-
-    p:has(.btn) {
-      margin-top: var(--spacing-09);
-
-      @include media-breakpoint-down(md) {
-        .btn {
-          width: 100%;
-          margin-left: 0;
-          margin-top: var(--spacing-05);
-        }
-
-        .btn:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-
   .badge-premium {
     --badge-font-weight: 600;
   }