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

@@ -24,6 +24,9 @@ block body
 	if (typeof(suppressCookieBanner) == 'undefined')
 		include _cookie_banner
 
+	if bootstrapVersion === 5
+		!= moduleIncludes("contactModal-marketing-bootstrap-5", locals)
+	else
 		!= moduleIncludes("contactModal-marketing", locals)
 
 block prepend foot-scripts

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

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()

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}>

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'

services/web/frontend/stylesheets/bootstrap-5/components/form.scss

@@ -80,3 +80,7 @@
     color: var(--content-disabled);
   }
 }
+
+.form-group {
+  margin-bottom: var(--spacing-06);
+}

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);
+}