Merge new onboarding styles; delete refs to PNGs.

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;
   }
 }

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__wrapper-0 {
+  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+  height: 100%;
+  padding: 0;
+}
+
 .onboarding-modal__page-one {
-  display: flex;
+  &__lead {
-  align-items: center;
+    padding: 65px;
-}
+    padding-top: 45px;
+    padding-bottom: 0;
+    margin-bottom: 10px;
 
-.onboarding-modal__page-one__elephant-friend {
+    h1 {
-  background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
+      font-size: 26px;
-  width: 155px;
+      line-height: 36px;
-  height: 193px;
+      margin-bottom: 8px;
-  margin-right: 15px;
+    }
-}
 
-@media screen and (max-width: 400px) {
+    p {
-  .onboarding-modal__page-one {
+      margin-bottom: 0;
-    flex-direction: column;
+    }
-    align-items: normal;
   }
 
-  .onboarding-modal__page-one__elephant-friend {
+  &__extra {
-    width: 100%;
+    padding-right: 65px;
-    height: 30vh;
+    padding-left: 185px;
-    max-height: 160px;
+    text-align: center;
-    margin-bottom: 5vh;
+  }
+}
+
+.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;
+  }
+
+  &__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;

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;
   }
 }