Change error graphic to hover-to-play (#10055)

Fix #6060

app/javascript/packs/error.js

@@ -0,0 +1,13 @@
+import ready from '../mastodon/ready';
+
+ready(() => {
+  const image = document.querySelector('img');
+
+  image.addEventListener('mouseenter', () => {
+    image.src = '/oops.gif';
+  });
+
+  image.addEventListener('mouseleave', () => {
+    image.src = '/oops.png';
+  });
+});

app/javascript/styles/mastodon/basics.scss

@@ -100,12 +100,14 @@ body {
       vertical-align: middle;
       margin: 20px;
 
-      img {
+      &__illustration {
-        display: block;
+        img {
-        max-width: 470px;
+          display: block;
-        width: 100%;
+          max-width: 470px;
-        height: auto;
+          width: 100%;
-        margin-top: -120px;
+          height: auto;
+          margin-top: -120px;
+        }
       }
 
       h1 {

app/views/layouts/error.html.haml

@@ -7,8 +7,11 @@
     %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'
+    = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
+    = javascript_pack_tag 'error', integrity: true, crossorigin: 'anonymous'
   %body.error
     .dialog
-      %img{ alt: Setting.default_settings['site_title'], src: '/oops.gif' }/
+      .dialog__illustration
-      %div
+        %img{ alt: Setting.default_settings['site_title'], src: '/oops.png' }/
+      .dialog__message
         %h1= yield :content