From 1430dbc690448d4fca160058e5f0cd50c4027f17 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Tue, 9 Jul 2024 08:51:04 -0500
Subject: [PATCH] Merge pull request #19254 from
 overleaf/jel-cms-button-spacing

[web] Standardize button spacing in CMS pages using new site design

GitOrigin-RevId: da5756adc3074603584a4c7e80b9443602413711
---
 services/web/config/settings.defaults.js      |  1 +
 .../frontend/stories/style-guide.stories.jsx  | 45 +++++++++++++------
 .../frontend/stylesheets/app/cms-page.less    | 22 ++++++++-
 .../frontend/stylesheets/components/card.less | 19 ++++++++
 4 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js
index e95e974393..3b85446dff 100644
--- a/services/web/config/settings.defaults.js
+++ b/services/web/config/settings.defaults.js
@@ -822,6 +822,7 @@ module.exports = {
           h4: ['class', 'id'],
           h5: ['class', 'id'],
           h6: ['class', 'id'],
+          p: ['class'],
           col: ['width'],
           figure: ['class', 'id', 'style'],
           figcaption: ['class', 'id', 'style'],
diff --git a/services/web/frontend/stories/style-guide.stories.jsx b/services/web/frontend/stories/style-guide.stories.jsx
index 2ad9f63d13..bb8755cf9a 100644
--- a/services/web/frontend/stories/style-guide.stories.jsx
+++ b/services/web/frontend/stories/style-guide.stories.jsx
@@ -353,20 +353,37 @@ export const ProgressBars = () => {
 
 export const Cards = () => {
   return (
-    <div className="content content-alt">
-      <Grid>
-        <Row>
-          <Col md={8} mdOffset={2}>
-            <div className="card">
-              <p>
-                Cards look best on a <code>.content.content-alt</code>{' '}
-                background
-              </p>
-            </div>
-          </Col>
-        </Row>
-      </Grid>
-    </div>
+    <>
+      <div className="content content-alt">
+        <Grid>
+          <Row>
+            <Col md={8} mdOffset={2}>
+              <div className="card">
+                <p>
+                  Cards look best on a <code>.content.content-alt</code>{' '}
+                  background
+                </p>
+              </div>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+      <div className="content website-redesign">
+        <Grid>
+          <Row>
+            <Col md={8} mdOffset={2}>
+              <h2>New card styles</h2>
+              <div className="card card-premium-border">
+                <h2>Header 2</h2>
+                <h3>Header 3</h3>
+                <h3>Header 4</h3>
+                <p>Dolor sit amet, consectetur adipiscing elit.</p>
+              </div>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    </>
   )
 }
 
diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less
index 929cbac3d0..4cc1f45cfa 100644
--- a/services/web/frontend/stylesheets/app/cms-page.less
+++ b/services/web/frontend/stylesheets/app/cms-page.less
@@ -50,6 +50,25 @@
       }
     }
 
+    .p-no-text-nodes:has(.btn) {
+      margin-top: var(--spacing-09);
+
+      @media (max-width: @screen-xs-max) {
+        .btn {
+          width: 100%;
+          margin-left: 0;
+          margin-top: var(--spacing-05);
+        }
+        .btn:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+
+    .btn + .btn {
+      margin-left: var(--spacing-06);
+    }
+
     blockquote.quote-picture-bottom {
       padding: (@line-height-computed / 2) @line-height-computed;
 
@@ -641,7 +660,8 @@
   flex-direction: column;
   * {
     &:last-child {
-      margin-top: auto;
+      flex: 1;
+      align-content: end;
     }
   }
 }
diff --git a/services/web/frontend/stylesheets/components/card.less b/services/web/frontend/stylesheets/components/card.less
index 993ebfd0bd..d5e2f685e8 100644
--- a/services/web/frontend/stylesheets/components/card.less
+++ b/services/web/frontend/stylesheets/components/card.less
@@ -120,4 +120,23 @@
     border-top: 8px solid var(--sapphire-blue);
     padding: 32px 40px 32px 40px;
   }
+
+  &.card-premium-border {
+    h2,
+    h3,
+    h4 {
+      color: var(--blue-60);
+    }
+    border-radius: 8px;
+    padding: var(--spacing-10);
+    border: 2px solid transparent;
+    background:
+      linear-gradient(white, white) padding-box,
+      linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70))
+        border-box;
+
+    .btn {
+      width: 100%;
+    }
+  }
 }