From ecb06552410fdbc7329a1e3317be190d224d6ba0 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:04:41 -0500
Subject: [PATCH] Merge pull request #20572 from overleaf/jel-cms-styled-list

[web] Render styled lists on `Element | Content`

GitOrigin-RevId: 9d951e2339a85cc89b14991bbde2bc4d4316852a
---
 .../bootstrap-5/components/all.scss           |  1 +
 .../bootstrap-5/components/list.scss          | 33 +++++++++++++++++++
 .../website-redesign/check-in-blue-circle.svg |  9 +++++
 .../check-in-green-circle.svg                 |  9 +++++
 4 files changed, 52 insertions(+)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/list.scss
 create mode 100644 services/web/public/img/website-redesign/check-in-blue-circle.svg
 create mode 100644 services/web/public/img/website-redesign/check-in-green-circle.svg

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index d368999211..7d50253664 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -10,6 +10,7 @@
 @import 'badge';
 @import 'form';
 @import 'input-suggestions';
+@import 'list';
 @import 'modal';
 @import 'quote';
 @import 'footer';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/list.scss b/services/web/frontend/stylesheets/bootstrap-5/components/list.scss
new file mode 100644
index 0000000000..dd4f030075
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/list.scss
@@ -0,0 +1,33 @@
+@mixin list-checkmark {
+  $icon-size: 24px;
+
+  ul {
+    list-style: none;
+    margin-top: var(--spacing-06);
+    padding-left: 0;
+  }
+
+  li {
+    background-size: $icon-size $icon-size;
+    margin-bottom: var(--spacing-05);
+    padding-left: calc(var(--spacing-05) + $icon-size);
+  }
+}
+
+.list-checkmark-green {
+  @include list-checkmark;
+
+  li {
+    background: url('../../../../public/img/website-redesign/check-in-green-circle.svg')
+      no-repeat left top;
+  }
+}
+
+.list-checkmark-blue {
+  @include list-checkmark;
+
+  li {
+    background: url('../../../../public/img/website-redesign/check-in-blue-circle.svg')
+      no-repeat left top;
+  }
+}
diff --git a/services/web/public/img/website-redesign/check-in-blue-circle.svg b/services/web/public/img/website-redesign/check-in-blue-circle.svg
new file mode 100644
index 0000000000..11af81dd9f
--- /dev/null
+++ b/services/web/public/img/website-redesign/check-in-blue-circle.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="0.315918" width="24" height="24" rx="12" fill="#F1F4F9"/>
+    <mask id="mask0_1753_19400" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="21">
+        <rect x="2" y="2.31592" width="20" height="20" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_1753_19400)">
+        <path d="M9.95842 14.9409L17.0209 7.87842C17.1876 7.71175 17.3855 7.62842 17.6147 7.62842C17.8438 7.62842 18.0418 7.71175 18.2084 7.87842C18.3751 8.04508 18.4584 8.243 18.4584 8.47217C18.4584 8.70133 18.3751 8.89925 18.2084 9.06592L10.5418 16.7326C10.3751 16.8993 10.1806 16.9826 9.95842 16.9826C9.7362 16.9826 9.54176 16.8993 9.37509 16.7326L5.79176 13.1493C5.62509 12.9826 5.54523 12.7847 5.55217 12.5555C5.55912 12.3263 5.64592 12.1284 5.81259 11.9618C5.97926 11.7951 6.17717 11.7118 6.40634 11.7118C6.63551 11.7118 6.83342 11.7951 7.00009 11.9618L9.95842 14.9409Z" fill="#6597E0"/>
+    </g>
+</svg>
diff --git a/services/web/public/img/website-redesign/check-in-green-circle.svg b/services/web/public/img/website-redesign/check-in-green-circle.svg
new file mode 100644
index 0000000000..507c304c46
--- /dev/null
+++ b/services/web/public/img/website-redesign/check-in-green-circle.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" rx="12" fill="#80CB9C"/>
+    <mask id="mask0_3314_14780" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
+        <rect x="2" y="2" width="20" height="20" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_3314_14780)">
+        <path d="M9.95842 14.625L17.0209 7.5625C17.1876 7.39583 17.3855 7.3125 17.6147 7.3125C17.8438 7.3125 18.0418 7.39583 18.2084 7.5625C18.3751 7.72917 18.4584 7.92708 18.4584 8.15625C18.4584 8.38542 18.3751 8.58333 18.2084 8.75L10.5418 16.4167C10.3751 16.5833 10.1806 16.6667 9.95842 16.6667C9.7362 16.6667 9.54176 16.5833 9.37509 16.4167L5.79176 12.8333C5.62509 12.6667 5.54523 12.4688 5.55217 12.2396C5.55912 12.0104 5.64592 11.8125 5.81259 11.6458C5.97926 11.4792 6.17717 11.3958 6.40634 11.3958C6.63551 11.3958 6.83342 11.4792 7.00009 11.6458L9.95842 14.625Z" fill="#0F2715"/>
+    </g>
+</svg>