use woman_artist emoji

app/assets/javascripts/admin/components/themes-list.js.es6

@@ -1,8 +1,6 @@
 import { THEMES, COMPONENTS } from "admin/models/theme";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 
-const MAX_LIST_HEIGHT = 700;
-
 export default Ember.Component.extend({
   THEMES: THEMES,
   COMPONENTS: COMPONENTS,
@@ -72,15 +70,6 @@ export default Ember.Component.extend({
       const width = containerNode.offsetWidth - containerNode.clientWidth;
       $container.css("width", `calc(100% + ${width}px)`);
     }
-
-    let height = -1;
-    Array.from(this.$(".themes-list-item")).forEach(node => {
-      const nodeHeight = $(node).outerHeight();
-      if (height + nodeHeight <= MAX_LIST_HEIGHT) {
-        height += nodeHeight;
-      }
-    });
-    $container.css("max-height", `${height}px`);
   },
 
   actions: {

app/assets/javascripts/admin/routes/admin-customize-themes-index.js.es6

@@ -1,3 +1,5 @@
+import { emojiUrlFor } from "discourse/lib/text";
+
 const externalResources = [
   {
     key: "admin.customize.theme.beginners_guide_title",
@@ -20,6 +22,9 @@ export default Ember.Route.extend({
   setupController(controller) {
     this._super(...arguments);
     this.controllerFor("adminCustomizeThemes").set("editingTheme", false);
-    controller.set("externalResources", externalResources);
+    controller.setProperties({
+      externalResources,
+      womanArtistEmojiURL: emojiUrlFor("woman_artist:t5")
+    });
   }
 });

app/assets/javascripts/admin/templates/components/themes-list.hbs

@@ -7,7 +7,7 @@
   </div>
 </div>
 
-<div class="themes-list-container" style="max-height: 450px;">
+<div class="themes-list-container">
   {{#if hasThemes}}
     {{#if componentsTabActive}}
       {{#each themesList as |theme|}}

app/assets/javascripts/admin/templates/customize-themes-index.hbs

@@ -1,11 +1,14 @@
 <div class="themes-intro">
-  <h1>{{I18n "admin.customize.theme.themes_intro"}}</h1>
+  <img src={{womanArtistEmojiURL}}>
-  <div class="external-resources">
+  <div class="content-wrapper">
-    {{#each externalResources as |resource|}}
+    <h1>{{I18n "admin.customize.theme.themes_intro"}}</h1>
-      <a href={{resource.link}} class="external-link" target="_blank">
+    <div class="external-resources">
-        {{d-icon resource.icon}}
+      {{#each externalResources as |resource|}}
-        {{I18n resource.key}}
+        <a href={{resource.link}} class="external-link" target="_blank">
-      </a>
+          {{d-icon resource.icon}}
-    {{/each}}
+          {{I18n resource.key}}
+        </a>
+      {{/each}}
+    </div>
   </div>
 </div>

app/assets/stylesheets/common/admin/customize.scss

@@ -59,18 +59,6 @@
 }
 
 .admin-customize.admin-customize-themes {
-  .themes-intro {
-    float: right;
-    width: 34%;
-    margin-right: 20%;
-    margin-top: 60px;
-
-    .external-link {
-      display: block;
-      margin-bottom: 5px;
-    }
-  }
-
   .customize-themes-header {
     border-bottom: 1px solid $primary-low;
     padding-bottom: 8px;
@@ -146,6 +134,12 @@
     }
   }
   .show-current-style {
+    padding-left: 10px;
+    padding-top: 10px;
+    display: inline-block;
+    width: 70%;
+    vertical-align: top;
+
     .url {
       margin-bottom: 10px;
     }
@@ -175,19 +169,42 @@
     .description {
       margin-bottom: 12px;
     }
-
-    padding-left: 15px;
-    padding-top: 10px;
-    float: left;
-    width: 70%;
   }
   .add-component-button {
     vertical-align: middle;
   }
+  .themes-intro {
+    display: inline-block;
+    width: 51%;
+    vertical-align: top;
+    margin-left: 20%;
+    margin-top: 60px;
+
+    img {
+      display: inline-block;
+      margin-right: 10px;
+      width: 10%;
+      vertical-align: top;
+      margin-top: 5px;
+    }
+    .content-wrapper {
+      display: inline-block;
+      vertical-align: top;
+      width: 65%;
+      h1 {
+        display: inline-block;
+      }
+    }
+    .external-link {
+      display: inline-block;
+      display: block;
+      margin-bottom: 5px;
+    }
+  }
   .themes-list {
     border-right: 1px solid $primary-low;
     border-bottom: 1px solid $primary-low;
-    float: left;
+    display: inline-block;
     width: 28%;
     overflow: hidden;
   }
@@ -213,7 +230,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: $tertiary-low;
+          background-color: $primary-very-low;
         }
       }
     }
@@ -222,6 +239,7 @@
   .themes-list-container {
     overflow-y: scroll;
     box-sizing: content-box;
+    max-height: 700px;
     width: 100%; /* overridden in javascript to hide scrollbar */
 
     .themes-list-item:last-child {
@@ -245,7 +263,7 @@
         }
       }
       &:not(.inactive-indicator):not(.selected):hover {
-        background-color: $tertiary-low;
+        background-color: $primary-very-low;
         .component {
           border-color: $primary-low-mid;
         }