Merge pull request #342 from glitch-soc/merge-upstream

Merge upstream

28 files changed, 308 insertions, 113 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 11ac0a37f..0ed8c392a 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -296,7 +296,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto;
+  background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -311,7 +311,7 @@
   }
 
   > .mastodon {
-    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
     flex: 1;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index c12f56828..1ac399fa1 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -77,13 +77,12 @@
   height: 80vh;
   width: 80vw;
   max-width: 520px;
-  max-height: 420px;
+  max-height: 470px;
 
   .react-swipeable-view-container > div {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding: 25px;
     display: none;
     flex-direction: column;
     align-items: center;
@@ -156,23 +155,32 @@
   .onboarding-modal__nav,
   .error-modal__nav {
     color: darken($ui-secondary-color, 34%);
-    background-color: transparent;
     border: 0;
     font-size: 14px;
     font-weight: 500;
-    padding: 0;
+    padding: 10px 25px;
     line-height: inherit;
     height: auto;
+    margin: -10px;
+    border-radius: 4px;
+    background-color: transparent;
 
     &:hover,
     &:focus,
     &:active {
       color: darken($ui-secondary-color, 38%);
+      background-color: darken($ui-secondary-color, 16%);
     }
 
     &.onboarding-modal__done,
     &.onboarding-modal__next {
-      color: $ui-highlight-color;
+      color: $ui-base-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: darken($ui-base-color, 4%);
+      }
     }
   }
 }
@@ -208,6 +216,8 @@
 
 .onboarding-modal__page__wrapper {
   pointer-events: none;
+  padding: 25px;
+  padding-bottom: 0;
 
   &.onboarding-modal__page__wrapper--active {
     pointer-events: auto;
@@ -235,6 +245,10 @@
     }
   }
 
+  .navigation-bar a {
+    color: inherit;
+  }
+
   p {
     font-size: 16px;
     color: lighten($ui-base-color, 8%);
@@ -262,29 +276,56 @@
   }
 }
 
-.onboarding-modal__page-one {
-  display: flex;
-  align-items: center;
+.onboarding-modal__page__wrapper-0 {
+  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+  height: 100%;
+  padding: 0;
 }
 
-.onboarding-modal__page-one__elephant-friend {
-  background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
-  width: 155px;
-  height: 193px;
-  margin-right: 15px;
+.onboarding-modal__page-one {
+  &__lead {
+    padding: 65px;
+    padding-top: 45px;
+    padding-bottom: 0;
+    margin-bottom: 10px;
+
+    h1 {
+      font-size: 26px;
+      line-height: 36px;
+      margin-bottom: 8px;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  &__extra {
+    padding-right: 65px;
+    padding-left: 185px;
+    text-align: center;
+  }
 }
 
-@media screen and (max-width: 400px) {
-  .onboarding-modal__page-one {
-    flex-direction: column;
-    align-items: normal;
+.display-case {
+  text-align: center;
+  font-size: 15px;
+  margin-bottom: 15px;
+
+  &__label {
+    font-weight: 500;
+    color: $ui-base-color;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    font-size: 12px;
   }
 
-  .onboarding-modal__page-one__elephant-friend {
-    width: 100%;
-    height: 30vh;
-    max-height: 160px;
-    margin-bottom: 5vh;
+  &__case {
+    background: $ui-base-color;
+    color: $ui-secondary-color;
+    font-weight: 500;
+    padding: 10px;
+    border-radius: 4px;
   }
 }
 
@@ -374,16 +415,6 @@
   }
 }
 
-.onboarding-modal__image {
-  border-radius: 8px;
-  width: 70vw;
-  max-width: 450px;
-  max-height: auto;
-  display: block;
-  margin: auto;
-  margin-bottom: 20px;
-}
-
 .onboard-sliders {
   display: inline-block;
   max-width: 30px;
diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss
index a17476ccb..ceb79bbb9 100644
--- a/app/javascript/flavours/glitch/styles/modal.scss
+++ b/app/javascript/flavours/glitch/styles/modal.scss
@@ -1,5 +1,5 @@
 .modal-layout {
-  background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed;
+  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -15,6 +15,6 @@
   > * {
     flex: 1;
     max-height: 235px;
-    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
   }
 }
diff --git a/app/javascript/images/elephant-friend-1.png b/app/javascript/images/elephant-friend-1.png
deleted file mode 100644
index 2b2383330..000000000
--- a/app/javascript/images/elephant-friend-1.png
+++ /dev/null
Binary files differdiff --git a/app/javascript/images/elephant_ui_greeting.svg b/app/javascript/images/elephant_ui_greeting.svg
new file mode 100644
index 000000000..f3eb4b142
--- /dev/null
+++ b/app/javascript/images/elephant_ui_greeting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="266.89999" width="463.97818" viewBox="0 0 463.97818 266.89999"><g transform="translate(-184 -205.1)"><defs><path id="a" d="M184 151h494.79999v321H184z"/></defs><clipPath id="b"><use height="100%" width="100%" xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M525.7 478c-.5 0-.9-.2-1.2-.6-.3-.4-.4-.9-.2-1.3.2-.6 20-65 22-72 .2-.7.5-1.4.9-2.1.1-.4.3-.8.6-1.1l.3-.3c8.2-11.9 29.8-12.9 36.2-12.9 2.4 0 5 .1 7.6.3 13.6.9 25.2 3.7 33.6 8 6.4 3.3 10.7 7.4 12.2 11.8.1.2.2.4.2.6.2.6.3 1.3.4 1.9.6 5.4-1 13.6-2 18.5-1 5-11.9 47.7-12 48.1-.2.7-.8 1.1-1.5 1.1h-97.1z"/></g><g transform="translate(-184 -205.1)"><defs><path id="c" d="M184 151h494.79999v321H184z"/></defs><clipPath id="d"><use height="100%" width="100%" xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" d="M414.9 482.9c-.6 0-1.2-.4-1.4-.9H295.2l-81.3.8c-.6 0-1.1-.3-1.3-.8h-33.9c-.8 0-1.5-.7-1.5-1.5v-168c0-.3.1-.7.3-.9l2.9-3.8c-1.4-3-5.5-12.9-2.1-21.9-.2-.4-.3-.8-.5-1.2-1.9-5-2.6-10.8-2.3-17.1 0-1.1.1-2.2.3-3.3l.4-3.1.4-2.1c.5-3.2 1.3-6 2.2-8.4 2-5.4 5.5-10.4 10-14.3 4.1-3.6 9.1-6.5 15-8.6 7.6-2.7 16.2-4.1 25.5-4.1 2.4 0 5 .1 7.5.3 2.1-3.2 4.6-5.8 7.3-7.8 1.6-1.3 3.3-2.3 4.9-3.1 1.6-.8 3.5-1.7 5.4-2.2 2.9-.9 6.2-1.4 9.6-1.4.6 0 1.3 0 1.9.1 3.6.2 7.1 1 10.5 2.4 4.4-3.1 9.4-5.2 14.6-6.2 2.3-.4 4.7-.7 7.1-.7 3.3 0 6.5.4 9.6 1.3 2.8.8 5.5 1.8 7.8 3 2.5 1.3 4.8 2.9 6.9 4.7 3.9 3.3 7.2 7.6 9.5 12.5 7.9.2 15.5 3.2 21.7 8.3 3.2 2.7 5.9 5.9 7.9 9.4 2.1 3.6 3.5 7.5 4.2 11.5.7 3.7.7 7.8.2 12.2-.6 5-1.5 8.6-3 11.9-.8 1.8-1.9 3.5-3.3 5.3-1.4 1.6-2.6 2.9-3.9 4 25.8 10.3 47.4 26.8 62.7 48 8.3 11.3 16 24.7 22.9 39.7 7.1-5.1 14.6-12.5 23.2-23.3 22.7-28.1 60.2-50.7 89-53.6 4.5-.4 9-.7 13.3-.7 18.2 0 30.4 3.9 34.1 5.3 1.8-3.1 7.3-11.3 15.7-11.3 1.5 0 3 .3 4.5.8 4.6 1.5 7.8 4.3 9.4 8.2 1.5 3.5 1.3 7.4.7 10.5 1-.3 2.1-.5 3.4-.5 3.3 0 6.4 1.4 9.2 4.2 3.8 3.8 5.2 10.5 3.4 16.5-1.5 4.9-6.3 13.7-22.2 17-5.9 1.2-11.5 1.8-16.7 1.8-11.1 0-17.2-2.8-18.9-3.8-3.9.6-37.3 6.7-56.4 42.2-3.7 6.9-8.6 15.8-14 24.3 2.8 6.9 3.5 16 2.2 26.3-2.5 18.9-10 40-10.1 40.2-.2.6-.8 1-1.4 1l-94.8.9z"/></g><g transform="translate(-184 -205.1)"><defs><path id="e" d="M184 151h494.79999v321H184z"/></defs><clipPath id="f"><use height="100%" width="100%" xlink:href="#e" overflow="visible"/></clipPath><g clip-path="url(#f)"><path d="M414.9 481.4c-8.2-22.8-2.2-33.8 10.8-38.8s27 0 40 24c0 0 7-5 11-25s10-38 27-38c11 0 19 14 16 37-2.5 18.9-10 39.9-10 39.9l-94.8.9z" fill="#ebded8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M415.1 480.7c-6.4-18.1-4.1-29.8 7-35.9 6.6 4 12.9 11.4 18.7 22.1l.3.5.5-.3c.2-.2 5.6-4.2 9.7-18.8 4.9 4.2 9.6 10.5 14 18.6l-3.7-3.4-.8-1.9c.3-.2 12.4.2 16.4-19.8 2.4-11.8 5.7-24.7 12.7-31.8 4.9 6.5 6.7 17.6 5 30.7-2.3 17.4-8.9 36.7-9.9 39.4l-69.9.6z" class="st4" fill="#fff"/><path d="M469.8 480.5H178.7v-168l3.5-4.5c61-42 180-46.3 235 30" class="st5" fill="#fccf84" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M417.2 338c-55.6-75.9-174-72-235-30l-3.5 4.5v168h291.1S458.9 395 417.2 338z" class="st6" fill="#fccf84"/><path d="M416.8 338.3c-6.4-8.7-13.8-16.6-22-23.5-8.2-6.9-17.3-12.8-26.9-17.7-19.2-9.8-40.4-15.4-61.8-17.4-21.4-2-43.2-.7-64.3 4-10.5 2.3-20.9 5.5-30.8 9.6-10 4.1-19.6 9.1-28.5 15.1l.1-.1-3.5 4.5.1-.3v168l-.5-.5h291.1l-.5.6c-1.8-12.6-4.4-25.1-7.4-37.5-3.1-12.4-6.6-24.6-10.9-36.7-4.2-12-9-23.9-14.7-35.3-2.8-5.7-5.9-11.3-9.1-16.8-3.2-5.5-6.7-10.8-10.4-16zm.8-.6c3.8 5.2 7.3 10.5 10.6 16 3.2 5.5 6.4 11.1 9.2 16.9 5.7 11.5 10.6 23.3 14.9 35.4 4.3 12.1 7.9 24.3 11 36.8 3.1 12.4 5.8 24.9 7.7 37.6.1.7-.4 1.3-1.1 1.4h-.2l-291-.8c-.3 0-.5-.2-.5-.5v-168c0-.1 0-.2.1-.3l3.5-4.5.1-.1c9-6.1 18.6-11.1 28.6-15.2s20.4-7.3 31-9.6c21.1-4.7 43-6.1 64.6-4 21.5 2.1 42.8 7.7 62.2 17.5 9.7 4.9 18.8 10.9 27.1 17.8s15.8 14.9 22.2 23.6z"/><path d="M182.3 479.7V323.5s42.9-30 87.3 15.6 79.6 126 148 110.2c56.4-13-17 21.8-17 21.8l-218.3 8.6z" class="st7" fill="#b88671"/><path d="M179.2 312.7l3.3-4.3c16.5-11.3 37.2-19.9 60.1-24.9l79.2.8c1 .5 9.3 4.6 9 10.1-.2 3.6-4.5 9.2-23.3 15-40.8 12.5-119.2 21.1-126.2 21.8l-2.1-18.5z" class="st7" fill="#b88671"/><path d="M181.1 283.7c-6.4 10.6 1.1 24.3 1.1 24.3l11.7-7.5-12.8-16.8z" fill="#a6725c" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M646.4 325.7c-.2.2-.4.5-.6.8-4.6 8.1-16.2 13.7-32.9 13.7s-25.8-8.1-25.8-8.1c-65.8 3.5-80.5 51.6-124.5 93.1-44 41.5-131.1 34.9-220.8 17l-7.5 8.8 4.5 29.4s221.6-.5 230.5-.5c-1.6-12.3-2.6-16.4-2.6-16.4 31.7-17.9 49.4-44.9 65.1-74.1 21-39 58-43 58-43s11 7 35 2c17.1-3.5 22.5-14.3 21.6-22.7z" class="st7" fill="#b88671"/><path d="M241.8 392.5c-3.8 0-7-3.1-7.1-6.9l-.2-28c0-3.8 3.1-7 6.9-7.1 3.8 0 7 3.1 7.1 6.9l.2 28c.1 3.9-3 7.1-6.9 7.1zm157.5 0c-3.8.1-7.1-3-7.2-6.8l-.7-28c-.1-3.8 3-7.1 6.8-7.2 3.8-.1 7.1 3 7.2 6.8l.7 28c.1 3.9-2.9 7.1-6.8 7.2z"/><path d="M213.9 482.3c-.4 0-.8-.3-.9-.7-7.6-21.1-3.9-34.2 11.4-40.1 3.1-1.2 6.3-1.8 9.3-1.8 11.5 0 22 8.5 31.3 25.1 1.9-2 6.7-8.4 9.8-23.6 4-20.2 10.2-38.8 28-38.8 4.1 0 7.8 1.8 10.8 5.1 5.8 6.6 8.1 18.7 6.2 33-2.5 18.8-10 39.9-10.1 40.1-.1.4-.5.7-.9.7-.1.1-94.9 1-94.9 1z" class="st4" fill="#fff"/><path d="M302.7 403.5c11 0 19 14 16 37-2.5 18.9-10 39.9-10 39.9l-94.8.9c-8.2-22.8-2.2-33.8 10.8-38.8 2.9-1.1 5.9-1.8 9-1.8 10.3 0 21 7.2 31 25.8 0 0 7-5 11-25s10-38 27-38m0-2c-18.5 0-24.8 19-29 39.6-2.6 12.9-6.4 19.3-8.6 22.1-9.3-16.2-19.9-24.4-31.5-24.4-3.2 0-6.4.6-9.7 1.9-7.5 2.9-12.4 7.6-14.5 14-2.4 7-1.5 16 2.6 27.4.3.8 1 1.3 1.9 1.3l94.8-.9c.8 0 1.6-.5 1.9-1.3.1-.2 7.6-21.3 10.1-40.3 1.9-14.6-.5-26.9-6.5-33.8-3.2-3.7-7.1-5.6-11.5-5.6z"/><path d="M282.8 480.7c7.3-7 11.4-16.5 13.5-23.5 2.1-6.9 6.8-29.2 7.8-36.6.4-3.1 1.9-10.4 6.8-10.4 1 0 2.7.5 3.9 1.1 4.2 6.7 5.4 17 3.7 29.7-2.3 17.4-8.9 36.7-9.9 39.4l-25.8.3zm-69.3.1c-7.1-20-3.6-32.6 10.6-38.1.5-.2.9-.3 1.3-.5-1.5 1.3-2.6 3.2-3.4 5.3-2.4 6.3-.9 15.2 4 24.3 2 3.6 4 6.6 6.1 8.9l-18.6.1z" class="st9" fill="#ebded8"/><path d="M264.8 465.8c-4 4-7 5-7 5" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M525.7 476.5s20-65 22-72 15-17 44-15 44 12 45 21c.6 5.1-1 13-2 18s-12 48-12 48h-97z" class="st5" fill="#fccf84" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M550.8 475.7l18-59.1c2.3.6 13.2 3.2 27.4 3.2 5.1 0 10.1-.3 14.9-1 16.8-2.2 21.9-3.9 25.1-8.9v.3c.6 5.1-1 13.1-2 17.8-.9 4.7-10.8 43.3-11.9 47.6h-71.5v.1z" class="st7" fill="#b88671"/><path d="M548.9 401.8c-2.2 2.7 4.8 11.7 23.8 15.7s44 1 53-1 10.6-7.9 10.6-7.9m-49 11.1c-.6 10.8 3.4 14.8 7.4 14.8s8.5-6.6 8.3-15.1m-2.4 10.6c1.1 5.5 6.1 5.5 9.1 4.5s6-5 5-16m-.7 10.9c1.6 4.1 5.9 4.1 8.7 3.2 3-1 6-5 5-16" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M364.5 264.6c1.4-18.7-12.6-35.1-31.3-36.5-.7-.1-1.5-.1-2.2-.1-5.2-11.8-16.5-20.4-30.2-21.4-9-.7-17.5 2-24.2 7-3.2-1.4-6.6-2.3-10.3-2.6-11.9-.9-22.8 5.1-28.7 14.6-25.3-2.1-53.4 5.5-59 30.9-6.1 27.6 5.1 42.5 25 49.4 18.5 6.5 41.1 8.4 52.7 8.8 13.2.4 41.2-1.7 62.2-8.5 13-4.2 24.7-10.8 26-11.3 14.6-8.7 18.8-14.4 20-30.3z" class="st11" fill="#e0b37d"/><path d="M364.5 264.6c1.4-18.7-12.6-35.1-31.3-36.5-.7-.1-1.5-.1-2.2-.1-5.2-11.8-16.5-20.4-30.2-21.4-9-.7-17.5 2-24.2 7-3.2-1.4-6.6-2.3-10.3-2.6-11.9-.9-22.8 5.1-28.7 14.6-25.3-2.1-53.4 5.5-59 30.9-6.1 27.6 5.1 42.5 25 49.4 18.5 6.5 41.1 8.4 52.7 8.8 13.2.4 41.2-1.7 62.2-8.5 13-4.2 24.7-10.8 26-11.3 14.6-8.7 18.8-14.4 20-30.3z" class="st11" fill="#e0b37d"/><path d="M355.3 266.5c-2.1-17.9-8.8-23.1-21.6-26.6.5 5.9-.4 9.5-.7 10.7-.6 2.4-1.6 4.2-3.1 4.2-1 0-1.9-.7-2.2-1.8-.2-.7-.4-1.6-.6-2.8-.4-2.1-1-5.3-2.5-10.3-3.6-12.7-15.3-18.4-25.3-18.4-3.7 0-7.5 1.1-10.4 2.5 12.1 15.4 3.5 31.3 1.6 34.5-3.1 5.3-8.9 6-9.1 6l-.8.1c-1.2.1-1.7-.6-.9-1.2.8-.6 1.9-1.6 2.3-2.9.9-4 1.5-11.4-1.7-21.6-3.2-10-14.4-17.3-26.6-17.3-5.5 0-11 1.5-15.7 4.4l-.1.1h-.2c-2.6-.2-5.3-.3-7.9-.3-27.4 0-46.3 11.5-50.5 30.8-5.5 24.8 2.8 41.9 24.7 49.5 20.8 7.3 45.4 8.4 52.5 8.6h3.4c15.5 0 40.5-3.2 58.7-9 10.6-3.4 20.5-8.5 24.2-10.4.9-.5 1.5-.8 1.6-.8 2.6-1.5 2.3-1.3 4.1-2.6 4.3-4.7 8-15.2 6.8-25.4z" class="st12" fill="#a6725c"/><path d="M288.7 261c3.5-4.6 5.7-10.2 6.1-16.3 1-13.4-6.7-26-18.3-31.1" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M331.4 227.9c2.5 5.9 3.3 12.4 2.5 18.7 0 .1-.1.1-.1.1-.1 0-.1-.1-.1-.1.6-6.3-.5-12.6-3.2-18.3-.1-.3 0-.5.2-.7.3-.1.6 0 .7.3z"/><path d="M237.9 226.2c-4.1 7.2-3.8 14.9-5 20.8-.8 3.7-5.7 14.4-12.7 19.3" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M367.7 358.5c0 16 18 30 40 30s37-8 58-34 58-50 88-53 48 5 48 5 7-15 19-11 10 16 8 20c0 0 7-5 14 2s6 26-18 31-35-2-35-2-37 4-58 43-42 72-101 88" class="st6" fill="#fccf84"/><path d="M368.2 358.5c.1 2.8.7 5.6 1.8 8.2.3.6.6 1.3 1 1.9l.5.9.6.9c.4.6.8 1.2 1.2 1.7l1.4 1.6c.4.6 1 1 1.5 1.5l1.5 1.5c1.1.9 2.1 1.8 3.4 2.6l1.8 1.2 1.9 1c1.2.7 2.5 1.3 3.8 1.9 5.2 2.3 10.9 3.4 16.5 3.7 5.7.2 11.4-.2 17-1.4 5.5-1.2 10.8-3.4 15.6-6.4 4.9-3 9.3-6.6 13.4-10.5 1-1 2.1-2 3.1-3l3-3.1c1.9-2.2 3.9-4.3 5.7-6.5 1.8-2.2 3.8-4.4 5.7-6.7.9-1.1 2-2.1 3-3.2s2-2.2 3.1-3.2c8.3-8.2 17.4-15.7 27.3-22 9.8-6.3 20.2-11.9 31.3-15.7 2.7-1 5.6-1.8 8.4-2.6 1.4-.4 2.9-.6 4.3-1l2.2-.5 2.2-.3c1.5-.2 2.9-.5 4.4-.6l4.4-.3c2.9-.1 5.8-.2 8.8-.2 5.8.1 11.7.5 17.5 1.5 2.9.5 5.8 1 8.6 1.8 2.8.7 5.6 1.6 8.4 2.7l-.7.2c1.9-3.7 4.4-7 7.9-9.5 1.7-1.2 3.7-2.1 5.8-2.4 2.1-.3 4.3 0 6.2.7 2 .7 3.8 1.7 5.4 3.1 1.6 1.4 2.7 3.3 3.4 5.2.7 2 .9 4.1.7 6.2-.1 2.1-.6 4.1-1.5 6.1l-.7-.6c1.8-1.1 3.8-1.7 5.9-1.8 2.1 0 4.2.5 5.9 1.6 1.8 1.1 3.3 2.5 4.4 4.2l.8 1.3.6 1.4c.2.5.3 1 .4 1.5.1.5.3 1 .3 1.5.6 4-.2 8.2-2.2 11.8-2 3.5-5.1 6.3-8.6 8.3-3.5 2-7.4 3.2-11.2 4.1-3.9.8-7.8 1.4-11.8 1.6-4 .2-8 .2-11.9-.3-2-.3-3.9-.6-5.9-1.2-1.9-.6-3.8-1.2-5.6-2.2l.3.1c-4.3.6-8.6 1.9-12.8 3.4-4.1 1.5-8.2 3.4-12 5.6-7.7 4.3-14.6 10-20.5 16.6-2.9 3.3-5.6 6.8-8 10.5-2.4 3.7-4.4 7.6-6.6 11.5-4.3 7.8-8.7 15.6-13.5 23.1-4.9 7.5-10.3 14.6-16.4 21.2l-2.3 2.4c-.8.8-1.5 1.6-2.4 2.4l-4.9 4.6c-3.5 2.9-6.9 5.8-10.6 8.3l-2.7 2c-.9.6-1.9 1.2-2.9 1.8-1.9 1.2-3.8 2.4-5.8 3.5-4 2.1-7.9 4.3-12.1 6l-3.1 1.4-1.5.7c-.5.2-1 .4-1.6.6l-6.3 2.3c-2.1.8-4.2 1.4-6.4 2.1l-6.4 2c-.5.1-1-.1-1.1-.6-.1-.5.1-1 .6-1.1l6.4-1.9c2.1-.7 4.3-1.2 6.3-2l6.2-2.3c.5-.2 1-.4 1.6-.6l1.5-.7 3-1.3c4.1-1.7 8-3.8 11.9-5.8 1.9-1.1 3.8-2.3 5.7-3.4.9-.6 1.9-1.1 2.8-1.8l2.7-1.9c3.7-2.5 7.1-5.3 10.5-8.1l4.9-4.5c.8-.7 1.6-1.6 2.3-2.4l2.3-2.4c6-6.5 11.4-13.6 16.3-21s9.3-15.1 13.6-22.9c2.1-3.9 4.2-7.9 6.7-11.6 2.5-3.7 5.2-7.3 8.2-10.6 6-6.6 13.1-12.3 20.9-16.7 3.9-2.2 8-4.1 12.2-5.6 4.2-1.5 8.5-2.8 13-3.4.1 0 .2 0 .3.1 1.6.9 3.5 1.6 5.4 2.1 1.9.5 3.8.9 5.7 1.1 3.9.5 7.8.6 11.7.3 7.8-.7 15.8-1.8 22.6-5.6 3.3-2 6.3-4.6 8.2-8 2-3.3 2.7-7.3 2.1-11.1 0-.5-.2-.9-.3-1.4-.1-.5-.2-.9-.4-1.4l-.5-1.3-.7-1.2c-1-1.6-2.5-2.9-4.1-3.9-1.6-1-3.5-1.5-5.4-1.5-1.9 0-3.8.6-5.3 1.6-.2.2-.5.1-.7-.2-.1-.1-.1-.3 0-.5.8-1.7 1.3-3.7 1.4-5.7.1-2-.1-4-.7-5.8-.6-1.8-1.7-3.5-3.1-4.8-1.5-1.3-3.2-2.2-5.1-2.9-.9-.3-1.9-.6-2.8-.7-1-.1-1.9-.1-2.9 0-1.9.3-3.7 1.1-5.4 2.2-3.2 2.3-5.7 5.6-7.5 9.1-.1.2-.4.4-.6.2-2.6-1.1-5.4-1.9-8.2-2.6-2.8-.7-5.6-1.3-8.5-1.7-5.7-.9-11.5-1.3-17.3-1.3-5.8 0-11.6.2-17.3 1.1l-2.1.3-2.1.5c-1.4.3-2.8.6-4.2 1-2.8.8-5.6 1.5-8.3 2.6-10.9 3.8-21.2 9.3-30.9 15.6-9.7 6.3-18.7 13.7-26.9 21.9-1.1 1-2 2.1-3 3.1-1 1.1-2 2.1-2.9 3.2-1.9 2.2-3.8 4.4-5.6 6.7-1.8 2.3-3.8 4.4-5.7 6.6l-3 3.2c-1 1.1-2.1 2.1-3.1 3.1-4.2 4-8.7 7.8-13.7 10.8-5 3.1-10.5 5.4-16.2 6.6-5.7 1.2-11.6 1.6-17.5 1.4-5.8-.3-11.7-1.6-17-4-1.3-.6-2.7-1.2-3.9-2l-1.9-1.1-1.8-1.3-.9-.6c-.3-.2-.6-.5-.9-.7l-1.7-1.4-1.6-1.6c-.5-.5-1-1-1.5-1.6l-1.4-1.7c-.4-.6-.8-1.2-1.2-1.9l-.6-.9-.5-1c-.3-.7-.7-1.3-1-2-1.1-2.8-1.7-5.7-1.8-8.7 0-.3.2-.5.5-.5-.4 0-.1.2-.1.5z"/><linearGradient gradientTransform="matrix(1 0 0 -1 0 1080)" y2="628.47382" x2="501.4595" y1="761.37598" x1="522.04169" gradientUnits="userSpaceOnUse" id="g"><stop offset="0" stop-color="#e5b77e"/><stop offset="1" stop-color="#b88671"/></linearGradient><path d="M408.5 480c-13.2-1.7-24.4-9.7-33.3-23.7 39.6-3.4 68.1-12.2 87.7-30.7 12.5-11.8 22.6-24 32.3-35.8 24.1-29.3 45-54.6 91.7-57.2 1.3 1.1 10.5 8.1 26 8.1 15.7 0 28-5 33.1-13.5v.8c0 .3 0 .6-.1 1v.2c0 .3-.1.5-.1.8l-.1.3c0 .3-.1.6-.2.9v.1c-.1.4-.2.7-.3 1l-.1.2c-.1.3-.2.6-.3.8l-.1.3c-.1.3-.3.7-.4 1l-.1.1c-.2.4-.3.6-.5.9l-.2.3c-.2.3-.3.6-.5.8l-.1.2c-.2.3-.4.6-.7 1l-.1.2c-.2.3-.4.6-.6.8l-.2.3-.9.9-.1.1-.8.8-.3.3c-.3.2-.6.5-.9.7l-.2.2c-.4.3-.7.6-1.1.8l-.3.2c-.3.2-.6.4-1 .6l-.4.2c-.4.3-.9.5-1.4.7l-.1.1c-.4.2-.9.4-1.4.6l-.4.2c-.4.2-.8.3-1.3.5l-.3.1c-.5.2-1.1.4-1.7.6l-.4.1c-.5.1-.9.3-1.4.4l-.5.1c-.6.2-1.3.3-1.9.5-5.7 1.2-11.1 1.8-16.2 1.8-12.4 0-18.4-3.7-18.4-3.7l-.1-.1h-.2c-.4 0-37.5 4.5-58.4 43.3-.6 1.1-1.2 2.2-1.7 3.2l-2.4 4.3c-.6 1.1-1.2 2.1-1.8 3.2l-.1.1c-.6 1.1-1.2 2-1.7 3l-.6 1c-.4.7-1.9 3.2-1.9 3.2-.6 1-1.1 1.9-1.7 2.9l-.4.6c-.5.9-1.1 1.7-1.6 2.6l-.7 1.1c-.4.7-.9 1.3-1.3 2l-.7 1.1c-.6.9-1.2 1.8-1.8 2.6l-.5.8c-.5.8-1.1 1.5-1.6 2.3-.2.3-.8 1.1-.8 1.1-.4.6-.9 1.2-1.3 1.8l-.8 1.1c-.6.8-1.2 1.6-1.9 2.4l-.7.9c-.5.7-1.1 1.4-1.7 2-.3.3-.9 1.1-.9 1.1-.5.6-1 1.1-1.4 1.7 0 0-.7.8-.9 1.1-.7.7-1.4 1.5-2 2.2l-.9.9-1.8 1.8-.9.9-.2.2c-.5.5-1 1-1.6 1.5l-.1.1c-.3.3-.6.6-1 .9-.8.7-1.5 1.4-2.3 2.1-.3.3-.6.5-.9.8l-.2.2c-.6.5-1.3 1.1-1.9 1.6-.4.3-.8.6-1.2 1-.6.5-1.2.9-1.8 1.4l-.2.2c-.3.3-.6.5-1 .7-.9.7-1.8 1.3-2.7 2-.3.2-.5.4-.8.5l-.4.3c-.7.5-1.4 1-2.2 1.5-.4.3-.8.5-1.2.8-.7.4-1.3.9-2 1.3l-.3.2c-.4.2-.7.5-1.1.7-1.1.6-2.1 1.3-3.2 1.9-11.1 6.3-23.5 11.2-37.8 15.1-.1.1-4.5 2.1-11.1 3h-11v-.2z" fill="url(#g)"/><path d="M570 334.7c4.9-.8 6.4-3.3 9.2-3.8 3.2-.6 5.4 0 7.7 1.8 2.3 1.7 2.2 4.4 2.2 4.4l-7 2.8-12.1-5.2z" class="st11" fill="#e0b37d"/><path d="M236.6 421c-.6 7.7-9.4 8.9-21.8 8.9s-20.8-.8-21.4-8.5c-.6-7.7 8-11.2 21.4-11.2 13.3-.1 22.4 3.1 21.8 10.8z" class="st12" fill="#a6725c"/><path d="M590.4 423.3c-.5 2.8 3.2 3.7 5.6 3.7 2.4 0 3.9-1.3 4-3 .2-1.7-1.2-2.7-3.6-2.7-2.4 0-5.6-.3-6 2zm18.7-2.3c-1.4.1-3.2.1-4.4.6 0 1.4-.1 2.8-.4 4.2 1.2.9 3.2 1.1 4.7 1 2.4-.1 3.8-1.5 3.8-3.3.1-1.8-1.3-2.7-3.7-2.5zm12.8-1.3c-1.4.2-3.1.3-4.3.8.1 1.4 0 2.8-.2 4.2 1.3.8 3.3.9 4.8.7 2.4-.3 3.7-1.8 3.6-3.5-.1-1.7-1.5-2.5-3.9-2.2z" class="st6" fill="#fccf84"/><path d="M269.2 314.5c6.5-1 13-1.5 19.5-2.4 6.5-.9 12.9-2 19.2-3.5 6.3-1.5 12.6-3.4 18.6-5.9 3-1.2 6-2.5 8.9-3.9 1.5-.7 2.9-1.4 4.4-2.2 1.5-.7 2.8-1.5 4.4-2.2h-.1c3.3-2 6.6-4.1 9.6-6.6 1.5-1.2 2.8-2.6 4.1-4.1 1.2-1.5 2.2-3.1 3-4.8 1.6-3.5 2.3-7.3 2.8-11.2.5-3.9.5-7.7-.1-11.5-.7-3.8-2-7.5-3.9-10.8-1.9-3.3-4.4-6.3-7.4-8.8-5.9-5-13.5-7.9-21.2-8h-.3l-.1-.3c-2.2-4.8-5.4-9.2-9.4-12.7-2-1.7-4.2-3.2-6.6-4.5-2.3-1.2-4.8-2.2-7.4-2.9-5.1-1.4-10.6-1.6-15.8-.6-5.2 1-10.2 3.2-14.5 6.4l-.2.2-.3-.1c-3.3-1.5-6.9-2.4-10.6-2.6-3.6-.2-7.3.2-10.8 1.3-1.8.5-3.4 1.3-5.1 2.1-1.6.9-3.2 1.8-4.6 3-2.9 2.2-5.3 5-7.3 8.1l-.2.3h-.3c-11.1-.9-22.5 0-33 3.7-5.2 1.9-10.2 4.5-14.4 8.1-4.2 3.6-7.5 8.3-9.4 13.4-1 2.6-1.6 5.3-2.1 8l-.4 2.1-.3 2.1c-.2 1.4-.4 2.8-.4 4.2-.3 5.5.2 11.2 2.1 16.4.9 2.6 2.3 5 3.8 7.4.4.6.9 1.1 1.3 1.6s.8 1.1 1.4 1.6c1 1 1.9 2 3 2.9 4.2 3.6 9.2 6.2 14.4 8.4-5.4-1.6-10.6-4.1-15-7.7-1.1-.9-2.1-1.9-3.1-2.9-.5-.5-.9-1.1-1.4-1.6-.4-.6-.9-1.1-1.3-1.7-1.6-2.4-3-4.8-3.9-7.6-2-5.4-2.6-11.1-2.3-16.8 0-1.4.2-2.8.4-4.2l.2-2.1.4-2.1c.5-2.8 1.1-5.6 2.1-8.2 2-5.3 5.4-10.1 9.7-13.9 4.3-3.8 9.4-6.5 14.7-8.4 10.7-3.8 22.3-4.6 33.5-3.6l-.5.2c2-3.2 4.5-6.1 7.5-8.3 1.5-1.2 3.1-2.1 4.7-3.1 1.7-.8 3.4-1.6 5.2-2.1 3.6-1.2 7.4-1.5 11.2-1.3 3.8.2 7.5 1.1 10.9 2.6l-.5.1c4.4-3.2 9.5-5.5 14.9-6.5s11-.9 16.2.6c2.6.7 5.2 1.7 7.6 3 2.4 1.3 4.7 2.8 6.8 4.6 4.2 3.5 7.4 8.1 9.7 13l-.5-.3c8 0 15.9 3 22 8.1 3 2.6 5.7 5.6 7.7 9.1s3.4 7.3 4.1 11.2c.7 3.9.7 8 .2 11.9-.5 3.9-1.2 7.9-2.9 11.6-.8 1.8-1.9 3.5-3.2 5.1-1.3 1.5-2.7 3-4.2 4.2-3 2.6-6.4 4.7-9.8 6.7h-.1c-1.4.7-2.9 1.5-4.3 2.2-1.5.7-2.9 1.5-4.4 2.2-3 1.4-6 2.7-9 3.9-6.1 2.5-12.4 4.4-18.8 5.9s-12.9 2.6-19.4 3.5c-6.3.5-12.9 1.2-19.4 1zm341.8-5.8c2.4.4 4.8.9 7.1 1.7 2.3.7 4.6 1.8 6.7 2.9 2.2 1.1 4.2 2.5 6.1 4.1 1.9 1.5 3.7 3.3 5.1 5.2v.2h-.1c-1.9-1.6-3.7-3.2-5.6-4.6-1.9-1.5-4-2.7-6-3.9-2.1-1.2-4.3-2.2-6.5-3-2.2-.9-4.5-1.6-6.9-2.3-.1 0-.1-.1-.1-.1l.2-.2z"/></g></g><g transform="translate(-184 -205.1)"><defs><path id="h" d="M184 151h494.79999v321H184z"/></defs><clipPath id="i"><use height="100%" width="100%" xlink:href="#h" overflow="visible"/></clipPath><g clip-path="url(#i)"><path d="M270.6 223.8c1-.7 2.1-1.3 3.2-1.7 1.1-.4 2.3-.8 3.5-1 1.2-.2 2.4-.4 3.6-.4 1.2 0 2.4 0 3.6.2-2.4.3-4.7.6-7.1 1.1-1.2.2-2.3.5-3.5.8-1 .3-2.1.7-3.3 1z" class="st15" fill="#fce79c"/></g></g><g transform="translate(-184 -205.1)"><defs><path id="j" d="M184 151h494.79999v321H184z"/></defs><clipPath id="k"><use height="100%" width="100%" xlink:href="#j" overflow="visible"/></clipPath><g clip-path="url(#k)"><path d="M317 225.4c1.7-.9 3.6-1.4 5.5-1.4 1 0 1.9.1 2.8.3.9.2 1.8.5 2.6 1.1-1.9-.2-3.7-.3-5.5-.3-.9 0-1.8 0-2.7.1l-2.7.2z" class="st15" fill="#fce79c"/></g></g></svg>
\ No newline at end of file
diff --git a/app/javascript/images/elephant_ui_plane.svg b/app/javascript/images/elephant_ui_plane.svg
new file mode 100644
index 000000000..a2624d170
--- /dev/null
+++ b/app/javascript/images/elephant_ui_plane.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 292.85862 204.49997" width="292.85861" height="204.49997"><g transform="translate(-395.89999 -820.4)"><defs><path id="a" d="M395.89999 745.09998H690.5v279.79999H395.89999z"/></defs><clipPath id="b"><use xlink:href="#a" width="100%" height="100%" overflow="visible"/></clipPath><path class="st53" d="M339.3 1028.6c1.5-3.2 14.4-31.3 27.4-58.8-6-9.3-2-17 1.5-23.7 1.9-3.7 3.8-7.1 3.6-10.4-.8-22 8.1-38.3 22.8-41.6 2.8-.6 5.2-.9 7.5-.9 3 0 5.6.5 8.1 1.6 1.4-1.3 2.8-2.6 4.2-3.8-2.8-2.6-4.3-5.5-4.5-8.8-.3-4.5 2.2-9.5 6.8-13.7 5.3-4.8 16.5-12.9 31.7-12.9.9 0 1.7 0 2.6.1-.4-.9-1-2-2.1-2.9-2.1-1.6-1.9-3.2-1.6-4 .7-2.1 3.6-3.2 8.1-3.2 3.9 0 9.7 1.2 14 4.4.3-.7.7-1.3 1.3-1.7.5-.3 1.3-.5 2.2-.5 3.4 0 10.6 2.7 15.5 9.9 3.6 5.3 3.6 10.8.1 16 18.3 4.7 30.1 15.6 39.5 24.4 2.5 2.4 5 4.6 7.3 6.5 10.7 8.9 21.4 13.2 32.7 13.2.9 0 1.8 0 2.7-.1 2-13.5-4.1-25.5-10-35.7-6.2-10.7-6.4-12.1-4.9-13.9l.1-.1c.6-.7 1.3-1 2.1-1.1h.3c1.7 0 4.5 1 13 8.7 9.9 9 16.9 22.2 19.2 36.5 8.9-4.9 15.2-12.5 17.1-20.3 2-8.6.5-16.8-4.2-22.7l-13.1 6.1-7-16.9-15.6 3.2 7.2-19.5h.1l-.2-.5 4.6-11.1 65.7 11.9c3.1.6 3.9 2.7 3.6 4.5l-.2 1-.4-.1c-.3.4-.6.7-1 .9-.7.3-7.5 3.6-21 9.9 2.1 2.9 2.2 6.1.4 9.4-1.1 1.9-2.5 6.2.4 13.3 3.7 8.9 3.5 29.2-8.3 46.2-8.1 11.7-18.3 23-37.6 26.6-3 4.6-6.5 9-10.2 12.6-7.8 7.6-24 15.3-42.3 15.3-5.3 0-10.7-.6-15.9-1.9-7.6 12.9-10.5 26.2-10.6 32.1-.2 11 .9 16.1.9 16.2l.4 1.8-164.9.8.9-2.3z" clip-path="url(#b)"/><path class="st53" d="M339.8 1028.8c.1-.3 13.9-30.1 27.5-59.1-6.1-9.2-2.1-16.8 1.4-23.5 2-3.7 3.8-7.3 3.7-10.6-.8-21.7 8-37.9 22.4-41 2.7-.6 5.1-.9 7.4-.9 3 0 5.7.5 8.2 1.7 1.6-1.6 3.2-3 4.9-4.4-3-2.6-4.6-5.5-4.8-8.8-.3-4.4 2.1-9.2 6.6-13.3 5.3-4.8 16.4-12.8 31.4-12.8 1.1 0 2.2 0 3.3.1-.3-1.1-1-2.7-2.5-3.8-1.8-1.4-1.7-2.8-1.5-3.4.6-1.8 3.4-2.9 7.6-2.9 4.4 0 10.3 1.5 14.3 4.8.1-.9.6-1.7 1.3-2.1.4-.3 1.1-.4 1.9-.4 3.3 0 10.3 2.6 15.1 9.7 3.6 5.3 3.5 10.9-.3 16.1 18.6 4.6 30.5 15.6 40 24.4 2.6 2.4 5 4.6 7.3 6.5 10.8 8.9 21.6 13.3 33.1 13.3 1 0 2.1 0 3.1-.1 2.2-13.9-4-26.1-10-36.4-6.3-10.9-6.2-11.8-5-13.3l.1-.1c.2-.2.7-.9 1.8-.9h.2c1.5 0 4.2 1 12.7 8.6 10 9.1 17 22.5 19.2 36.9 9.3-5 16-12.8 17.9-20.9 2.1-8.9.4-17.4-4.5-23.4l-13 6.1-6.9-16.8-15.1 3.1 6.8-18.4h.6l-.5-1 4.4-10.6 65.3 11.8c3.5.7 3.3 3.2 3.2 3.9l-.1.5h-.2c-.2.4-.6.8-1 1-.7.3-7.9 3.7-21.6 10.2.1.1.2.2.3.4 2 2.7 2.2 5.8.4 8.9-1.1 2-2.6 6.4.4 13.7 3.6 8.8 3.4 28.8-8.2 45.7-8.1 11.7-18.2 22.9-37.5 26.4-3 4.7-6.5 9.1-10.3 12.7-7.8 7.5-23.7 15.1-42 15.1-5.4 0-10.9-.7-16.1-2-7.7 13.1-10.7 26.7-10.9 32.7-.2 11.1.9 16.2.9 16.3l.3 1.2-163.5.8.5-1.7z" clip-path="url(#b)"/><path d="M577.5 843.7l-1-2.1 3.9-9.4 64.5 11.6c2.4.5 2.5 2 2.4 2.8" clip-path="url(#b)" fill="#fff" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M584.2 856.7l6.9 16.6s53.7-25.1 55.5-26c.9-.5 1.5-2.2-1-2.3-2.5-.1-69.6-1.4-69.6-1.4l-5.9 16 14.1-2.9z" clip-path="url(#b)" fill="#fff" stroke="#000" stroke-width="1.70000005" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M585.1 857l58.9-11.2 1.4-.5h.4c.8 0 .7.3.8.6.1.3-.1.6-.4.8L587 861.5l-1.9-4.5z" clip-path="url(#b)" fill="#d1d3d4"/><path class="st57" clip-path="url(#b)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M584.20001 856.70001l61.79999-11.5"/><path class="st58" d="M388.5 927.9c20-40 49.9-56.3 83.4-54.9 33.6 1.4 48.8 21.7 62.4 32.9 13.6 11.2 27.5 15.6 43.4 12.5 15.9-3.1 28.5-14.6 31.2-26.1 2.7-11.5-1-20.7-6.1-25.8-5.1-5.1-1.4-8.1 4.1-6.8 5.4 1.4 8.1 3.4 8.1 3.4s7.8-6.4 9.8-3.7c2 2.7 1.7 5.4.3 7.8-1.4 2.4-2.7 7.1.3 14.6 3.1 7.5 4.1 27.1-8.1 44.8-12.2 17.6-26.5 30.1-62.1 26.5-38.5-3.9-54.6 44.2-54.9 59-.2 11.5.9 16.5.9 16.5l-160.7.8c.2-.1 33.4-72.4 48-101.5z" clip-path="url(#b)" fill="#53606c" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path class="st59" d="M399.4 989.3c-6.1 0-9.9-4.3-10-4.3l-.2-.2-.3.1c-3.1 1-6.1 1.5-9 1.5-6.1 0-11.4-2.2-15.6-6.5 1.4-3 2.9-6.1 4.3-9.1.1.1.1.2.2.3 6.1 8 12.7 9.7 17 9.7 3.2 0 5.6-.9 6.6-1.3.7 1.3 3 4.7 7.5 4.7 1.2 0 2.5-.3 3.9-.8 6.7-2.5 15.7-13.1 18.3-22.1 3.2 5.7-2.8 18.3-13.8 25.3-3 1.7-6 2.7-8.9 2.7zm24.5-78.1c-5.7-11.1-10.8-14.2-12.4-14.9 15.7-15.3 34.7-23 56.6-23 1.3 0 2.5 0 3.8.1 2.1.1 4.2.3 6.4.5 1.5 2.7-.4 5.6-.8 6.3-3 .8-11.2 6.5-18.5 11.6-1.9 1.3-3.7 2.6-5.3 3.7-5.3 3.7-13.6 4.2-18 4.2-1.8 0-2.9-.1-2.9-.1h-.3l-8.6 11.6zm95.3 49c4.2-7.1 12.6-15.2 28.3-15.2 3.5 0 7.2.4 11 1.2 3.4.7 7 1.1 10.6 1.1 15.9 0 29.8-7.9 34.8-12.5 6.5-6 10.5-9.8 12-12.4 1.4-2.4 3.2-2.8 4.7-2 .1.1-.7 1.1-.6 1.1-.9 1.7-1.9 3.3-3 4.8-11.5 16.6-23.9 26.9-50 26.9-3.6 0-7.5-.2-11.6-.6-1.5-.2-3-.2-4.4-.2-9.4 0-18.1 3.2-25.9 9.4l-5.9-1.6z" clip-path="url(#b)" fill="#38434f"/><path class="st58" d="M427.4 920.5c-9.1-24.2-19-27.9-32.4-25-13.4 3-22.4 18-21.6 40 .4 10.2-15.5 20.5-4.3 35s23.5 8 23.5 8 3 7.1 11 4.1 16.7-13.5 18.5-21.6" clip-path="url(#b)" fill="#53606c" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path class="st59" d="M417.2 934.2c-7.3.5-8.6-4.8-7.3-7 1.2-2.1 4.6-3.2 4.6-3.2s-5.3-.2-6.3-4c-1-3.7 4-5.3 4-5.3s-2.9-8.6-13.3-6.1-14.4 11.7-14.2 19c.6 15.3-10.2 22.8 0 29.7 10.1 6.9 23.7-2.8 28.5-11.3 4.8-8.5 4-11.8 4-11.8z" clip-path="url(#b)" fill="#38434f"/><path class="st57" d="M392.6 978.6c6.3-3.9 9.1-7.5 9.1-7.5m15.5-36.9c-7.3.5-8.6-4.8-7.3-7 1.2-2.1 4.6-3.2 4.6-3.2s-5.3-.2-6.3-4c-1-3.7 4-5.3 4-5.3s-2.9-8.6-13.3-6.1-14.6 11.7-14.2 19" clip-path="url(#b)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M417.5 891.4c-9.8-6.9-6.2-16 .3-21.8 6.5-5.8 19-14 35.2-12.2 0 0-.2-3.5-3.1-5.8s-.5-4.5 5.5-4.5 12.9 2.6 15.8 6.9c0 0-1.4-3.2.4-4.4 1.8-1.2 10.2 1 15.6 9s1.1 14.9-5.2 19.9c-6.3 5-36.2 11.6-48.8 10.9" clip-path="url(#b)" fill="#53606c"/><g class="st53" clip-path="url(#b)"><path class="st36" d="M459.5 878.7c-11.1.6-22.1 3.3-32.9 6.1-4.1 1.1-8.2 2.2-12.4 2-.4 0-.8-.1-1.3-.1 1 1.6 2.5 3.2 4.6 4.7l15.6-2.1c11.3.7 37-4.7 46.4-9.4-6.5-1.1-13.3-1.5-20-1.2z" fill="#38434f"/></g><path class="st59" d="M417.5 890.8c-3.5-2.5-5.3-5.5-5.5-8.8-.2-3.2 1.2-6.7 4-9.9-.4 1.6-.2 3.2.5 4.7 1.2 2.5 3.6 4 6.3 4 2.1 0 4.3-.9 6.3-2.6 7.2-6 19.4-10.4 29.1-10.4 1.9 0 3.7.2 5.3.5 7.7 1.6 12.3 3.7 13.8 6.7.8 1.6.8 3.3 0 5.4-10.1 4.3-31.2 8.6-42.1 8.6-.7 0-1.4 0-2.1-.1-1.4-.1-2.8-.1-4-.1-7.5-.1-10.6 1.4-11.6 2z" clip-path="url(#b)" fill="#38434f"/><path class="st57" d="M471.2 854c2.2 3.4 1.1 6.7 1.1 6.7" clip-path="url(#b)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M489.6 967.9c34.6 23.5 68.7 8.7 80.2-2.4 11.4-11.1 20.8-28.5 20-45.9-.8-17.4-8.5-32.9-19.5-42.8-10.7-9.6-12.4-8.7-13.2-7.7-.8 1-1.4 1.1 5 12.2s13.4 24.6 9.5 40.2c-3.9 15.6-15.6 29.9-29.6 34-14 4-21.6-1.4-26.1-3.2 0 0 1 4-3.4 4.3-4.3.3-11.1-2.9-11.1-2.9s2.7 3 .1 5-5.9-.9-5.9-.9 2.5 2.2 1.5 3.3c-1 1.1-2.3.8-4.2-.6 0 0 3.2 3.6 1 5.5s-4.3 1.9-4.3 1.9z" clip-path="url(#b)" fill="#b3becd" stroke="#000" stroke-width="1.60000002" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M528.6 979.9c-13.1 0-25.8-3.9-37.6-11.7.9-.2 2.1-.7 3.3-1.8 1.4-1.3 1-3 .3-4.3.4.1.8.2 1.1.2.7 0 1.3-.3 1.8-.8.3-.3.4-.6.4-1 0-.3-.1-.6-.2-.9.6.2 1.2.4 1.9.4.9 0 1.7-.3 2.4-.8.3-.2.5-.5.7-.8 12.6 6.2 22.6 9.1 31.5 9.1 7.8 0 14.7-2.3 21.1-6.9 16.8-12.3 21.3-21.3 24.6-27.9l.3-.6c2.3-4.5 4.2-6.5 6.4-6.5.9 0 1.7.3 2.7.9-1.4 13.6-8.7 28-19.6 38.6-7.9 7.4-23.4 14.8-41.1 14.8z" clip-path="url(#b)" fill="#92a1b5"/><path class="st57" d="M489.6 967.9c-3.9.1-6.7-.9-6.7-.9" clip-path="url(#b)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M484 908.3c-2.2.9-2.1 3.2.1 6.7 2.1 3.5 4.5 7.9 5.9 10.3 1.4 2.4 2.6 3.5 4 2.8 1.4-.6 1.8-2 .4-4.9-1.4-2.9-5.8-11-7.2-12.7-1.6-1.7-2.4-2.5-3.2-2.2z" clip-path="url(#b)" fill="#38434f" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path class="st57" d="M525.9 907.8c2.5-3.7 4.8-5.2 4.8-5.2m3.8 11.9c1.5-3.1 3.7-5.6 3.7-5.6m11.9 13.3c1-3.9 2.7-5.6 2.7-5.6m10.7 9c.6-4.6.9-6.6.9-6.6" clip-path="url(#b)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><g class="st53" clip-path="url(#b)"><path class="st49" d="M504.9 862.2c.8-.4 1.5-.8 2.2-1.1" fill="none" stroke="#e3e5e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M519.8 856.2c13.6-3.5 22.1.5 28.2 3.3 5.3 2.4 11.6 4.7 17.6 5.3" fill="none" stroke="#e3e5e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4.5286,13.5857"/><path class="st49" d="M572.4 864.5c.8-.2 1.6-.4 2.4-.7" fill="none" stroke="#e3e5e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g class="st53" clip-path="url(#b)"><path d="M491.2 946.7c-4.1 1.1-6.1 1.8-10 3.5-2.1.9-4.6.1-5.6-1.9s0-4.6 2.3-5.6c4.3-1.9 6.6-2.7 11.2-3.9 2.4-.6 4.8.8 5.3 2.9.4 2.2-1 4.4-3.2 5z" fill="#505762"/></g><path class="st57" d="M515.8 952.3c-.2-2.3-1.7-3.3-1.7-3.3" clip-path="url(#b)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><g class="st53" clip-path="url(#b)"><path d="M454.5 887.5c-3.5.7-7.1 1.3-10.6 1.7-3.6.4-7.2.8-10.8.6-.3 0-.5-.2-.5-.5s.2-.5.5-.5c3.5.2 7.1-.1 10.6-.4 3.5-.4 7.1-.9 10.6-1.6.2 0 .4.1.4.3.1.2 0 .4-.2.4z"/></g><g class="st53" clip-path="url(#b)"><path d="M417.2 891.8c-2.2-1.6-4.3-3.6-5.4-6.2l-.4-1-.2-1-.1-.5v-.5c0-.4-.1-.7-.1-1.1 0-1.4.2-2.8.7-4.1.9-2.6 2.6-4.9 4.4-6.9 1.9-2 4-3.6 6.2-5.2s4.6-2.9 7-4.1c2.4-1.2 5-2.2 7.6-2.9 5.2-1.5 10.7-1.9 16.1-1.4l-.6.5c-.2-1.3-.7-2.7-1.4-3.8-.4-.6-.8-1.1-1.4-1.5-.5-.5-1.2-1-1.5-1.9-.1-.2-.1-.5-.1-.7.1-.2.1-.5.2-.7.2-.4.6-.7.9-.9.7-.5 1.4-.7 2.2-.9 1.5-.3 3-.4 4.4-.4 2.9.1 5.9.7 8.6 1.8 2.7 1.1 5.3 2.8 7.1 5.3l-.9.5c-.3-.7-.5-1.3-.5-2.1-.1-.7 0-1.5.4-2.3.3-.3.5-.7 1-.8.2-.1.4-.1.6-.2.2 0 .4-.1.6-.1.7 0 1.4.1 2.1.2 1.4.3 2.6.8 3.9 1.4 1.2.6 2.4 1.3 3.5 2.1 2.2 1.6 4.1 3.6 5.6 5.9.7 1.2 1.4 2.4 1.8 3.7.3.6.4 1.3.5 2 .1.3.1.7.1 1v1c-.1 2.8-1.3 5.5-3 7.6-1.7 2.2-3.6 4-5.9 5.6-2.4 1.4-4.9 2.3-7.4 3.2-2.5.8-5.1 1.5-7.8 1.9 1.2-.5 2.5-.9 3.7-1.4l3.7-1.3c2.5-.9 5-1.8 7.2-3.2 2.1-1.5 4-3.3 5.6-5.4 1.5-2.1 2.6-4.5 2.7-7 .1-2.5-.8-5-2.2-7.1-1.4-2.2-3.2-4.1-5.3-5.6-2.1-1.5-4.4-2.8-6.9-3.4-.6-.1-1.2-.2-1.8-.2-.6 0-1 .1-1.3.5-.5.8-.2 2.3.2 3.4.1.3 0 .5-.3.6-.2.1-.4 0-.6-.2-1.6-2.3-4-3.8-6.6-4.9-2.6-1.1-5.4-1.7-8.2-1.7-1.4 0-2.8.1-4.2.4-.7.2-1.3.4-1.8.7-.5.4-.8.8-.7 1.3.1.5.6.9 1.2 1.4.6.5 1.1 1.1 1.5 1.7.9 1.3 1.4 2.7 1.6 4.3 0 .3-.2.5-.4.5h-.1c-5.3-.5-10.7-.1-15.8 1.4-2.5.7-5 1.7-7.4 2.8-2.4 1.2-4.7 2.5-6.8 4.1-2.2 1.5-4.3 3.2-6.1 5.1-1.8 1.9-3.4 4.1-4.2 6.5-.4 1.2-.6 2.5-.7 3.8 0 .3.1.6.1 1v.5l.1.5.2.9.4.9c1 2.4 2.9 4.3 5 5.8.2.2.3.5.1.7-.2.2-.4.3-.7.1z"/></g><g class="st53" clip-path="url(#b)"><path class="st36" d="M615.1 863.2c2 1.2 2.3 1.8 2.3 1.8" fill="#38434f"/><path d="M615.3 862.9l1.2.9c.2.2.4.3.6.5.2.2.3.4.5.6 0 .1 0 .2-.1.2h-.2l-.5-.5c-.2-.1-.4-.3-.6-.4-.4-.3-.8-.5-1.3-.7-.2-.1-.2-.3-.1-.5s.2-.2.5-.1c-.1 0-.1 0 0 0z"/></g></g></svg>
\ No newline at end of file
diff --git a/app/javascript/images/icon_done.svg b/app/javascript/images/icon_done.svg
new file mode 100644
index 000000000..446af14d9
--- /dev/null
+++ b/app/javascript/images/icon_done.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>
\ No newline at end of file
diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png
new file mode 100644
index 000000000..e62c064c8
--- /dev/null
+++ b/app/javascript/images/mailer/icon_cached.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png
new file mode 100644
index 000000000..0d2ef0cb8
--- /dev/null
+++ b/app/javascript/images/mailer/icon_done.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png
new file mode 100644
index 000000000..aae9d2bb9
--- /dev/null
+++ b/app/javascript/images/mailer/icon_email.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png
new file mode 100644
index 000000000..895b57d0a
--- /dev/null
+++ b/app/javascript/images/mailer/icon_grade.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png
new file mode 100644
index 000000000..9f62eadc2
--- /dev/null
+++ b/app/javascript/images/mailer/icon_lock_open.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png
new file mode 100644
index 000000000..3453060ae
--- /dev/null
+++ b/app/javascript/images/mailer/icon_person_add.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png
new file mode 100644
index 000000000..8bce4955c
--- /dev/null
+++ b/app/javascript/images/mailer/icon_reply.png
Binary files differdiff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png
new file mode 100644
index 000000000..1c4f33287
--- /dev/null
+++ b/app/javascript/images/mailer/logo_full.png
Binary files differdiff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png
new file mode 100644
index 000000000..8fda4f67f
--- /dev/null
+++ b/app/javascript/images/mailer/logo_transparent.png
Binary files differdiff --git a/app/javascript/images/mastodon-ui.png b/app/javascript/images/mastodon-ui.png
deleted file mode 100644
index a1fb642a0..000000000
--- a/app/javascript/images/mastodon-ui.png
+++ /dev/null
Binary files differdiff --git a/app/javascript/images/wave-compose-standalone.png b/app/javascript/images/wave-compose-standalone.png
deleted file mode 100644
index 287ee639b..000000000
--- a/app/javascript/images/wave-compose-standalone.png
+++ /dev/null
Binary files differdiff --git a/app/javascript/images/wave-drawer.png b/app/javascript/images/wave-drawer.png
deleted file mode 100644
index ca9f9e1d8..000000000
--- a/app/javascript/images/wave-drawer.png
+++ /dev/null
Binary files differdiff --git a/app/javascript/images/wave-modal.png b/app/javascript/images/wave-modal.png
deleted file mode 100644
index 88818a6d7..000000000
--- a/app/javascript/images/wave-modal.png
+++ /dev/null
Binary files differdiff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
index 54673e223..9b713cf9e 100644
--- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js
+++ b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
@@ -24,14 +24,23 @@ const messages = defineMessages({
 
 const PageOne = ({ acct, domain }) => (
   <div className='onboarding-modal__page onboarding-modal__page-one'>
-    <div style={{ flex: '0 0 auto' }}>
-      <div className='onboarding-modal__page-one__elephant-friend' />
-    </div>
-
-    <div>
+    <div className='onboarding-modal__page-one__lead'>
       <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>
       <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>
-      <p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>@{acct}@{domain}</strong> }} /></p>
+    </div>
+
+    <div className='onboarding-modal__page-one__extra'>
+      <div className='display-case'>
+        <div className='display-case__label'>
+          <FormattedMessage id='onboarding.page_one.full_handle' defaultMessage='Your full handle' />
+        </div>
+
+        <div className='display-case__case'>
+          @{acct}@{domain}
+        </div>
+      </div>
+
+      <p><FormattedMessage id='onboarding.page_one.handle_hint' defaultMessage='This is what you would tell your friends to search for.' /></p>
     </div>
   </div>
 );
@@ -46,22 +55,23 @@ const PageTwo = ({ myAccount }) => (
     <div className='figure non-interactive'>
       <div className='pseudo-drawer'>
         <NavigationBar account={myAccount} />
+
+        <ComposeForm
+          text='Awoo! #introductions'
+          suggestions={ImmutableList()}
+          mentionedDomains={[]}
+          spoiler={false}
+          onChange={noop}
+          onSubmit={noop}
+          onPaste={noop}
+          onPickEmoji={noop}
+          onChangeSpoilerText={noop}
+          onClearSuggestions={noop}
+          onFetchSuggestions={noop}
+          onSuggestionSelected={noop}
+          showSearch
+        />
       </div>
-      <ComposeForm
-        text='Awoo! #introductions'
-        suggestions={ImmutableList()}
-        mentionedDomains={[]}
-        spoiler={false}
-        onChange={noop}
-        onSubmit={noop}
-        onPaste={noop}
-        onPickEmoji={noop}
-        onChangeSpoilerText={noop}
-        onClearSuggestions={noop}
-        onFetchSuggestions={noop}
-        onSuggestionSelected={noop}
-        showSearch
-      />
     </div>
 
     <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
@@ -251,18 +261,12 @@ export default class OnboardingModal extends React.PureComponent {
     const hasMore = currentIndex < pages.length - 1;
 
     const nextOrDoneBtn = hasMore ? (
-      <button
-        onClick={this.handleNext}
-        className='onboarding-modal__nav onboarding-modal__next'
-      >
-        <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+      <button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'>
+        <FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fa fa-fw fa-chevron-right' />
       </button>
     ) : (
-      <button
-        onClick={this.handleClose}
-        className='onboarding-modal__nav onboarding-modal__done'
-      >
-        <FormattedMessage id='onboarding.done' defaultMessage='Done' />
+      <button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'>
+        <FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fa fa-fw fa-check' />
       </button>
     );
 
@@ -270,9 +274,10 @@ export default class OnboardingModal extends React.PureComponent {
       <div className='modal-root__modal onboarding-modal'>
         <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='onboarding-modal__pager'>
           {pages.map((page, i) => {
-            const className = classNames('onboarding-modal__page__wrapper', {
+            const className = classNames('onboarding-modal__page__wrapper', `onboarding-modal__page__wrapper-${i}`, {
               'onboarding-modal__page__wrapper--active': i === currentIndex,
             });
+
             return (
               <div key={i} className={className}>{page}</div>
             );
@@ -294,6 +299,7 @@ export default class OnboardingModal extends React.PureComponent {
               const className = classNames('onboarding-modal__dot', {
                 active: i === currentIndex,
               });
+
               return (
                 <div
                   key={`dot-${i}`}
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index b1dbaa698..ac25a57a2 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -181,7 +181,8 @@
   "onboarding.page_four.home": "The home timeline shows posts from people you follow.",
   "onboarding.page_four.notifications": "The notifications column shows when someone interacts with you.",
   "onboarding.page_one.federation": "Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
-  "onboarding.page_one.handle": "You are on {domain}, so your full handle is {handle}",
+  "onboarding.page_one.full_handle": "Your full handle",
+  "onboarding.page_one.handle_hint": "This is what you would tell your friends to search for.",
   "onboarding.page_one.welcome": "Welcome to Mastodon!",
   "onboarding.page_six.admin": "Your instance's admin is {admin}.",
   "onboarding.page_six.almost_done": "Almost done...",
diff --git a/app/javascript/mastodon/locales/zh-CN.json b/app/javascript/mastodon/locales/zh-CN.json
index b6435a260..a02211b8a 100644
--- a/app/javascript/mastodon/locales/zh-CN.json
+++ b/app/javascript/mastodon/locales/zh-CN.json
@@ -139,6 +139,7 @@
   "loading_indicator.label": "加载中……",
   "media_gallery.toggle_visible": "切换显示/隐藏",
   "missing_indicator.label": "找不到内容",
+  "missing_indicator.sublabel": "无法找到此资源",
   "mute_modal.hide_notifications": "同时隐藏来自这个用户的通知",
   "navigation_bar.blocks": "被屏蔽的用户",
   "navigation_bar.community_timeline": "本站时间轴",
@@ -174,7 +175,8 @@
   "onboarding.page_four.home": "你的“主页”时间轴上显示的是你的关注对象所发布的嘟文。",
   "onboarding.page_four.notifications": "如果有人与你互动了，他们就会出现在“通知”栏中哦～",
   "onboarding.page_one.federation": "Mastodon 是由一系列独立的服务器共同打造的强大的社交网络，我们将这些各自独立而又相互连接的服务器叫做“实例”。",
-  "onboarding.page_one.handle": "你是在 {domain} 上注册的，所以你的完整用户地址是 {handle}。",
+  "onboarding.page_one.full_handle": "你的完整用户地址",
+  "onboarding.page_one.handle_hint": "你的朋友们需要这个才能通过搜索功能找到你。",
   "onboarding.page_one.welcome": "欢迎来到 Mastodon！",
   "onboarding.page_six.admin": "{admin} 是你所在服务器实例的管理员。",
   "onboarding.page_six.almost_done": "差不多了……",
@@ -197,6 +199,8 @@
   "privacy.public.short": "公开",
   "privacy.unlisted.long": "所有人可见，但不会出现在公共时间轴上",
   "privacy.unlisted.short": "不公开",
+  "regeneration_indicator.label": "加载中……",
+  "regeneration_indicator.sublabel": "你的主页时间轴正在准备中！",
   "relative_time.days": "{number}天",
   "relative_time.hours": "{number}时",
   "relative_time.just_now": "刚刚",
diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js
index 7b7b5470f..9a10bcc59 100644
--- a/app/javascript/mastodon/reducers/timelines.js
+++ b/app/javascript/mastodon/reducers/timelines.js
@@ -40,7 +40,7 @@ const normalizeTimeline = (state, timeline, statuses, next, isPartial) => {
     mMap.set('loaded', true);
     mMap.set('isLoading', false);
     if (!hadNext) mMap.set('next', next);
-    mMap.set('items', wasLoaded ? ids.concat(oldIds) : ids);
+    mMap.set('items', wasLoaded ? ids.concat(oldIds) : oldIds.concat(ids));
     mMap.set('isPartial', isPartial);
   }));
 };
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index fd6665f65..300040173 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -6,7 +6,6 @@
 
 @import 'mastodon/reset';
 @import 'mastodon/basics';
-@import 'mastodon/modal';
 @import 'mastodon/containers';
 @import 'mastodon/lists';
 @import 'mastodon/footer';
@@ -15,7 +14,9 @@
 @import 'mastodon/forms';
 @import 'mastodon/accounts';
 @import 'mastodon/stream_entries';
+@import 'mastodon/boost';
 @import 'mastodon/components';
+@import 'mastodon/modal';
 @import 'mastodon/emoji_picker';
 @import 'mastodon/about';
 @import 'mastodon/tables';
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index e6422b2ea..dbe070f9a 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -17,7 +17,7 @@ body {
   -ms-text-size-adjust: 100%;
 }
 
-.email_body {
+.email-body {
   td,
   div,
   a,
@@ -228,6 +228,19 @@ h3 {
   line-height: 25px;
 }
 
+h5 {
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 700;
+  color: lighten($ui-base-color, 34%);
+}
+
+.input-cell {
+  h5 {
+    margin-top: 4px;
+  }
+}
+
 .input {
   td {
     background: darken($ui-base-color, 8%);
@@ -356,6 +369,19 @@ h3 {
       font-weight: 500 !important;
     }
   }
+
+  &.button-small {
+    td {
+      border-radius: 4px;
+      font-size: 14px;
+      padding: 8px 16px;
+
+      a {
+        padding: 5px 16px !important;
+        line-height: 26px !important;
+      }
+    }
+  }
 }
 
 .button-default {
@@ -379,6 +405,14 @@ h3 {
   padding-right: 16px;
 }
 
+.padded-bottom {
+  padding-bottom: 32px;
+}
+
+.margin-bottom {
+  margin-bottom: 20px;
+}
+
 .hero-icon {
   width: 64px;
 
@@ -463,8 +497,50 @@ h3 {
   border-top: 1px solid lighten($ui-base-color, 8%);
 }
 
+ul {
+  padding-left: 15px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 16px;
+
+  li {
+    margin-bottom: 16px;
+    color: lighten($ui-base-color, 26%);
+
+    span {
+      color: $ui-primary-color;
+    }
+  }
+}
+
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
   body {
     min-height: 1024px !important;
   }
 }
+
+@media (max-width: 697px) {
+  .email-container,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .email-start {
+    padding-top: 16px !important;
+  }
+
+  .email-end {
+    padding-bottom: 16px !important;
+  }
+
+  .padded {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d13a18ad7..75e37237b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1419,6 +1419,10 @@
     color: $primary-text-color;
   }
 
+  a {
+    color: inherit;
+  }
+
   .permalink {
     text-decoration: none;
   }
@@ -1762,7 +1766,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto;
+  background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1777,7 +1781,7 @@
   }
 
   > .mastodon {
-    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
     flex: 1;
   }
 }
@@ -2154,10 +2158,7 @@
   }
 }
 
-@import 'boost';
-
 .no-reduce-motion button.icon-button i.fa-retweet {
-
   background-position: 0 0;
   height: 19px;
   transition: background-position 0.9s steps(10);
@@ -2763,6 +2764,7 @@
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
+
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;
   }
@@ -2808,11 +2810,48 @@
   }
 }
 
-.pulse-loading {
+.no-reduce-motion .pulse-loading {
   transform-origin: center center;
   animation: heartbeat 1.5s ease-in-out infinite both;
 }
 
+@keyframes shake-bottom {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 100%;
+  }
+
+  10% {
+    transform: rotate(2deg);
+  }
+
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+
+  80% {
+    transform: rotate(-2deg);
+  }
+
+  90% {
+    transform: rotate(2deg);
+  }
+}
+
+.no-reduce-motion .shake-bottom {
+  transform-origin: 50% 100%;
+  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
+}
+
 .emoji-picker-dropdown__menu {
   background: $simple-background-color;
   position: absolute;
@@ -3318,13 +3357,12 @@
   height: 80vh;
   width: 80vw;
   max-width: 520px;
-  max-height: 420px;
+  max-height: 470px;
 
   .react-swipeable-view-container > div {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding: 25px;
     display: none;
     flex-direction: column;
     align-items: center;
@@ -3397,23 +3435,32 @@
   .onboarding-modal__nav,
   .error-modal__nav {
     color: darken($ui-secondary-color, 34%);
-    background-color: transparent;
     border: 0;
     font-size: 14px;
     font-weight: 500;
-    padding: 0;
+    padding: 10px 25px;
     line-height: inherit;
     height: auto;
+    margin: -10px;
+    border-radius: 4px;
+    background-color: transparent;
 
     &:hover,
     &:focus,
     &:active {
       color: darken($ui-secondary-color, 38%);
+      background-color: darken($ui-secondary-color, 16%);
     }
 
     &.onboarding-modal__done,
     &.onboarding-modal__next {
-      color: $ui-highlight-color;
+      color: $ui-base-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: darken($ui-base-color, 4%);
+      }
     }
   }
 }
@@ -3449,6 +3496,8 @@
 
 .onboarding-modal__page__wrapper {
   pointer-events: none;
+  padding: 25px;
+  padding-bottom: 0;
 
   &.onboarding-modal__page__wrapper--active {
     pointer-events: auto;
@@ -3476,6 +3525,10 @@
     }
   }
 
+  .navigation-bar a {
+    color: inherit;
+  }
+
   p {
     font-size: 16px;
     color: lighten($ui-base-color, 8%);
@@ -3503,29 +3556,56 @@
   }
 }
 
-.onboarding-modal__page-one {
-  display: flex;
-  align-items: center;
+.onboarding-modal__page__wrapper-0 {
+  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+  height: 100%;
+  padding: 0;
 }
 
-.onboarding-modal__page-one__elephant-friend {
-  background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
-  width: 155px;
-  height: 193px;
-  margin-right: 15px;
+.onboarding-modal__page-one {
+  &__lead {
+    padding: 65px;
+    padding-top: 45px;
+    padding-bottom: 0;
+    margin-bottom: 10px;
+
+    h1 {
+      font-size: 26px;
+      line-height: 36px;
+      margin-bottom: 8px;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  &__extra {
+    padding-right: 65px;
+    padding-left: 185px;
+    text-align: center;
+  }
 }
 
-@media screen and (max-width: 400px) {
-  .onboarding-modal__page-one {
-    flex-direction: column;
-    align-items: normal;
+.display-case {
+  text-align: center;
+  font-size: 15px;
+  margin-bottom: 15px;
+
+  &__label {
+    font-weight: 500;
+    color: $ui-base-color;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    font-size: 12px;
   }
 
-  .onboarding-modal__page-one__elephant-friend {
-    width: 100%;
-    height: 30vh;
-    max-height: 160px;
-    margin-bottom: 5vh;
+  &__case {
+    background: $ui-base-color;
+    color: $ui-secondary-color;
+    font-weight: 500;
+    padding: 10px;
+    border-radius: 4px;
   }
 }
 
@@ -3615,16 +3695,6 @@
   }
 }
 
-.onboarding-modal__image {
-  border-radius: 8px;
-  width: 70vw;
-  max-width: 450px;
-  max-height: auto;
-  display: block;
-  margin: auto;
-  margin-bottom: 20px;
-}
-
 .onboard-sliders {
   display: inline-block;
   max-width: 30px;
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index a17476ccb..ceb79bbb9 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,5 +1,5 @@
 .modal-layout {
-  background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed;
+  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -15,6 +15,6 @@
   > * {
     flex: 1;
     max-height: 235px;
-    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
   }
 }