From b49c6922c29498b4ed35c798e85a2ae4e1c55a15 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Mon, 3 Jun 2024 13:07:10 +0100
Subject: [PATCH] Merge pull request #18660 from
 overleaf/td-rd-bs5-contact-us-modal

Bootstrap 5 contact us modal

GitOrigin-RevId: a4607fab50152109fbe83bc29246b7b4a82539a1
---
 services/web/app/views/layout-marketing.pug              | 5 ++++-
 .../app/views/layout/navbar-marketing-bootstrap-5.pug    | 2 +-
 services/web/frontend/js/bootstrap-3.ts                  | 1 +
 .../js/features/ui/components/bootstrap-5/button.tsx     | 2 +-
 services/web/frontend/js/marketing.js                    | 1 -
 .../stylesheets/bootstrap-5/components/form.scss         | 4 ++++
 .../stylesheets/bootstrap-5/components/modal.scss        | 9 +++++++++
 7 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/services/web/app/views/layout-marketing.pug b/services/web/app/views/layout-marketing.pug
index 528fabaa82..ecdfb7cd8f 100644
--- a/services/web/app/views/layout-marketing.pug
+++ b/services/web/app/views/layout-marketing.pug
@@ -24,7 +24,10 @@ block body
 	if (typeof(suppressCookieBanner) == 'undefined')
 		include _cookie_banner
 
-	!= moduleIncludes("contactModal-marketing", locals)
+	if bootstrapVersion === 5
+		!= moduleIncludes("contactModal-marketing-bootstrap-5", locals)
+	else
+		!= moduleIncludes("contactModal-marketing", locals)
 
 block prepend foot-scripts
 	+bootstrap-js(bootstrapVersion)
diff --git a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug b/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
index 236bbf68b9..ee32bd379c 100644
--- a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
+++ b/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
@@ -88,7 +88,7 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg
 											if child.divider
 												+dropdown-menu-divider
 											else if child.isContactUs
-												+dropdown-menu-link-item()(data-ol-open-contact-form-modal="contact-us" href)
+												+dropdown-menu-link-item()(data-ol-open-contact-form-modal="contact-us" data-bs-target="#contactUsModal" href data-bs-toggle="modal")
 													span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
 														| #{translate("contact_us")}
 											else
diff --git a/services/web/frontend/js/bootstrap-3.ts b/services/web/frontend/js/bootstrap-3.ts
index 9c2bc11ddf..ff6b675e5c 100644
--- a/services/web/frontend/js/bootstrap-3.ts
+++ b/services/web/frontend/js/bootstrap-3.ts
@@ -1,5 +1,6 @@
 import 'jquery'
 import 'bootstrap'
+import './features/contact-form'
 
 $('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' })
 $('[data-toggle="tooltip"]').tooltip()
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx
index 12e23b371d..6b9c87322d 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx
@@ -41,7 +41,7 @@ export default function Button({
             className={loadingSpinnerClassName}
             role="status"
           />
-          <span className="sr-only">{t('loading')}</span>
+          <span className="visually-hidden">{t('loading')}</span>
         </span>
       )}
       <span className="button-content" aria-hidden={isLoading}>
diff --git a/services/web/frontend/js/marketing.js b/services/web/frontend/js/marketing.js
index 1f61c4b735..fc254a708d 100644
--- a/services/web/frontend/js/marketing.js
+++ b/services/web/frontend/js/marketing.js
@@ -4,7 +4,6 @@ import './features/form-helpers/hydrate-form'
 import './features/form-helpers/password-visibility'
 import './features/link-helpers/slow-link'
 import './features/bookmarkable-tab'
-import './features/contact-form'
 import './features/event-tracking'
 import './features/fallback-image'
 import './features/multi-submit'
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 2e1fafd4b8..0200ede1c8 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -80,3 +80,7 @@
     color: var(--content-disabled);
   }
 }
+
+.form-group {
+  margin-bottom: var(--spacing-06);
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
index 82ff7fd2c0..66f08e218d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
@@ -82,3 +82,12 @@
 .git-bridge-optional-tokens-actions {
   margin-top: var(--spacing-05);
 }
+
+// Contact us modal
+.contact-us-modal-textarea {
+  height: 120px;
+}
+
+.modal-form-messages .notification {
+  margin-bottom: var(--spacing-05);
+}