[web] Migrate general Pug pages to BS5 (#25937)

* Revert me! Temporarily update code to test updates

* Update layout-no-js.pug to use BS5

* Migrate pages to BS5

* Revert "Revert me! Temporarily update code to test updates"

This reverts commit 03d980939dcbdc3f73ddf1e673acbc3fbfdfe2ec.

* Use `.error-container` class instead of BS5 utility

* Fix breakbpoints

* Use `.error-container` instead of utility class

GitOrigin-RevId: fd39c4f7278f175bbdeee24826f7a2226b1d7c70

services/web/app/views/general/400.pug

@@ -2,30 +2,27 @@ extends ../layout/layout-no-js
 
 block vars
 	- metadata = { title: 'Something went wrong' }
-	- bootstrap5PageStatus = 'disabled'
 
 block body
-	body.full-height
-		main.content.content-alt.full-height#main-content
-			.container.full-height
-				.error-container.full-height
-					.error-details
-						p.error-status Something went wrong, sorry.
-						p.error-description
-							| There was a problem with your request.
-							if(message)
-								|
-								| The error is:
+	body
+		main.content.content-alt#main-content
+			.container
+				.error-container
+					h1.mb-4 Something went wrong, sorry.
+					p.fs-5
+						| There was a problem with your request.
 						if(message)
-							p.error-box
-								| #{message}
-						p.error-description
-							| Please go back and try again.
-							| If the problem persists, please contact us at
 							|
-							a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
-							| .
-						p.error-actions
-							a.error-btn(href="javascript:history.back()") Back
-							|  
-							a.btn.btn-secondary(href="/") Home
+							| The error is:
+					if(message)
+						p.bg-light.p-3.border-2.font-monospace
+							| #{message}
+					p.fs-5
+						| Please go back and try again.
+						| If the problem persists, please contact us at
+						|
+						a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
+						| .
+					p.mt-5.d-flex.gap-3
+						a.btn.btn-primary(href="javascript:history.back()") Back
+						a.btn.btn-secondary(href="/") Home

services/web/app/views/general/404.pug

@@ -1,14 +1,13 @@
-extends ../layout-marketing
+extends ../layout-react
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
+block append meta
+	meta(name="ol-user" data-type="json" content=user)
 
 block content
 	main.content.content-alt#main-content
 		.container
 			.error-container
-				.error-details
-					p.error-status Not found
-					p.error-description #{translate("cant_find_page")}
-					p.error-actions
-						a.error-btn(href="/") Home
+				h1.mb-4 Not found
+				p.fs-5 #{translate("cant_find_page")}
+				p.mt-5
+					a.btn.btn-primary.d-block.d-md-inline-block(href="/") Home

services/web/app/views/general/500.pug

@@ -2,23 +2,21 @@ extends ../layout/layout-no-js
 
 block vars
 	- metadata = { title: 'Something went wrong' }
-	- bootstrap5PageStatus = 'disabled'
 
 block body
-	body.full-height
-		main.content.content-alt.full-height#main-content
-			.container.full-height
-				.error-container.full-height
-					.error-details
-						p.error-status Something went wrong, sorry.
-						p.error-description Our staff are probably looking into this, but if it continues, please check our status page at
-							|
-							|
-							a(href="http://" + settings.statusPageUrl) #{settings.statusPageUrl}
-							|
-							| or contact us at
-							|
-							a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
-							| .
-						p.error-actions
-							a.error-btn(href="/") Home
+	body
+		main.content.content-alt#main-content
+			.container
+				.error-container
+					h1.mb-4 Something went wrong, sorry.
+					p.fs-5 Our staff are probably looking into this, but if it continues, please check our status page at
+						|
+						|
+						a(href="http://" + settings.statusPageUrl) #{settings.statusPageUrl}
+						|
+						| or contact us at
+						|
+						a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
+						| .
+					p.mt-5
+						a.btn.btn-primary.d-block.d-md-inline-block(href="/") Home

services/web/app/views/general/closed.pug

@@ -1,13 +1,13 @@
-extends ../layout-marketing
+extends ../layout-react
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
+block append meta
+	meta(name="ol-user" data-type="json" content=user)
 
 block content
 	main.content#main-content
 		.container
 			.row
-				.col-md-8.col-md-offset-2.text-center
+				.col-lg-8.offset-lg-2.text-center
 					.page-header
 						h1 Maintenance
 					p

services/web/app/views/general/unsupported-browser.pug

@@ -2,45 +2,43 @@ extends ../layout/layout-no-js
 
 block vars
 	- metadata = { title: 'Unsupported browser' }
-	- bootstrap5PageStatus = 'disabled'
 
 block body
-	body.full-height
-		main.content.content-alt.full-height#main-content
-			.container.full-height
-				.error-container.full-height
-					.error-details
-						h1.error-status Unsupported Browser
-						p.error-description
-							| Sorry, we don't support your browser anymore. Please see below what browsers we support.
-							br
-							| If you think you're seeing this message in error,
-							|
-							a(href="mailto:" + settings.adminEmail) please let us know
-							| .
-
-						if fromURL
-							p
-								| URL:
-								|
-								a(href=fromURL) #{fromURL}
-
-						hr
-
-						p
-							| Overleaf officially supports versions of Chrome, Firefox, Safari and Microsoft Edge released in the last 12 months.
-							br
-							| Firefox ESR is also supported for 12 months.
-						p
-							| Support for beta or developer-preview browser versions cannot be guaranteed. Please
-							|
-							a(href="mailto:" + settings.adminEmail) get in touch
-							|
-							| if you encounter any issues while using the service with beta or developer-preview releases of supported browsers.
-						p
-							strong Overleaf has stopped supporting Internet Explorer as of April 26, 2021, and access is now blocked.
+	body
+		main.content.content-alt#main-content
+			.container
+				.error-container
+					h1.mb-4 Unsupported Browser
+					p.fs-5
+						| Sorry, we don't support your browser anymore. Please see below what browsers we support.
+						br
+						| If you think you're seeing this message in error,
+						|
+						a(href="mailto:" + settings.adminEmail) please let us know
+						| .
+	
+					if fromURL
 						p
-							| If you cannot upgrade to one of the supported browsers,
+							| URL:
 							|
-							a(href="mailto:" + settings.adminEmail) please let us know
-							| .
+							a(href=fromURL) #{fromURL}
+	
+					hr
+	
+					p
+						| Overleaf officially supports versions of Chrome, Firefox, Safari and Microsoft Edge released in the last 12 months.
+						br
+						| Firefox ESR is also supported for 12 months.
+					p
+						| Support for beta or developer-preview browser versions cannot be guaranteed. Please
+						|
+						a(href="mailto:" + settings.adminEmail) get in touch
+						|
+						| if you encounter any issues while using the service with beta or developer-preview releases of supported browsers.
+					p
+						strong Overleaf has stopped supporting Internet Explorer as of April 26, 2021, and access is now blocked.
+					p
+						| If you cannot upgrade to one of the supported browsers,
+						|
+						a(href="mailto:" + settings.adminEmail) please let us know
+						| .

services/web/app/views/layout/layout-no-js.pug

@@ -13,6 +13,6 @@ html(lang="en")
 		link(rel="icon", href="/favicon.ico")
 
 		if buildCssPath
-			link(rel="stylesheet", href=buildCssPath())
+			link(rel="stylesheet", href=buildCssPath('', 5))
 
 block body

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -37,6 +37,7 @@
 @import 'editor/math-preview';
 @import 'editor/references-search';
 @import 'editor/editor-survey';
+@import 'error-pages';
 @import 'website-redesign';
 @import 'group-settings';
 @import 'templates-v2';

services/web/frontend/stylesheets/bootstrap-5/pages/error-pages.scss

@@ -0,0 +1,7 @@
+.error-container {
+  padding: var(--spacing-08);
+
+  @include media-breakpoint-up(lg) {
+    padding: var(--spacing-08) var(--spacing-11);
+  }
+}