Merge pull request #21622 from overleaf/td-settings-link-colour

Enable redesign for account settings page and use application link colour

GitOrigin-RevId: dad039810256bda47061799ef56a9c87a663ab3d

services/web/app/views/layout-base.pug

@@ -9,9 +9,12 @@ html(
 	- let bootstrap5PageStatus = 'disabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
 	- let bootstrap5PageSplitTest = '' // Limits Bootstrap 5 usage on this page to users with an assignment of "enabled" for the specified split test. If left empty and bootstrap5PageStatus is "enabled", the page always uses Bootstrap 5.
 	- let isWebsiteRedesign = false
+	- let isApplicationPage = false	
 
 	block entrypointVar
 
+	block isApplicationPageVar
+
 	block vars
 
 	head
@@ -77,7 +80,8 @@ html(
 
 	body(class={
 		'thin-footer': showThinFooter,
-		'website-redesign': isWebsiteRedesign === true || websiteRedesignOverride
+		'website-redesign': isWebsiteRedesign === true || websiteRedesignOverride,
+		'application-page': isApplicationPage
 	}, data-theme="default")
 		if(settings.recaptcha && settings.recaptcha.siteKeyV3)
 			script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render=" + settings.recaptcha.siteKeyV3, defer=deferScripts)

services/web/app/views/layout-react.pug

@@ -8,6 +8,9 @@ include ./_mixins/bootstrap_js
 block entrypointVar
 	- entrypoint = 'marketing'
 		
+block isApplicationPageVar
+	- isApplicationPage = true
+		
 block append meta
 	if bootstrapVersion === 5
 		- const canDisplayAdminMenu = hasAdminAccess()

services/web/app/views/user/settings.pug

@@ -6,6 +6,7 @@ block entrypointVar
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
 	- bootstrap5PageSplitTest = 'bootstrap-5'
+	- isWebsiteRedesign = true
 
 block append meta
 	meta(name="ol-hasPassword" data-type="boolean" content=hasPassword)

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -29,9 +29,15 @@
 }
 
 .website-redesign {
-  --link-color: var(--link-web);
-  --link-hover-color: var(--link-web-hover);
-  --link-visited-color: var(--link-web-visited);
+  &:not(.application-page) {
+    --link-color: var(--link-web);
+    --link-hover-color: var(--link-web-hover);
+    --link-visited-color: var(--link-web-visited);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 
   // hero section of features, enterprises, and universities will have an image that will overflow the page
 
@@ -40,10 +46,6 @@
   overflow-x: hidden;
 
   a {
-    &:hover {
-      text-decoration: underline;
-    }
-
     &:focus,
     &:focus-visible {
       outline: 0;