From 7fa0ff805faf2364ebfe5d97d4474fe630ace89a Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 11 Sep 2018 17:29:23 +0200
Subject: [PATCH] Update error page design (#1045)

no issue
* Adding basic 404 animation
* Adding bounce to tumbleweeds on error screen
* Bump Spirit dependency to 0.0.42
---
 ghost/admin/app/templates/error.hbs           | 19 +++---
 ghost/admin/package.json                      |  2 +-
 ghost/admin/public/assets/icons/desert.svg    | 59 +++++++++++++++++++
 .../admin/public/assets/icons/tumbleweed.svg  | 10 ++++
 ghost/admin/yarn.lock                         |  6 +-
 5 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/desert.svg
 create mode 100644 ghost/admin/public/assets/icons/tumbleweed.svg

diff --git a/ghost/admin/app/templates/error.hbs b/ghost/admin/app/templates/error.hbs
index 5e6b9c21fe..bd7e85ac0b 100644
--- a/ghost/admin/app/templates/error.hbs
+++ b/ghost/admin/app/templates/error.hbs
@@ -1,12 +1,15 @@
 <div class="gh-view">
-    <section class="error-content error-404 js-error-container">
-        <section class="error-details">
-             <img class="error-ghost" src="assets/img/404-ghost@2x.png" srcset="assets/img/404-ghost.png 1x, assets/img/404-ghost@2x.png 2x" />
-             <section class="error-message">
-                 <h1 class="error-code">{{code}}</h1>
-                 <h2 class="error-description">{{message}}</h2>
-             </section>
-        </section>
+
+    <section class="flex flex-column items-center flex-grow justify-center h-100 nt10">
+        <div class="absolute error-background nudge-right--5">
+            {{svg-jar "desert" class="error-background absolute"}}
+            <div class="traveler-1">{{svg-jar "tumbleweed" class="w6 h6 absolute bouncer-1"}}</div>
+            <div class="traveler-2">{{svg-jar "tumbleweed" class="w11 h11 absolute bouncer-2"}}</div>
+        </div>
+        <div class="absolute mt50 tc">
+            <h1 class="midlightgrey error-code-size fw6">{{code}}</h1>
+            <h2 class="midlightgrey f4 fw3">{{message}}</h2>
+        </div>
     </section>
 
     {{#if stack}}
diff --git a/ghost/admin/package.json b/ghost/admin/package.json
index d98bfeb29e..a31c2aa977 100644
--- a/ghost/admin/package.json
+++ b/ghost/admin/package.json
@@ -100,7 +100,7 @@
     "eslint": "4.19.1",
     "eslint-plugin-ghost": "0.0.25",
     "fs-extra": "4.0.3",
-    "ghost-spirit": "0.0.41",
+    "ghost-spirit": "0.0.42",
     "glob": "7.1.2",
     "google-caja-bower": "https://github.com/acburdine/google-caja-bower#ghost",
     "grunt": "1.0.3",
diff --git a/ghost/admin/public/assets/icons/desert.svg b/ghost/admin/public/assets/icons/desert.svg
new file mode 100644
index 0000000000..447d9168eb
--- /dev/null
+++ b/ghost/admin/public/assets/icons/desert.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="400px" height="279px" viewBox="0 0 400 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M276.798026,195.343773 L276.798026,158.593032 C273.790112,150.420462 268.841287,146.334177 261.951554,146.334177 C255.06182,146.334177 250.564056,150.142714 248.458261,157.759786 L248.458261,198.352822 C245.918845,198.561109 243.862133,198.203318 242.288126,197.279448 C240.71412,196.355579 240.531697,189.499744 241.740859,176.711942 C239.583923,170.744314 236.270435,167.7605 231.800397,167.7605 C227.330358,167.7605 224.203506,170.118082 222.419841,174.833244 L222.419841,214.320402 L177.893176,229.859097 L129.337378,206.083587 L112.176862,209.787984 L91.2536675,209.787984 L60.444701,220.093385 L0.234858353,237.454391 L17.6285021,90.1725882 L71.4751293,7.42980575 L250.816628,0.807818752 L380.090496,43.4584972 L356.035234,234.468028 L298.174151,190.589933 L282.918286,193.207955 L276.798026,195.343773 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2" transform="translate(1.000000, -9.000000)">
+            <g id="Group" transform="translate(25.000000, 0.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Combined-Shape" fill-opacity="0" fill="#4386AF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                <circle id="Oval" fill="#E5EFF5" fill-rule="nonzero" opacity="0.5" mask="url(#mask-2)" cx="180.5" cy="170.5" r="161.5"></circle>
+                <circle id="Oval-2" stroke="#E5EFF5" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)" cx="114.5" cy="81.5" r="27.5"></circle>
+            </g>
+            <g id="Group-39" transform="translate(0.000000, 25.000000)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                <path d="M20.2276,221.9436 L81.078,221.9436" id="Stroke-3" stroke="#9BAEB8" opacity="0.800000012"></path>
+                <path d="M127.136,230.7768 L145.549,230.7768" id="Stroke-4" stroke="#9BAEB8"></path>
+                <path d="M88.9296,261.025 L95.9617,261.025" id="Stroke-5" stroke="#9BAEB8"></path>
+                <path d="M326.645,243.9985 L342.002,243.9985" id="Stroke-6" stroke="#9BAEB8"></path>
+                <path d="M101.976,261.025 L109.27,261.025" id="Stroke-7" stroke="#9BAEB8"></path>
+                <path d="M128.069,202.5046 L134.542,202.5046" id="Stroke-8" stroke="#C5D2D9"></path>
+                <path d="M145.615,202.5046 L164.793,202.5046" id="Stroke-9" stroke="#C5D2D9"></path>
+                <path d="M134.051,195.5452 L153.229,195.5452" id="Stroke-10" stroke="#C5D2D9"></path>
+                <path d="M329.042,221.9436 L382.335,221.9436" id="Stroke-11" stroke="#9BAEB8" opacity="0.800000012"></path>
+                <path d="M281.91,239.387 L311.401,239.387" id="Stroke-12" stroke="#9BAEB8"></path>
+                <path d="M201.472,204.6101 C201.472,204.6101 221.308,197.5886 240.999,191.1397" id="Stroke-19" stroke="#C5D2D9"></path>
+                <path d="M264.061,239.387 L275.735,239.387" id="Stroke-13" stroke="#9BAEB8"></path>
+                <path d="M321.548,221.9436 L315.053,221.9436" id="Stroke-14" stroke="#9BAEB8" opacity="0.800000012"></path>
+                <path d="M91.8132,221.9436 L111.936,221.9436" id="Stroke-15" stroke="#9BAEB8" opacity="0.800000012"></path>
+                <path d="M213.033,221.9436 L250.306,221.9436" id="Stroke-16" stroke="#9BAEB8" opacity="0.800000012"></path>
+                <path d="M22.0345,213.2635 C22.0345,213.2635 85.1422,196.2405 113.399,185.3969 C120.074,182.8353 131.455,184.7731 137.399,184.5817 C146.241,184.297 151.924,180.9184 153.459,180.9163 C156.293,180.9124 166.907,186.5593 178.327,193.1497 C194.321,202.3795 211.896,208.8831 211.896,208.8831" id="Stroke-18" stroke="#C5D2D9"></path>
+                <path d="M307.311,168.2938 C315.923,166.4755 321.666,164.8642 324.246,166.3373 C330.427,169.8668 384.403,213.2063 384.403,213.2063" id="Stroke-20" stroke="#C5D2D9"></path>
+                <path d="M273.276,239.1093 L273.276,193.4967 L253.641,193.4967 C251.939,193.4968 250.306,192.8206 249.103,191.617 C247.899,190.4135 247.223,188.7811 247.223,187.079 C247.223,178.4714 247.223,162.1198 247.223,152.161 C247.223,146.9 251.488,142.634 256.75,142.634 C256.793,142.634 256.837,142.634 256.88,142.634 C262.142,142.634 266.407,146.9 266.407,152.161 C266.407,158.012 266.407,165.186 266.407,169.4959 C266.407,170.5082 266.809,171.479 267.525,172.1947 C268.241,172.9105 269.211,173.3126 270.224,173.3126 L273.276,173.3126 L273.276,135.435 C273.276,127.562 279.668,121.17 287.541,121.17 C295.414,121.17 301.806,127.562 301.806,135.435 L301.806,191.5465 L304.564,191.5465 C305.576,191.5465 306.547,191.1444 307.262,190.4287 C307.978,189.7129 308.38,188.7421 308.38,187.7299 C308.38,187.0914 308.38,186.4094 308.38,185.7143 C308.38,181.486 311.808,178.0583 316.036,178.0583 C316.037,178.0583 316.037,178.0583 316.038,178.0583 C320.266,178.0583 323.694,181.486 323.694,185.7143 C323.694,190.3092 323.694,196.0875 323.694,200.4421 C323.694,203.9865 320.82,206.8599 317.276,206.8599 L301.806,206.8599 L301.806,239.1093" id="Stroke-21" stroke="#9BAEB8"></path>
+                <path d="M257.13,142.044 L257.13,135.959" id="Stroke-22" stroke="#9BAEB8"></path>
+                <path d="M251.353,144.207 L247.142,139.102" id="Stroke-23" stroke="#9BAEB8"></path>
+                <path d="M262.517,144.132 L265.823,140.827" id="Stroke-24" stroke="#9BAEB8"></path>
+                <path d="M279.072,123.986 L275.472,119.569" id="Stroke-25" stroke="#9BAEB8"></path>
+                <path d="M283.947,121.359 L281.724,114.127" id="Stroke-26" stroke="#9BAEB8"></path>
+                <path d="M275.335,128.022 L270.204,126.832" id="Stroke-27" stroke="#9BAEB8"></path>
+                <path d="M299.529,126.81 L304.724,123.305" id="Stroke-28" stroke="#9BAEB8"></path>
+                <path d="M295.548,122.96 L298.538,118.544" id="Stroke-29" stroke="#9BAEB8"></path>
+                <path d="M289.774,120.841 L290.521,115.434" id="Stroke-30" stroke="#9BAEB8"></path>
+                <path d="M310.434,180.3921 L306.35,176.3088" id="Stroke-31" stroke="#9BAEB8"></path>
+                <path d="M316.171,178.1503 L316.171,172.5099" id="Stroke-32" stroke="#9BAEB8"></path>
+                <path d="M321.451,179.7538 L325.081,176.1236" id="Stroke-33" stroke="#9BAEB8"></path>
+                <path d="M323.366,183.706 L328.384,182.8937" id="Stroke-34" stroke="#9BAEB8"></path>
+                <path d="M247.6,148.722 L242.331,146.272" id="Stroke-35" stroke="#9BAEB8"></path>
+                <path d="M92.7816,260.9718 C93.9917,260.1606 96.412,258.5382 98.4739,257.917 C100.562,257.288 103.797,256.7313 105.308,257.1981 C106.635,257.6081 107.237,259.6813 107.538,260.7179" id="Stroke-37" stroke="#9BAEB8"></path>
+                <path d="M322.104,243.4301 C323.169,241.8111 325.3,238.5733 326.814,237.6815 C328.075,236.9386 329.9,238.0644 331.186,238.0797 C332.307,238.093 333.695,237.0315 334.535,237.7733 C335.595,238.7085 336.895,242.0304 337.545,243.6913" id="Stroke-38" stroke="#9BAEB8"></path>
+                <path d="M0,213.3143 L267.074,213.3143" id="Stroke-1" stroke="#C5D2D9"></path>
+                <path d="M309.401,213.3143 L397.557,213.3143" id="Stroke-17" stroke="#C5D2D9"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/ghost/admin/public/assets/icons/tumbleweed.svg b/ghost/admin/public/assets/icons/tumbleweed.svg
new file mode 100644
index 0000000000..3bc33aa0cc
--- /dev/null
+++ b/ghost/admin/public/assets/icons/tumbleweed.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.6206865,0.107049525 C16.6732015,0.579543114 13.1198436,2.02870886 10.1667456,4.37051701 C9.34612325,5.02259194 7.76550582,6.61786618 7.04779948,7.52481151 C4.78745543,10.3864917 3.36046043,14.1337622 3.08718687,17.8980174 C3.00471378,19.1466441 3.14170129,21.6086366 3.36617241,22.7021161 C4.2571424,27.1004683 6.5140793,30.821616 9.85499127,33.4353786 C15.2490123,37.6622942 22.6914326,38.337512 28.6880184,35.1640476 C33.0300315,32.8655456 35.9245065,28.9101872 36.8227918,24.0535451 C36.9995628,23.0425062 37.0095838,22.8102821 36.9517625,20.9473244 C36.8939411,19.084466 36.86959,18.8528379 36.6218701,17.8552079 C35.3731493,12.8226595 31.8657879,9.04549195 27.0685193,7.55043761 C25.5890141,7.09721326 24.6746951,6.96183197 22.9148014,6.96391782 C21.5796993,6.961534 21.1993009,6.99917853 20.2858838,7.18173965 C16.0464861,8.03276447 12.770811,10.5992479 11.0932902,14.3797926 C9.86120431,17.1414516 9.74345718,20.33349 10.7676067,23.1636838 C12.1130305,26.8519547 15.3689641,29.5114073 19.2092241,30.0473702 C20.3325818,30.21096 22.4093406,30.0785585 23.4061327,29.7817725 C25.0900669,29.2836528 26.3920997,28.4961966 27.5427146,27.2925647 C29.0206164,25.743477 29.7586655,24.1056912 29.9348352,21.9517085 C30.0920652,20.0476298 29.4564311,18.0135335 28.2480951,16.5118243 C26.3911978,14.2224603 23.1126166,13.3512723 20.502739,14.4620345 C19.3048248,14.971378 18.2504117,15.9231194 17.7284162,16.9787557 C17.4261818,17.580969 17.1651339,18.6632246 17.182771,19.2296806 C17.2320744,20.8179027 18.1360718,22.285841 19.4284843,22.8650107 C19.885744,23.0744891 20.1475936,23.1266353 20.6943411,23.1445139 C21.3365891,23.1594128 21.4223691,23.1397463 21.9514796,22.865706 C23.0178177,22.3003426 23.5886157,21.414951 23.4314859,20.5517091 C23.328169,20.0220037 22.8469591,19.3149022 22.4234702,19.0874458 C21.9914635,18.8596914 21.3599381,18.896442 21.0128095,19.1734621 C20.6994518,19.4149235 20.4109463,19.888013 20.4188629,20.1452673 C20.4289842,20.4714537 20.2053147,20.2463811 20.0611121,19.7865019 C19.8113879,19.0033167 20.0535963,18.1454384 20.69384,17.5414372 C21.2323703,17.0181881 21.7036595,16.8319519 22.629202,16.7607352 C23.6498442,16.6779967 24.409739,16.8696958 25.1545022,17.3883759 C25.8013598,17.8324623 25.9804357,18.0163146 26.3987135,18.6481271 C26.9088843,19.4404503 27.131251,20.1899639 27.1640198,21.2457989 C27.2160289,22.9200373 26.7675877,24.1192989 25.6087556,25.3320689 C24.7944465,26.1903445 24.2168342,26.5776164 23.2140295,26.9603193 C19.648446,28.289102 15.6284086,26.7017739 13.8302346,23.2416547 C13.1018057,21.8459263 12.9525926,21.2229539 12.904692,19.4028057 C12.8513801,17.6854599 12.9315484,17.1932004 13.4679743,15.7674756 C14.261139,13.6637518 16.0991967,11.716963 18.3040243,10.6786094 C20.8331324,9.47557336 24.0279377,9.33562308 26.7375246,10.3183541 C32.2348626,12.2903717 35.3057077,18.2039414 33.9676995,24.2599445 C33.4137368,26.812125 31.9219057,29.2977571 29.90377,31.0437089 C25.5983337,34.7679357 19.0481861,35.4750372 13.8576922,32.7713846 C12.5972468,32.1136481 11.6489565,31.4379336 10.5499499,30.3975935 C8.38861361,28.3579349 6.97705099,25.8916713 6.21404959,22.8296506 C5.97514818,21.8402648 5.9510977,21.617576 5.89027004,19.6601593 C5.82924195,17.6941012 5.84006467,17.4875032 6.02465208,16.4506395 C6.93716729,11.4813618 9.80218043,7.42379701 14.1394836,4.98862246 C17.6846243,2.99832888 22.0666213,2.28069882 26.1725388,3.00597698 C34.1236267,4.42236516 40.0423491,10.7554877 41.1048791,19.007687 C41.6193589,23.013801 40.7682726,27.4396664 38.7885175,30.9719955 C36.8994527,34.3552363 33.9696035,37.1686442 30.4956122,38.9419105 C28.5325922,39.9383485 26.7475457,40.534205 24.4718694,40.9646837 C23.2908908,41.1895576 20.5561511,41.350565 19.3308794,41.2586885 C14.1183393,40.8932683 9.52269384,38.9278062 5.83565541,35.4997694 C4.80900065,34.5428631 3.72151822,33.3043677 2.86993089,32.1272557 C2.21736127,31.2104771 1.94268477,31.0210625 1.33641232,31.0395372 C0.773430719,31.0567206 0.374092581,31.3267878 0.138598321,31.832357 C-0.136779648,32.4508597 -0.0408783683,32.7573796 0.783652172,33.892278 C4.62391218,39.1803921 10.2635488,42.6610717 16.6416352,43.6867116 C18.4105478,43.9763461 19.4444177,44.0395174 21.4192626,43.9792265 C23.4809898,43.9164525 24.4738737,43.7829585 26.3588298,43.3473148 C34.0804361,41.5562691 40.2731334,36.0394073 42.7942248,28.7182895 C45.08373,22.0397113 44.070303,14.5258018 40.115703,8.905641 C38.3923861,6.45745475 35.9649914,4.22848089 33.4399919,2.7668994 C30.0853511,0.832724985 26.0234259,-0.152290556 22.0923753,0.0191460503 C21.4772844,0.0468579931 20.8109859,0.0842045539 20.6206865,0.107049525 Z" id="Fill-1" fill="#9DADB4"></path>
+    </g>
+</svg>
diff --git a/ghost/admin/yarn.lock b/ghost/admin/yarn.lock
index a06d7a4e2c..25dc9545d8 100644
--- a/ghost/admin/yarn.lock
+++ b/ghost/admin/yarn.lock
@@ -5247,9 +5247,9 @@ ghost-ignition@^2.7.0:
     prettyjson "^1.1.3"
     uuid "^3.0.0"
 
-ghost-spirit@0.0.41:
-  version "0.0.41"
-  resolved "https://registry.yarnpkg.com/ghost-spirit/-/ghost-spirit-0.0.41.tgz#6436f264560a9a6287bf2d6fb8f9509004b9fe6a"
+ghost-spirit@0.0.42:
+  version "0.0.42"
+  resolved "https://registry.yarnpkg.com/ghost-spirit/-/ghost-spirit-0.0.42.tgz#31e04c03bd4889be21a714f11031eb6cdaf1e739"
   dependencies:
     autoprefixer "8.2.0"
     bluebird "^3.4.6"