UX: Update styles, shorten text, limit routes

UX: Update styles, shorten text, limit routes

diff --git a/about.json b/about.json
index 727bdbb..0b63688 100644
--- a/about.json
+++ b/about.json
@@ -2,5 +2,8 @@
   "name": "discourse-meta-banner",
   "about_url": null,
   "license_url": null,
-  "component": true
+  "component": true,
+  "assets": {
+    "meta-bg": "/assets/meta-bg.svg"
+  }
 }
diff --git a/assets/meta-bg.svg b/assets/meta-bg.svg
new file mode 100644
index 0000000..f72fff2
--- /dev/null
+++ b/assets/meta-bg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="visible" viewBox="0 0 1016.6 258.5"><style>.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#f9f3ad}</style><path class="st0" d="M124.9 8.9c54.2 3.5 79 41.2 84.2 87.7 5.1 45.4-43.6 83.2-97.6 76.8S21.6 108.8 21.1 62.2C20.4 4.7 88.2 6.5 124.9 8.9zM706.6 26.3c71.9-29.4 127.3 3.5 163.1 60 35 55.2-4 134.2-77.3 159.8s-182.3-63.9-212.1-123.4c-37-73.6 77.7-76.5 126.3-96.4zM957.7 39.5c-6 18.2-24.5 15.8-44.3 13.2-19.4-2.6-31.7-15-25.6-33.2 6-18.2 11.9-22.2 31.4-17.9 24.2 5.2 44.6 19.7 38.5 37.9z"/><path d="M976.2 9.2c3.3 6.7-1.2 16.4-9.1 20.2-7.9 3.9-15.7 1.5-19-5.2s-.9-15.6 7.1-19.1c7.8-3.4 17.7-2.6 21 4.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#28a9e0"/><path d="M225.7 245.8c2.1 6.1-.9 10-7.3 12.2-6.4 2.2-17.6-4-19.7-10.1s7.3-11.3 13.7-13.6c6.4-2.2 11.2 5.4 13.3 11.5z" fill-rule="evenodd" clip-rule="evenodd" fill="#0ca44e"/><path d="M264.5 9.9c6.3-3.1 14.6-.9 18.9 5.4 4.8 6.8 3.4 15.7-3.1 20.2-6.1 4.3-14.2 2.1-19.2-5.1-2.4-3.5-3.6-7.1-3.4-10.5.2-3.6 2-6.8 5-8.9.6-.5 1.2-.8 1.8-1.1zM276.7 32c.4-.2.7-.4 1.1-.6 4.9-3.4 4.8-9.7 1.9-13.9-2.9-4.2-9.6-6.5-14.4-3.2-1.9 1.3-2.9 3.2-3 5.4-.1 2.4.8 5.1 2.6 7.7 3.3 4.7 8 6.5 11.8 4.6z" fill="#515151"/><path d="M36.9 40.6c-8.9 3.8-15.6 7.8-27.3 3.2C-.1 40-1.4 26.5 1 17.6c2.7-10 17.4-10.9 32.4-1.9 8.9 5.5 13.1 20.9 3.5 24.9z" fill-rule="evenodd" clip-rule="evenodd" fill="#e64a52"/><path d="M1016.6 188.4c.1 3.2-4.3 6.7-7.8 6.9-3.5.1-7.6-2.4-7.7-5.7-.1-3.2 4.6-7.4 8.2-7.5 3.5-.1 7.2 3.1 7.3 6.3z" fill-rule="evenodd" clip-rule="evenodd" fill="#ee794a"/></svg>
\ No newline at end of file
diff --git a/common/common.scss b/common/common.scss
index 438740e..6575b61 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,15 +1,34 @@
 .below-site-header-outlet.banner-connector {
-  padding-top: 2em;
+  .custom-homepage-wrapper {
+    background: url($meta_bg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    padding: 2em 0;
+    margin-top: 1em;
+    @media screen and (max-width: 900px) {
+      background-size: cover;
+      background-position-x: right;
+      background-position-y: bottom;
+      padding: 2em 0 0;
+    }
+  }
 
   .welcome-wrapper {
+    margin-top: 2em;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
+    box-shadow: shadow("card");
+    max-width: 930px;
+    margin: 2em auto 0.5em;
+    background: var(--secondary);
 
     .featured-todo {
-      background: var(--tertiary-low);
+      background: var(--secondary);
       display: flex;
       justify-content: space-between;
+      max-width: 500px;
 
       svg {
         transition: color 0.25s;
@@ -17,11 +36,9 @@
 
       > div {
         align-items: center;
-        background: var(--tertiary-low);
         display: flex;
         justify-content: center;
         text-align: center;
-        width: 33.3%;
 
         svg {
           display: block;
@@ -30,21 +47,30 @@
         }
 
         a {
-          transition: color 0.25s;
+          transition: all 0.25s;
           width: 100%;
+          padding: 2em;
+          color: var(--primary);
+
+          .d-icon {
+            color: var(--primary-high);
+            margin-bottom: 0.35em;
+          }
+
           &:hover {
-            color: var(--primary);
-            svg {
-              color: var(--primary-high);
+            color: var(--tertiary);
+            text-decoration: underline;
+            .d-icon {
+              color: var(--tertiary);
             }
           }
         }
 
         h3 {
           font-weight: normal;
+          white-space: nowrap;
           line-height: 1.2;
           margin: 0;
-          padding: 1em;
         }
       }
     }
@@ -56,8 +82,11 @@
     .welcome-content {
       background: var(--secondary);
       max-width: 375px;
-      padding: 2em;
       text-align: left;
+      padding: 2.5em 2em 3em;
+
+      h2 {
+      }
 
       p {
         margin-bottom: 0;
@@ -66,15 +95,19 @@
 
     @media screen and (max-width: 930px) {
       flex-wrap: wrap;
+      max-width: 650px;
+
+      p {
+        max-width: 500px;
+      }
 
       .welcome-content {
-        max-width: unset !important;
-        text-align: center !important;
-        width: 100%;
+        max-width: unset;
+        text-align: center;
       }
 
       .featured-todo {
-        padding: 1.5em 0;
+        padding: 0 0 2em;
         width: 100%;
       }
     }
@@ -84,23 +117,27 @@
     }
 
     @media screen and (min-width: 550px) {
-      .featured-todo > div:nth-of-type(2) {
-        border-left: 1px solid var(--secondary-high);
-        border-right: 1px solid var(--secondary-high);
+      .featured-todo > div:nth-of-type(2) a {
+        border-left: 1px solid var(--primary-low);
+        border-right: 1px solid var(--primary-low);
       }
     }
 
     @media screen and (max-width: 550px) {
+      max-width: 320px;
+      padding: 0;
+
       .featured-todo {
         flex-direction: column;
         padding: 0.5em;
 
         > div {
-          width: 100% !important;
+          width: 200px;
+          margin: 0 auto;
 
           &:nth-of-type(2) {
-            border-bottom: 1px solid var(--secondary-high);
-            border-top: 1px solid var(--secondary-high);
+            border-bottom: 1px solid var(--primary-low);
+            border-top: 1px solid var(--primary-low);
           }
         }
       }
diff --git a/javascripts/discourse/components/meta-banner.js b/javascripts/discourse/components/meta-banner.js
index 2859913..bfaca7a 100644
--- a/javascripts/discourse/components/meta-banner.js
+++ b/javascripts/discourse/components/meta-banner.js
@@ -3,13 +3,18 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { inject as service } from "@ember/service";
 
 export default Component.extend({
-  @discourseComputed(
-    "currentUser"
-  )
+  router: service(),
+
+  @discourseComputed("currentUser")
   shouldShow(currentUser) {
     const isStaff = currentUser && currentUser.staff;
     const lowTrustLevel = currentUser && currentUser.trust_level < 2;
     // show banner only for anons and < TL 2
     return !isStaff && (!currentUser || lowTrustLevel);
   },
+
+  @discourseComputed("router.currentRouteName", "router.currentURL")
+  discoveryRoute(currentRouteName, currentURL) {
+    return currentRouteName.indexOf("discovery") > -1;
+  },
 });
diff --git a/javascripts/discourse/templates/components/meta-banner.hbs b/javascripts/discourse/templates/components/meta-banner.hbs
index 16c0ac9..ec61080 100644
--- a/javascripts/discourse/templates/components/meta-banner.hbs
+++ b/javascripts/discourse/templates/components/meta-banner.hbs
@@ -1,4 +1,4 @@
-{{#if shouldShow}}
+{{#if (and shouldShow discoveryRoute)}}
   <div class="custom-homepage-wrapper">
     <div class="wrap custom-homepage">
       <div class="welcome-wrapper">
@@ -9,21 +9,25 @@
         <div class="featured-todo">
           <div>
             <a href="/docs">
-              <h3>{{d-icon "info-circle"}} {{theme-i18n "meta_banner.docs"}}</h3>
+              <h3>{{d-icon "info-circle"}}
+                {{theme-i18n "meta_banner.docs"}}</h3>
             </a>
           </div>
           <div>
             <a href="https://meta.discourse.org/c/theme/61/none">
-              <h3>{{d-icon "palette"}} {{theme-i18n "meta_banner.themes"}}</h3>
+              <h3>{{d-icon "palette"}}
+                {{theme-i18n "meta_banner.themes"}}</h3>
             </a>

[... diff too long, it was truncated ...]

GitHub sha: 77a21ef929496ec81ea38f97596d9bf00964bcff