UX: make sure search banner is visible (#56)

* UX: adjustment for search banner changes

* DEV: remove support for 'Discourse Showcased Categories'

* fix linting

Author: MeghnaAJ

README.md

@@ -20,14 +20,6 @@ In the options for the `discourse-search-banner` theme component, following chan
     > As of Oct. 4th, 2022: The outlet will be auto-set by the Mint theme
 - `background image` can be set as per your requirement
 
-### Discourse Showcased Categories
-
-In the options for the `Showcased Categories` theme component, following changes are required for this theme to render properly:
-
-- select the `feed one category` and `feed two category` as per your requirement
-- fill in the `feed one title` and `feed two title` as per your requirement
-- recommended value for `max list length` is `3`.
-
 ## 🖼️ Screenshots
 
 ### Homepage (categories)

about.json

@@ -23,9 +23,6 @@
       "hover": "1c302b"
     }
   },
-  "components": [
-    "https://github.com/discourse/discourse-showcased-categories.git",
-    "https://github.com/discourse/discourse-search-banner.git"
-  ],
+  "components": ["https://github.com/discourse/discourse-search-banner.git"],
   "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
 }

common/common.scss

@@ -25,54 +25,6 @@
   border-radius: 10px;
 }
 
-.custom-homepage-columns {
-  margin: 2em 0 2em 0;
-  padding: 0;
-  display: none;
-
-  .col {
-    position: relative;
-    border-radius: var(--mint-border-radius);
-    padding: 2em 2em 1em;
-    border-top: 8px solid var(--tertiary);
-    box-shadow:
-      0 8px 60px 0 rgb(103, 151, 255, 0.1),
-      0 12px 90px 0 rgb(133, 255, 103, 0.1);
-
-    @include mint-card-bg;
-
-    .header-wrapper {
-      background-color: transparent;
-
-      a h2 {
-        color: var(--primary);
-      }
-
-      .btn-primary {
-        display: none;
-      }
-    }
-
-    .btn-more {
-      color: var(--secondary);
-      background: var(--tertiary);
-      transition: all 0.3s linear;
-      border-radius: var(--mint-border-radius);
-      text-transform: uppercase;
-      border: 1px solid var(--tertiary);
-
-      &:hover {
-        color: var(--secondary);
-        background: var(--tertiary-hover);
-      }
-    }
-  }
-
-  .loading-container:not(:has(.spinner)) {
-    min-height: unset;
-  }
-}
-
 .navigation-categories .search-banner {
   border-radius: var(--mint-border-radius);
   height: 350px;
@@ -208,6 +160,10 @@ a {
   }
 }
 
+.list-controls {
+  margin-top: 1em;
+}
+
 .list-controls .combo-box .combo-box-header {
   border: none;
   border-radius: var(--mint-border-radius);
@@ -384,10 +340,6 @@ a:hover {
   color: var(--primary-very-low);
 }
 
-.btn[href] {
-  color: var(--secondary);
-}
-
 summary.select-kit-header.single-select-header.dropdown-select-box-header {
   padding: 0.5em;
 }
@@ -402,18 +354,3 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
     border: 1px dashed var(--tertiary);
   }
 }
-
-// Control order of plugin connectors
-.search-banner {
-  display: none;
-}
-
-.mint-component-extensions {
-  .search-banner {
-    display: block;
-  }
-
-  .custom-homepage-columns {
-    display: flex;
-  }
-}

javascripts/discourse/connectors/above-main-container/mint-component-extensions.gjs

@@ -2,9 +2,6 @@ import Component from "@ember/component";
 import { classNames } from "@ember-decorators/component";
 import { optionalRequire } from "discourse/lib/utilities";
 
-const TwoTopicList = optionalRequire(
-  "discourse/plugins/discourse-showcased-categories/discourse/components/two-topic-list"
-);
 const SearchBanner = optionalRequire(
   "discourse/plugins/discourse-search-banner/discourse/components/search-banner"
 );
@@ -17,9 +14,5 @@ export default class MintComponentExtensions extends Component {
         <SearchBanner />
       </div>
     {{/if}}
-
-    {{#if TwoTopicList}}
-      <TwoTopicList />
-    {{/if}}
   </template>
 }