fix: Search styling updates from QA [PT-188117054]

rails/react-components/src/library/components/collections.scss

@@ -1,7 +1,7 @@
 @import '../../shared/styles/variables/_variables.scss';
 
 .finderResultsCollections {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 
   .finderResultsCollectionsHeader {
     margin-bottom: 10px;
@@ -23,6 +23,8 @@
       display: inline-block;
       border-radius: 4px;
       font-weight: bold;
+      font-size: 16px;
+      margin-top: 5px;
 
       &:hover, &:active {
         background: #ffc321;

rails/react-components/src/library/components/featured-collections/featured-collections.scss

@@ -2,7 +2,7 @@
 
 .finderResultsFeatured {
   margin: 0;
-  padding: 0 0 20px;
+  padding: 0 0 24px;
   width: 100%;
 
   .finderResultsFeaturedHeader {

rails/react-components/src/library/components/featured-collections/featured-collections.tsx

@@ -16,7 +16,7 @@ export default class FeaturedCollections extends React.Component<any, any> {
           <h2>Featured Collections</h2>
           <div className={css.finderResultsFeaturedTitle}>
             <div>Collections include a <strong>related set</strong> of student and teacher resources.</div>
-            <a className="special-link" href="/collections">View all Collections</a>
+            <a className="special-link" href="/collections">View All Collections</a>
           </div>
         </div>
         <div className={css.finderResultsFeaturedCards}>

rails/react-components/src/library/components/search/auto-suggest.scss

@@ -13,6 +13,11 @@
     margin-left: 5px;
     padding: 6.5px 5px 5px;
     width: 40px;
+
+    &:hover, &:active {
+      background: $col-gold;
+      color: $white;
+    }
   }
   .suggestions {
     position: absolute;

rails/react-components/src/library/components/stem-finder-result.scss

@@ -254,6 +254,24 @@
       }
     }
 
+    .previewCollectionButton {
+      background: $col-orange;
+      border: solid 2px $col-orange;
+      border-radius: 4px;
+      color: #fff;
+      display: block;
+      font: 700 14px/1 museo-sans, Arial, Helvetica, sans-serif;
+      line-height: .8;
+      padding: 10px;
+      text-align: center;
+
+      &:hover, &:active {
+        background: $col-gold;
+        border-color: $col-gold;
+        color: $white;
+      }
+    }
+
     .projectLabel {
       font-size: 12px;
       font-weight: 500;

rails/react-components/src/library/components/stem-finder-result.tsx

@@ -394,7 +394,7 @@ const StemFinderResult = Component({
         <div className={css.previewLink}>
           { resource.material_type !== "Collection"
             ? <a className={css.previewLinkButton} href={resource.links.preview.url} target="_blank" onClick={this.handlePreviewClick} rel="noreferrer">{ resource.links.preview.text }</a>
-            : <a className={css.previewLinkButton} href={resource.links.preview.url} target="_blank" onClick={this.handleViewCollectionClick} rel="noreferrer">Go to Collection</a>
+            : <a className={css.previewCollectionButton} href={resource.links.preview.url} target="_blank" onClick={this.handleViewCollectionClick} rel="noreferrer">Go to Collection</a>
           }
           { <div className={`${css.projectLabel} ${css[projectClass]}`}>
               { projectName }

rails/react-components/src/library/components/stem-finder.scss

@@ -250,6 +250,10 @@
   .finderHeaderResourceCount {
     align-self: center;
     color: $col-darkgray;
+
+    span {
+      font-weight: bold;
+    }
   }
   .showOnly, .sortMenu {
     display: flex;

rails/react-components/src/library/components/stem-finder.tsx

@@ -724,7 +724,7 @@ class StemFinder extends React.Component<Props, State> {
           <div className={css.finderHeaderWrapper}>
             <div className={css.finderHeaderLeft}>
               <div className={css.finderHeaderResourceCount}>
-                { noResourcesFound ? "No Resources Found" : "Loading..." }
+                { noResourcesFound ? <div>No <span>Activities</span> matching your search</div> : "Loading..." }
               </div>
               { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
             </div>
@@ -745,9 +745,7 @@ class StemFinder extends React.Component<Props, State> {
           <div className={css.finderHeaderLeft}>
             <div className={css.finderHeaderResourceCount}>
               { showingAll && multipleResources ? "Showing All " : "Showing " }
-              <strong>
-                { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") }
-              </strong>
+              <strong>{ resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") }</strong> matching your search
             </div>
             { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
           </div>

rails/react-components/src/library/styles/common/_common.scss

@@ -3,9 +3,9 @@
 @import "forms";
 
 /*
- * Some of these rules are here to counteract rules set in 
+ * Some of these rules are here to counteract rules set in
  * https://portal-pages.concord.org/site-redesign/site-redesign.css
- * We should at some point reconcile the two sets of rules and 
+ * We should at some point reconcile the two sets of rules and
  * possibly do away with the site-redesign.css file.
 */
 
@@ -42,7 +42,7 @@ body.member-visitor {
 
 .home-page-content {
   .portal-pages-hero h1 {
-    font: 100 40px museo, sans-serif !important;
+    font: 100 32px museo, sans-serif !important;
     line-height: 46px !important;
 
     strong:before {
@@ -66,6 +66,7 @@ body.member-visitor {
       form input[type="text"] {
         font-size: 12px;
         width: calc(100% - 69px) !important;
+        font-size: 14px;
       }
       form input[type="submit"] {
         font-size: 15px;
@@ -80,7 +81,7 @@ body.member-visitor {
     .portal-pages-finder-form-subject-areas-logo-inner {
       display: none !important;
     }
-    .portal-pages-finder-form-subject-areas-logo-label, 
+    .portal-pages-finder-form-subject-areas-logo-label,
     .portal-pages-finder-form-filters-logo-label {
       font-size: 16px;
       font-weight: 300;