Merge pull request #8426 from overleaf/ta-error-pages-style

Update General Error Pages Style

GitOrigin-RevId: 04346784c94d5ce6bf3257fd128a3f00da4c4e9e

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

@@ -9,18 +9,22 @@ block body
 			.container.full-height
 				.error-container.full-height
 					.error-details
-						p.error-status I'm sorry, Dave. I'm afraid I can't do that.
-						p.error-description There was a problem with your latest request
+						p.error-status Something went wrong, sorry.
+						p.error-description
+							| There was a problem with your request.
 							if(message)
-								|: #{message}
-							|.
-							br
-							| Please go back and try again.
+								|
+								| The error is:
+						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}
 							| .
-						a.error-btn(href="javascript:history.back()") Back
-						|  
-						a.btn.btn-default(href="/") Home
+						p.error-actions
+							a.error-btn(href="javascript:history.back()") Back
+							|  
+							a.btn.btn-default(href="/") Home

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

@@ -7,4 +7,5 @@ block content
 				.error-details
 					p.error-status Not found
 					p.error-description #{translate("cant_find_page")}
-					a.error-btn(href="/") Home
+					p.error-actions
+						a.error-btn(href="/") Home

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

@@ -19,4 +19,5 @@ block body
 							|
 							a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
 							| .
-						a.error-btn(href="/") Home
+						p.error-actions
+							a.error-btn(href="/") Home

services/web/frontend/stylesheets/app/error-pages.less

@@ -23,7 +23,7 @@
 
 .error-status {
   font-family: @font-family-serif;
-  margin-bottom: (@line-height-computed / 4);
+  margin-bottom: @line-height-computed;
   color: @gray-dark;
   font-size: @font-size-h1;
 }
@@ -31,7 +31,16 @@
   font-family: @font-family-serif;
   font-size: @font-size-h3;
   color: @gray;
-  margin-bottom: @line-height-computed * 2;
+  margin-bottom: @line-height-computed;
+}
+.error-box {
+  background-color: @ol-blue-gray-1;
+  padding: @margin-sm;
+  font-family: @font-family-monospace;
+  margin-bottom: @line-height-computed;
+}
+.error-actions {
+  margin-top: @line-height-computed * 2;
 }
 
 .error-btn {

services/web/test/acceptance/src/BodyParserErrorsTest.js

@@ -38,7 +38,7 @@ describe('BodyParserErrors', function () {
               return done(error)
             }
             response.statusCode.should.equal(413)
-            body.should.match(/I'm afraid I can't do that./)
+            body.should.match(/There was a problem with your request/)
             done()
           }
         )