UX: Unify admin intro styles for badges/customize, improve mobile

app/assets/javascripts/admin/templates/badges-index.hbs

@@ -1,5 +1,5 @@
 {{#d-section class="current-badges"}}
-  <div class="badge-intro">
+  <div class="badge-intro admin-intro">
     <img src={{badgeIntroEmoji}} class="badge-intro-emoji">
     <div class="content-wrapper">
       <h1>{{i18n 'admin.badges.badge_intro.title'}}</h1>

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

@@ -1,4 +1,4 @@
-<div class="themes-intro">
+<div class="themes-intro admin-intro">
   <img src={{womanArtistEmojiURL}}>
   <div class="content-wrapper">
     <h1>{{I18n "admin.customize.theme.themes_intro"}}</h1>

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

@@ -980,3 +980,4 @@ table#user-badges {
 @import "common/admin/admin_report_stacked_chart";
 @import "common/admin/admin_report_table";
 @import "common/admin/admin_report_inline_table";
+@import "common/admin/admin_intro";

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

@@ -0,0 +1,44 @@
+// Unified styles for badge and customize pages
+.admin-intro {
+  display: inline-block;
+  width: 51%;
+  vertical-align: top;
+  margin-left: 20%;
+  margin-top: 60px;
+
+  img {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    vertical-align: top;
+    margin-top: 5px;
+  }
+  .create-actions {
+    margin-bottom: 1em;
+  }
+  .content-wrapper {
+    display: inline-block;
+    vertical-align: top;
+    width: 65%;
+    h1 {
+      display: inline-block;
+      line-height: $line-height-medium;
+    }
+  }
+  .external-link {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  @include breakpoint(mobile) {
+    width: 100%;
+    margin: 2em 0;
+    .content-wrapper {
+      width: 100%;
+    }
+    img {
+      display: none;
+    }
+  }
+}

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

@@ -12,10 +12,6 @@
         margin-left: auto;
       }
     }
-    .badge-intro {
-      display: inline-flex;
-      flex: 0 1 50%;
-    }
     .content-list {
       flex: 0 0 27%;
     }
@@ -64,24 +60,6 @@
       background-color: unset;
     }
   }
-  .badge-intro {
-    margin-top: 10%;
-    h1 {
-      line-height: $line-height-medium;
-    }
-    .badge-intro-emoji {
-      // it's an emoji so we want fixed deminsions
-      height: 55px;
-      width: 55px;
-      margin-top: 5px;
-      margin-right: 5px;
-      flex: 0 0 auto; // IE flex fix
-    }
-    .external-link {
-      display: block;
-      margin-bottom: 5px;
-    }
-  }
   .current-badge {
     margin: 20px;
     p.help {

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

@@ -171,37 +171,6 @@
   .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;
-    }
-    .create-actions {
-      margin-bottom: 1em;
-    }
-    .content-wrapper {
-      display: inline-block;
-      vertical-align: top;
-      width: 65%;
-      h1 {
-        display: inline-block;
-        line-height: $line-height-medium;
-      }
-    }
-    .external-link {
-      display: block;
-      margin-bottom: 5px;
-    }
-  }
   .themes-list {
     display: inline-block;
     .create-actions {

app/assets/stylesheets/mobile/admin_customize.scss

@@ -12,4 +12,9 @@
   .admin-container .select-kit {
     width: 100%;
   }
+
+  .admin-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }