Revert "Revert "Change error graphic to hover-to-play (mastodon#10055)""

This reverts commit c8554e6.

* add public/oops.png

Signed-off-by: lindwurm <lindwurm.q@gmail.com>

Author: lindwurm

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

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

app/views/layouts/error.html.haml

@@ -11,6 +11,7 @@
     = javascript_pack_tag 'error', crossorigin: 'anonymous'
   %body.error
     .dialog
-      %img{ alt: Setting.default_settings['site_title'], src: '/oops.gif' }/
-      %div
+      .dialog__illustration
+        %img{ alt: Setting.default_settings['site_title'], src: '/oops.gif' }/
+      .dialog__message
         %h1= yield :content