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,6 +100,7 @@ body {
       vertical-align: middle;
       margin: 20px;
 
+      &__illustration {
         img {
           display: block;
           max-width: 470px;
@@ -107,6 +108,7 @@ body {
           height: auto;
           margin-top: -120px;
         }
+      }
 
       h1 {
         font-size: 20px;

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