From f652c497136cd2ffdaa456e3df2d066b488eef16 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Thu, 16 May 2024 15:39:34 +0200
Subject: [PATCH] Merge pull request #18386 from overleaf/rd-footer-pug

[web] Migrate the language dropdown in footer to Bootstrap 5

GitOrigin-RevId: 07a37f59914c543ae8d33312aa313451145cd220
---
 .../web/app/views/layout/fat-footer-base.pug  |  5 +++-
 .../layout/language-picker-bootstrap-5.pug    | 27 +++++++++++++++++++
 .../bootstrap-5/components/dropdown-menu.scss |  7 +++--
 .../bootstrap-5/components/footer.scss        | 13 ++++-----
 4 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 services/web/app/views/layout/language-picker-bootstrap-5.pug

diff --git a/services/web/app/views/layout/fat-footer-base.pug b/services/web/app/views/layout/fat-footer-base.pug
index 69760d2e4b..95cf11f001 100644
--- a/services/web/app/views/layout/fat-footer-base.pug
+++ b/services/web/app/views/layout/fat-footer-base.pug
@@ -5,7 +5,10 @@
 			a(href="/legal") #{translate('privacy_and_terms')}
 			a(href="https://www.digital-science.com/security-certifications/") #{translate('compliance')}
 		ul.fat-footer-base-item.list-unstyled.fat-footer-base-language
-			include language-picker
+			if bootstrapVersion === 5
+				include language-picker-bootstrap-5
+			else
+				include language-picker
 	.fat-footer-base-section.fat-footer-base-social
 		.fat-footer-base-item
 			a.fat-footer-social(href="https://twitter.com/overleaf")
diff --git a/services/web/app/views/layout/language-picker-bootstrap-5.pug b/services/web/app/views/layout/language-picker-bootstrap-5.pug
new file mode 100644
index 0000000000..9124474048
--- /dev/null
+++ b/services/web/app/views/layout/language-picker-bootstrap-5.pug
@@ -0,0 +1,27 @@
+li.dropdown.dropup.subdued(dropdown).language-picker
+	a.dropdown-toggle#language-picker-toggle(
+		href="#",
+		dropdown-toggle,
+		data-ol-lang-selector-tooltip,
+		data-bs-toggle="dropdown",
+		role="button"
+		aria-haspopup="true",
+		aria-expanded="false",
+		aria-label="Select " + translate('language'),
+		tooltip=translate('language')
+		title=translate('language')
+	)
+		i.fa.fa-fw.fa-language
+		|
+		| #{settings.translatedLanguages[currentLngCode]}
+
+	ul.dropdown-menu(role="menu" aria-labelledby="language-picker-toggle")
+		li.dropdown-header #{translate("language")}
+		each subdomainDetails, subdomain in settings.i18n.subdomainLang
+			if !subdomainDetails.hide
+				- let isActive = subdomainDetails.lngCode === currentLngCode
+				li.lngOption
+					a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams role="menuitem")(class=isActive ? 'dropdown-item active' : 'dropdown-item')(aria-selected=isActive ? 'true' : 'false')
+						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
+						if subdomainDetails.lngCode === currentLngCode
+							span.material-symbols.dropdown-item-trailing-icon.pull-right(aria-hidden="true") check
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
index a41c332ccf..db986fd1ee 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
@@ -29,15 +29,18 @@
     color: inherit;
   }
 
-  &:hover:not(.active) {
+  &:hover:not(.active),
+  &:focus:not(.active) {
     background-color: var(--bg-light-secondary);
     cursor: pointer;
+    text-decoration: none;
   }
 
   &[variant='danger'] {
     color: var(--content-danger);
 
-    &:hover:not(.active) {
+    &:hover:not(.active),
+    &:focus:not(.active) {
       background-color: var(--bg-danger-03);
     }
   }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
index 3539357150..7c4fd23441 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
@@ -145,15 +145,12 @@ footer.site-footer {
         display: none; /* hiding rather than removing as still needed in the thin footer */
       }
 
-      a {
-        color: var(--content-secondary);
-
-        &:hover {
-          color: white;
+      .dropdown-item {
+        &.active {
+          color: var(--green-70);
         }
-
-        &:visited {
-          color: var(--content-secondary);
+        &:hover {
+          text-decoration: none;
         }
       }
     }