New error page graphic. Other error page improvements (#5099)

- 500.html generated with admin-set default locale if set
- Error page `<title>` includes Mastodon site title
- 500 title changed to "This page is not
  correct" (ref: <https://www.youtube.com/watch?v=2VCAP_seh1A>)
- 500 content appended with "on our end" to make clear it's
  not user's fault

7 files changed, 13 insertions, 11 deletions

diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index 48652a035..96f0023c3 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -70,9 +70,8 @@ body {
 
     .dialog img {
       display: block;
-      margin: 20px auto;
-      margin-top: 50px;
-      max-width: 600px;
+      margin: 0 auto;
+      max-width: 470px;
       width: 100%;
       height: auto;
     }
diff --git a/app/views/errors/500.html.haml b/app/views/errors/500.html.haml
index e124be551..6244ff209 100644
--- a/app/views/errors/500.html.haml
+++ b/app/views/errors/500.html.haml
@@ -1,5 +1,5 @@
 - content_for :page_title do
-  = t('errors.500')
+  = t('errors.500.title')
 
 - content_for :content do
-  = t('errors.500')
+  = t('errors.500.content')
diff --git a/app/views/layouts/error.html.haml b/app/views/layouts/error.html.haml
index 0b5f908ae..31f322096 100644
--- a/app/views/layouts/error.html.haml
+++ b/app/views/layouts/error.html.haml
@@ -3,12 +3,12 @@
   %head
     %meta{ content: 'text/html; charset=UTF-8', 'http-equiv' => 'Content-Type' }/
     %meta{ charset: 'utf-8' }/
-    %title= yield :page_title
+    %title= safe_join([yield(:page_title), title], ' - ')
     %meta{ content: 'width=device-width,initial-scale=1', name: 'viewport' }/
     = stylesheet_pack_tag 'common', media: 'all'
     = stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
   %body.error
     .dialog
-      %img{ alt: 'Mastodon', src: '/oops.png' }/
+      %img{ alt: title, src: '/oops.gif' }/
       %div
         %h1= yield :content
diff --git a/config/locales/en.yml b/config/locales/en.yml
index cc440e1b0..f87d8532c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -310,7 +310,9 @@ en:
       content: Security verification failed. Are you blocking cookies?
       title: Security verification failed
     '429': Throttled
-    '500': We're sorry, but something went wrong.
+    '500':
+      content: We're sorry, but something went wrong on our end.
+      title: This page is not correct
     noscript_html: To use the Mastodon web application, please enable JavaScript. Alternatively, try one of the <a href="https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md">native apps</a> for Mastodon for your platform.
   exports:
     blocks: You block
diff --git a/lib/tasks/assets.rake b/lib/tasks/assets.rake
index ad7c6ba90..2ef72fdef 100644
--- a/lib/tasks/assets.rake
+++ b/lib/tasks/assets.rake
@@ -3,15 +3,16 @@
 namespace :assets do
   desc 'Generate 500.html'
   task :generate_500 do
-    html = ApplicationController.render('errors/500', layout: 'error')
-    File.write(Rails.root.join('public', '500.html'), html)
+    I18n.with_locale(ENV['DEFAULT_LOCALE'] || I18n.default_locale) do
+      html = ApplicationController.render('errors/500', layout: 'error')
+      File.write(Rails.root.join('public', '500.html'), html)
+    end
   end
 end
 
 if Rake::Task.task_defined?('assets:precompile')
   Rake::Task['assets:precompile'].enhance do
     Webpacker::Manifest.load
-
     Rake::Task['assets:generate_500'].invoke
   end
 end
diff --git a/public/oops.gif b/public/oops.gif
new file mode 100644
index 000000000..ad19c4e10
--- /dev/null
+++ b/public/oops.gif
Binary files differdiff --git a/public/oops.png b/public/oops.png
deleted file mode 100644
index 0abddad3e..000000000
--- a/public/oops.png
+++ /dev/null
Binary files differ