Remove "further reading" step from wizard (#10825)

Instead, add link to top themes on meta in wizard's last step.

app/assets/javascripts/wizard/components/popular-themes.js

@@ -1,30 +0,0 @@
-import Component from "@ember/component";
-import { POPULAR_THEMES } from "discourse-common/helpers/popular-themes";
-
-export default Component.extend({
-  classNames: ["popular-themes"],
-
-  init() {
-    this._super(...arguments);
-
-    this.popular_components = this.selectedThemeComponents();
-  },
-
-  selectedThemeComponents() {
-    return this.shuffle()
-      .filter((theme) => theme.component)
-      .slice(0, 5);
-  },
-
-  shuffle() {
-    let array = POPULAR_THEMES;
-
-    // https://stackoverflow.com/a/12646864
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
-    }
-
-    return array;
-  },
-});

app/assets/javascripts/wizard/templates/components/popular-themes.hbs

@@ -1,5 +0,0 @@
-{{#each popular_components as |theme|}}
-  <a class="popular-theme-item" href={{theme.meta_url}} rel="noopener noreferrer" target="_blank">
-    {{theme.name}}
-  </a>
-{{/each}}

app/assets/stylesheets/wizard.scss

@@ -257,7 +257,8 @@ body.wizard {
   }
   .wizard-step-banner {
     margin-bottom: 2em;
-    width: 660px;
+    width: 620px;
+    display: block;
   }
 
   .wizard-footer {
@@ -493,22 +494,6 @@ body.wizard {
   }
 }
 
-.wizard-step-themes-further-reading {
-  .wizard-field .input-area {
-    margin-top: 0;
-  }
-
-  .popular-themes {
-    display: flex;
-    a.popular-theme-item {
-      background: var(--secondary-very-high);
-      padding: 8px;
-      margin: 0px 4px;
-      width: 25%;
-    }
-  }
-}
-
 .textarea-field {
   textarea {
     width: 100%;
@@ -637,17 +622,6 @@ body.wizard {
   .wizard-column-contents {
     padding: 1em !important;
   }
-  .wizard-step-themes-further-reading {
-    .popular-themes {
-      a.popular-theme-item {
-        width: 33.3%;
-        &:nth-child(4),
-        &:nth-child(5) {
-          display: none;
-        }
-      }
-    }
-  }
   .emoji-preview img {
     width: 16px !important;
     height: 16px !important;

config/locales/server.en.yml

@@ -4697,16 +4697,6 @@ en:
       colors:
         title: "Theme"
 
-      themes_further_reading:
-        title: "Themes"
-        description:
-          "Looking to customize your Discourse? Take advantage of our powerful theming system:
-          <ul>
-          <li><a href='https://meta.discourse.org/t/63682' target='_blank'>How do I install a theme or theme component?</a></li>
-          <li><a href='https://meta.discourse.org/t/110448' target='_blank'>Theme Developer Quick Reference Guide</a></li>
-          </ul>
-          Popular theme components (for more, browse <a href='https://meta.discourse.org/c/theme/l/latest' target='_blank'>#theme</a>)"
-
       fonts:
         title: "Fonts"
         fields:
@@ -4772,6 +4762,7 @@ en:
         title: "Your Discourse is Ready!"
         description: |
           <p>If you ever feel like changing these settings, <b>re-run this wizard any time</b>, or visit <a href='%{base_path}/admin' target='_blank'>your admin section</a>; find it next to the wrench icon in the site menu.</p>
+          <p>It is easy to customize your Discourse even further using our powerful theming system. For examples, check out the <a href="https://meta.discourse.org/c/theme/61/l/top" target="_blank">top themes and components</a> on <a href="https://meta.discourse.org/" target="_blank">meta.discourse.org</a>.</p>
           <p>Have fun, and good luck <a href='https://blog.discourse.org/2014/08/building-a-discourse-community/' target='_blank'>building your new community!</a></p>
 
   search_logs:

lib/wizard/builder.rb

@@ -204,11 +204,6 @@ class Wizard
         end
       end
 
-      @wizard.append_step('themes-further-reading') do |step|
-        step.banner = "further-reading.png"
-        step.add_field(id: 'popular-themes', type: 'component')
-      end
-
       @wizard.append_step('fonts') do |step|
         body_font = step.add_field(id: 'body_font', type: 'dropdown', value: SiteSetting.base_font)
         heading_font = step.add_field(id: 'heading_font', type: 'dropdown', value: SiteSetting.heading_font)