8 files changed, 40 insertions, 68 deletions
diff --git a/.gitignore b/.gitignore
index 38ebc934f..2f5f1e71a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ public/system
 public/assets
 public/packs
 public/packs-test
+public/500.html
 .env
 .env.production
 node_modules/
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index c5f98750c..48652a035 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -62,6 +62,27 @@ body {
     height: 100%;
     padding: 0;
   }
+
+  &.error {
+    text-align: center;
+    color: $ui-primary-color;
+    padding: 20px;
+
+    .dialog img {
+      display: block;
+      margin: 20px auto;
+      margin-top: 50px;
+      max-width: 600px;
+      width: 100%;
+      height: auto;
+    }
+
+    .dialog h1 {
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 400;
+    }
+  }
 }
 
 button {
diff --git a/app/views/errors/500.html.haml b/app/views/errors/500.html.haml
new file mode 100644
index 000000000..e124be551
--- /dev/null
+++ b/app/views/errors/500.html.haml
@@ -0,0 +1,5 @@
+- content_for :page_title do
+  = t('errors.500')
+
+- content_for :content do
+  = t('errors.500')
diff --git a/app/views/layouts/error.html.haml b/app/views/layouts/error.html.haml
index 08b94af54..0b5f908ae 100644
--- a/app/views/layouts/error.html.haml
+++ b/app/views/layouts/error.html.haml
@@ -5,31 +5,9 @@
     %meta{ charset: 'utf-8' }/
     %title= yield :page_title
     %meta{ content: 'width=device-width,initial-scale=1', name: 'viewport' }/
-    %link{ href: 'https://fonts.googleapis.com/css?family=Roboto:400', rel: 'stylesheet' }/
-    :css
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: #282c37;
-        color: #9baec8;
-        text-align: center;
-        margin: 0;
-        padding: 20px;
-      }
-
-      .dialog img {
-        display: block;
-        margin: 20px auto;
-        margin-top: 50px;
-        max-width: 600px;
-        width: 100%;
-        height: auto;
-      }
-
-      .dialog h1 {
-        font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-weight: 400;
-      }
-  %body
+    = stylesheet_pack_tag 'common', media: 'all'
+    = stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
+  %body.error
     .dialog
       %img{ alt: 'Mastodon', src: '/oops.png' }/
       %div
diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml
index b51cf46df..b35e5c09a 100644
--- a/config/i18n-tasks.yml
+++ b/config/i18n-tasks.yml
@@ -45,6 +45,7 @@ ignore_missing:
   - 'sessions.{browsers,platforms}.*'
   - 'terms.body_html'
   - 'application_mailer.salutation'
+  - 'errors.500'
 ignore_unused:
   - 'activemodel.errors.*'
   - 'activerecord.attributes.*'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 13280303c..cc440e1b0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -310,6 +310,7 @@ en:
       content: Security verification failed. Are you blocking cookies?
       title: Security verification failed
     '429': Throttled
+    '500': We're sorry, but something went wrong.
     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
new file mode 100644
index 000000000..cd0a3bd2b
--- /dev/null
+++ b/lib/tasks/assets.rake
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+if Rake::Task.task_defined?('assets:precompile')
+  Rake::Task['assets:precompile'].enhance do
+    html = ApplicationController.render('errors/500', layout: 'error')
+    File.write(Rails.root.join('public', '500.html'), html)
+  end
+end
diff --git a/public/500.html b/public/500.html
deleted file mode 100644
index d085d490b..000000000
--- a/public/500.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>We're sorry, but something went wrong</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #282c37;
-      color: #9baec8;
-      text-align: center;
-      margin: 0;
-      padding: 20px;
-    }
-
-    .dialog img {
-      display: block;
-      margin: 20px auto;
-      margin-top: 50px;
-      max-width: 600px;
-      width: 100%;
-      height: auto;
-    }
-
-    .dialog h1 {
-      font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-weight: 400;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="dialog">
-    <img src="/oops.png" alt="Mastodon" />
-
-    <div>
-      <h1>We're sorry, but something went wrong.</h1>
-    </div>
-  </div>
-</body>
-</html>