Scenario JS Snippet and Notes

2023-01-16 07:18:26 -05:00
parent ebae6f1b05
commit 16bc77ceb7
14 changed files with 522 additions and 427 deletions
--- a/Custom_Templates/customer_templates/Scenario/_custom_header.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/_custom_header.html.liquid
@ -0,0 +1,124 @@
+<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem; position: fixed; margin-top: 4rem;">
+  <div class="np-header-content">
+    <div class="np-hidden-desktop np-header-mobile-menu-nav">
+      {% if current_person.signed_in? %}
+        <button
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
+          data-toggle-target=".np-header-mobile-avatar-menu,
+          .np-header-mobile-menu-content, .np-main, .np-footer"
+        ></button>
+        <button
+          data-test="open-mobile-menu"
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
+          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
+        >
+          <img
+            alt="{{ current_person.name }}"
+            class="np-header-avatar-image"
+            src="{{ current_person.avatar_url }}"
+          />
+        </button>
+      {% endif %}
+    </div>
+    {% if current_school.logo_url %}
+      <h1 class="np-header-logo">
+        <a href="{% route home %}">
+          <img
+            alt="{{ current_school.name }}"
+            class="np-header-logo-image"
+            src="{{ current_school.logo_url }}"
+          />
+        </a>
+      </h1>
+    {% else %}
+      <a href="{% route home %}" class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </a>
+    {% endif %}
+
+    <div class="np-hidden-mobile np-header-desktop-nav">
+      <ul class="np-header-desktop-nav-list">
+        {% for website_navigation in navigations.header_navigations_external %}
+          <li class= "np-header-desktop-nav-item">
+            <a
+              href="{{ website_navigation.path }}"
+              class="np-header-desktop-nav-link np-header-font-color"
+              target="_blank"
+            >
+              {{ website_navigation.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+
+    {% if current_person.signed_in? %}
+      <div class="np-hidden-mobile np-header-search np-header-search-expanded">
+        <form action="{% route search %}" method="get" data-test="desktop-search">
+          <input
+            aria-label="{% t .search %}"
+            class="np-header-search-input np-header-font-background-color"
+            type="text"
+            name="q"
+            placeholder="{% t .search %}"
+          />
+          <i class="np-header-search-icon far fa-search"></i>
+        </form>
+      </div>
+      <div class="np-hidden-mobile np-header-avatar">
+        <button
+          class="np-header-avatar-button"
+          data-test="open-desktop-menu"
+          data-toggle-class-on-target="np-hidden"
+          data-toggle-target=".np-header-avatar-tooltip"
+          data-toggle-outside
+        >
+          <img
+            alt="{{ current_person.name }}"
+            class="np-header-avatar-image"
+            src="{{ current_person.avatar_url }}"
+          >
+        </button>
+        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
+          <span class="np-header-avatar-tooltip-arrow-up"></span>
+          <div class="np-header-avatar-tooltip-learner">
+            <div class="np-header-avatar-tooltip-learner-name">
+              {{ current_person.name }}
+            </div>
+            <div class="np-header-avatar-tooltip-learner-email">
+              {{ current_person.email }}
+            </div>
+          </div>
+          <nav class="np-header-avatar-tooltip-navigation">
+             <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
+              Default
+            </a>
+          {% unless current_school.sso_active? %}
+            <a
+              class="np-header-avatar-tooltip-navigation-link"
+              href="{% route account %}"
+            >
+              Profile Settings
+            </a>
+          {% endunless %}
+            <a
+              class="np-header-avatar-tooltip-navigation-link np-danger"
+              href="{% route logout %}"
+            >
+              Sign Out
+            </a>
+          </nav>
+        </div>
+      </div>
+    {% else %}
+      <a
+        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
+        href="{% route login %}"
+      >
+        {% t shared.sign_in %}
+      </div>
+    {% endif %}
+  </div>
+</header>
--- a/Custom_Templates/customer_templates/Scenario/_filter_by_progress.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/_filter_by_progress.html.liquid
@ -17,7 +17,7 @@

 <style>
  .np-progress-filter-label {
-      color: rgba(255, 255, 255, 0.5);
+      color: #2c4265;
      padding-right: 7px;
      text-transform: none;
      font-weight:500;
@ -31,7 +31,7 @@
  .filter-select-wrapper {
      position: relative;
      padding:0;
-      border: 2px solid  rgba(255, 255, 255, 0.25);
+      border: 2px solid  #2c4265;
      color: #fff;
      height:auto;
      text-transform: none;
@ -44,16 +44,16 @@
  }
  .select-items {
      position: absolute;
-      background-color: #062531;
+      background-color: #FFFFFF;
      top: 105%;
      left: -2px;
      z-index: 99;
      width: 102%;
-      border: 2px solid rgba(255, 255, 255, 0.25);
+      border: 2px solid #2c4265;
      border-top:none;
  }
  .select-items div {
-      color: rgba(255, 255, 255, 0.5);
+      color: #2c4265;
      border-top:none;
      cursor: pointer;
      width:100%;
@ -66,7 +66,7 @@
      height: 100%;
      padding: 9px 66px 9px 20px;
      position: relative;
-      color:#fff;
+      color:#2c4265;
  }
  .select-selected::after {
      content:"\f078";
@ -74,7 +74,7 @@
      position: absolute;
      width:20px;
      height:100%;
-      color:rgba(255, 255, 255, 0.5);
+      color:#2c4265;
      right:10px;
      top:0;
      display: flex;
@ -87,7 +87,7 @@
      position: absolute;
      width:20px;
      height:100%;
-      border-left:2px solid rgba(255, 255, 255, 0.25);
+      border-left:2px solid #2c4265;
      right:20px;
      top:0;
  }
--- a/Custom_Templates/customer_templates/Scenario/_footer.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/_footer.html.liquid
@ -39,7 +39,7 @@

  <div style="text-align: center;">
    <div class="ast-small-footer-section ast-small-footer-section-1">
-      © 2022 Projection Group | <a href="https://scenariocloud.com/privacy-policy" style="color: #ffffff">Privacy Policy</a> | <a href="https://scenariocloud.com/quality-policy" style="color: #ffffff">Quality Policy</a> | <a href="https://scenariocloud.com/customer-saas-agreement/" style="color: #ffffff">Customer SaaS Agreement</a>					
+      © 2022 Scenario | <a href="https://scenariocloud.com/privacy-policy" style="color: #ffffff">Privacy Policy</a> | <a href="https://scenariocloud.com/quality-policy" style="color: #ffffff">Quality Policy</a> | <a href="https://scenariocloud.com/customer-saas-agreement/" style="color: #ffffff">Customer SaaS Agreement</a>					
    </div>
  </div>

--- a/Custom_Templates/customer_templates/Scenario/_header.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/_header.html.liquid
@ -1,4 +1,4 @@
-<header class="np-header np-header-color" >
+<header class="np-header np-header-color">
  <div class="np-header-content">
    <div class="np-hidden-desktop np-header-mobile-menu-nav">
      {% if current_person.signed_in? %}
@ -67,6 +67,9 @@
          <i class="np-header-search-icon far fa-search"></i>
        </form>
      </div>
+      <div>
+        <a class='help-guide-link' href="https://help.scenariocloud.com/ENTERPRISE/" target="_blank">Help Guide</a>
+      </div>
      <div class="np-hidden-mobile np-header-avatar">
        <button
          class="np-header-avatar-button"
@ -122,77 +125,24 @@
    {% endif %}
  </div>
 </header>
+<style>
+  .np-header {
+    background: #fafafa; 
+    border: none; 
+    height: 3.5rem; 
+    margin-top: 3rem;
+    position: fixed; 
+  }

-<div class="np-hidden-desktop">
-  <div class="np-header-mobile-menu-content np-hidden">
-    {% if current_person.signed_in? %}
-      <img
-        alt="{{ current_person.name }}"
-        class="np-header-mobile-menu-content-avatar"
-        src="{{ current_person.avatar_url }}"
-      />
-      <div class="np-header-mobile-menu-content-name">
-        {{ current_person.name }}
-      </div>
-    {% endif %}
-    <div class="np-header-mobile-menu-content-nav">
-      <form
-        class="np-header-search"
-        data-test="mobile-search"
-        method="get"
-        action="{% route search %}"
-      >
-        <input
-          aria-label="{% t .search %}"
-          class="np-header-search-input"
-          type="text"
-          name="q"
-          placeholder="{% t .search %}"
-        />
-        <i class="np-header-search-icon far fa-search"></i>
-      </form>
-      {% for website_navigation in navigations.header_navigations %}
-        <a
-          href="{{ website_navigation.path }}"
-          class="np-header-mobile-menu-content-button"
-          {% if website_navigation.external? %} target="_blank" {% endif %}
-        >
-          {{ website_navigation.name }}
-        </a>
-      {% endfor %}
-      <div class="np-header-mobile-menu-content-line"></div>
-      {% unless current_school.sso_active? %}
-        <a
-          class="np-header-mobile-menu-content-button"
-          href="{% route account %}"
-        >
-          Profile Settings
-        </a>
-      {% endunless %}
-      <a
-        class="np-header-mobile-menu-content-button np-danger"
-        href="{% route logout %}"
-      >
-        Sign Out
-      </a>
-    </div>
-  </div>
-</div>
-
-{% include "messages" %}
-
-<script>
-    if (window.location.pathname === "/app") {
-      const headerTag = document.querySelector(".np-header");
-      headerTag.classList.add("np-header-absolute");
-    }
-
-    $(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
-    /*
-    function buildURL(path) {
-      const url = "https://academy.getpixel.io" + path + "?first_name={{current_person.first_name}}&last_name={{current_person.last_name}}&email={{current_person.email}}"
-      window.location.href = url
-    }
-    */
-</script>
+  .help-guide-link {
+    color: #2c4265;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 0 15px;
+    text-decoration: none;
+  }

+  .help-guide-link:hover{
+    color: rgb(4, 173, 240);
+  }
+</style>
--- a/Custom_Templates/customer_templates/Scenario/_modified_header.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/_modified_header.html.liquid
@ -0,0 +1,148 @@
+<header class="np-header np-header-color"">
+  <div class="np-header-content">
+    <div class="np-hidden-desktop np-header-mobile-menu-nav">
+      {% if current_person.signed_in? %}
+        <button
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
+          data-toggle-target=".np-header-mobile-avatar-menu,
+          .np-header-mobile-menu-content, .np-main, .np-footer"
+        ></button>
+        <button
+          data-test="open-mobile-menu"
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
+          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
+        >
+          <img
+            alt="{{ current_person.name }}"
+            class="np-header-avatar-image"
+            src="{{ current_person.avatar_url }}"
+          />
+        </button>
+      {% endif %}
+    </div>
+    {% if current_school.logo_url %}
+      <h1 class="np-header-logo">
+        <a href="{% route home %}">
+          <img
+            alt="{{ current_school.name }}"
+            class="np-header-logo-image"
+            src="{{ current_school.logo_url }}"
+          />
+        </a>
+      </h1>
+    {% else %}
+      <a href="{% route home %}" class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </a>
+    {% endif %}
+
+    <div class="np-hidden-mobile np-header-desktop-nav">
+      <ul class="np-header-desktop-nav-list">
+        {% for website_navigation in navigations.header_navigations_external %}
+          <li class= "np-header-desktop-nav-item">
+            <a
+              href="{{ website_navigation.path }}"
+              class="np-header-desktop-nav-link np-header-font-color"
+              target="_blank"
+            >
+              {{ website_navigation.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+
+    {% if current_person.signed_in? %}
+      <div class="np-hidden-mobile np-header-search np-header-search-expanded">
+        <form action="{% route search %}" method="get" data-test="desktop-search">
+          <input
+            aria-label="{% t .search %}"
+            class="np-header-search-input np-header-font-background-color"
+            type="text"
+            name="q"
+            placeholder="{% t .search %}"
+          />
+          <i class="np-header-search-icon far fa-search"></i>
+        </form>
+      </div>
+      <div>
+        <a class='help-guide-link' href="https://help.scenariocloud.com/ENTERPRISE/" target="_blank">Help Guide</a>
+      </div>
+      <div class="np-hidden-mobile np-header-avatar">
+        <button
+          class="np-header-avatar-button"
+          data-test="open-desktop-menu"
+          data-toggle-class-on-target="np-hidden"
+          data-toggle-target=".np-header-avatar-tooltip"
+          data-toggle-outside
+        >
+          <img
+            alt="{{ current_person.name }}"
+            class="np-header-avatar-image"
+            src="{{ current_person.avatar_url }}"
+          >
+        </button>
+        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
+          <span class="np-header-avatar-tooltip-arrow-up"></span>
+          <div class="np-header-avatar-tooltip-learner">
+            <div class="np-header-avatar-tooltip-learner-name">
+              {{ current_person.name }}
+            </div>
+            <div class="np-header-avatar-tooltip-learner-email">
+              {{ current_person.email }}
+            </div>
+          </div>
+          <nav class="np-header-avatar-tooltip-navigation">
+             <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
+              Default
+            </a>
+          {% unless current_school.sso_active? %}
+            <a
+              class="np-header-avatar-tooltip-navigation-link"
+              href="{% route account %}"
+            >
+              Profile Settings
+            </a>
+          {% endunless %}
+            <a
+              class="np-header-avatar-tooltip-navigation-link np-danger"
+              href="{% route logout %}"
+            >
+              Sign Out
+            </a>
+          </nav>
+        </div>
+      </div>
+    {% else %}
+      <a
+        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
+        href="{% route login %}"
+      >
+        {% t shared.sign_in %}
+      </div>
+    {% endif %}
+  </div>
+</header>
+<style>
+  .np-header{
+    background: #fafafa; 
+    border: none; 
+    height: 3.5rem; 
+    margin-top: 4rem;
+    position: fixed; 
+  }
+
+  .help-guide-link {
+    color: #2c4265;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 0 15px;
+    text-decoration: none;
+  }
+
+  .help-guide-link:hover{
+    color: rgb(4, 173, 240);
+  }
+</style>
--- a/Custom_Templates/customer_templates/Scenario/_section_popular_topics.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/_section_popular_topics.html.liquid
@ -5,17 +5,10 @@
    </div>
  </div>
    <div class="np-topics-list row">
-      <div class="col-xs-12 np-stretch-content"> 
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/5119428-course-publishing">Course Publishing</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3725263-northpass-course-marketplace">Course Marketplace</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/5469361-iorad-integration">Interactive Content</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310302-what-is-a-learning-path-and-how-do-i-use-it">Learning Paths</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310269-overview-of-authentication-options">Authentication</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310239-edit-domain-name">Edit Domain Name</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/collections/1919694-analytics">Analytics</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310282-instructor-led-training">Instructor Led Training</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/collections/2428172-apps-integrations">Integrations</a>
-        <a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/collections/1919697-advanced-options">Advanced Options</a>
+      <div class="col-xs-12 np-stretch-content" style="justify-content: space-evenly; flex-direction: row-reverse;"> 
+        {% for category in current_school.filterable_categories %}
+          <a class="np-top-button np-button np-button-secondary topic-button col-xs-2" href="/app/catalog?filter[category_uuid][in][]={{category.id}}">{{category.name}}</a>
+        {% endfor %}
      </div>
  </div>
 </div>
@ -23,5 +16,11 @@
 <style>
  .topic-button {
    border-radius: 8px;
+    color: #2c4265 !important;
+    border: 1px solid #2c4265 !important;
+  }
+
+  .topic-button:hover{
+    color: #34abe2 !important;
  }
 </style>
--- a/Custom_Templates/customer_templates/Scenario/auth_url_email.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/auth_url_email.html.liquid
@ -59,6 +59,7 @@
    </div>
  </div>
 </main>
+{% comment %}
 <script>
  // document.getElementById("header").scrollIntoView();

@ -88,14 +89,15 @@
          $("#bad_email_alert").css("display", "none");
          $("#submit_button").css("pointer-events", "auto");
        }
-      }      
+      }
    }, 500)
  }
  document.addEventListener('keyup', checkIfInputsExist);
  console.log(123213213);
 </script>
+{% endcomment %}
 <style>
  .np-input-label{
    color: #ffffff;
  }
-</style>
+</style>
--- a/Custom_Templates/customer_templates/Scenario/catalog.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/catalog.html.liquid
@ -0,0 +1,113 @@
+{% include "modified_header" %}
+
+<div class="np-hidden-desktop">
+  <div class="np-header-mobile-menu-content np-hidden">
+    {% if current_person.signed_in? %}
+      <img
+        alt="{{ current_person.name }}"
+        class="np-header-mobile-menu-content-avatar"
+        src="{{ current_person.avatar_url }}"
+      />
+      <div class="np-header-mobile-menu-content-name">
+        {{ current_person.name }}
+      </div>
+    {% endif %}
+    <div class="np-header-mobile-menu-content-nav">
+      <form
+        class="np-header-search"
+        data-test="mobile-search"
+        method="get"
+        action="{% route search %}"
+      >
+        <input
+          aria-label="{% t .search %}"
+          class="np-header-search-input"
+          type="text"
+          name="q"
+          placeholder="{% t .search %}"
+        />
+        <i class="np-header-search-icon far fa-search"></i>
+      </form>
+      {% for website_navigation in navigations.header_navigations %}
+        <a
+          href="{{ website_navigation.path }}"
+          class="np-header-mobile-menu-content-button"
+          {% if website_navigation.external? %} target="_blank" {% endif %}
+        >
+          {{ website_navigation.name }}
+        </a>
+      {% endfor %}
+      <div class="np-header-mobile-menu-content-line"></div>
+      {% unless current_school.sso_active? %}
+        <a
+          class="np-header-mobile-menu-content-button"
+          href="{% route account %}"
+        >
+          Profile Settings
+        </a>
+      {% endunless %}
+      <a
+        class="np-header-mobile-menu-content-button np-danger"
+        href="{% route logout %}"
+      >
+        Sign Out
+      </a>
+    </div>
+  </div>
+</div>
+
+
+{% include "messages" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+
+<div class="np-homepage-hero">
+  <img class="np-homepage-hero-image np-catalog-hero-image"
+    src="{{ homepage.artwork_url }}"
+    alt="{{ homepage.headline }}"
+  />
+  <div class="np-homepage-hero-content">
+    <div class="np-homepage-headline np-header-font-color">
+      {{ homepage.headline }}
+    </div>
+    <div class="np-homepage-subheadline np-header-font-color">
+      {{ homepage.subheadline }}
+    </div>
+  </div>
+</div>
+{% include "sub_navigation" %}
+<main class="np-main np-catalog np-subpage-container np-max-width">
+  <div class="np-catalog-header-wrapper">
+    <div class="np-catalog-header">
+      <div class="np-resource-title">{{ catalog.headline }}</div>
+      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
+    </div>
+    {% capture label %}{% t shared.filters.by_category %}{% endcapture %}
+
+    {% if courses.in_catalog.any? %}
+      {%
+        include "filter_dropdown",
+        filters: courses.filters,
+        key: "category_uuid",
+        label: label
+      %}
+    {% endif %}
+  </div>
+  {% include "courses_catalog" %}
+</main>
+{% include "footer" %}
+
+<style>
+  .np-header{
+    margin-top: 0 !important;
+  }
+
+  .np-catalog-hero-image{
+    height: 235px;
+  }
+
+  @media screen and (min-width: 768px){
+    .np-catalog-hero-image{
+      min-height: 235px;
+    }
+  }
+</style>
--- a/Custom_Templates/customer_templates/Scenario/dashboard.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/dashboard.html.liquid
@ -1,127 +1,4 @@
-<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem;">
-  <div class="np-header-content">
-    <div class="np-hidden-desktop np-header-mobile-menu-nav">
-      {% if current_person.signed_in? %}
-        <button
-          data-toggle-class="np-hidden"
-          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
-          data-toggle-target=".np-header-mobile-avatar-menu,
-          .np-header-mobile-menu-content, .np-main, .np-footer"
-        ></button>
-        <button
-          data-test="open-mobile-menu"
-          data-toggle-class="np-hidden"
-          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
-          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
-        >
-          <img
-            alt="{{ current_person.name }}"
-            class="np-header-avatar-image"
-            src="{{ current_person.avatar_url }}"
-          />
-        </button>
-      {% endif %}
-    </div>
-    {% if current_school.logo_url %}
-      <h1 class="np-header-logo">
-        <a href="{% route home %}">
-          <img
-            alt="{{ current_school.name }}"
-            class="np-header-logo-image"
-            src="{{ current_school.logo_url }}"
-          />
-        </a>
-      </h1>
-    {% else %}
-      <a href="{% route home %}" class="np-school-name np-header-font-color">
-        {{ current_school.name }}
-      </a>
-    {% endif %}
-
-    <div class="np-hidden-mobile np-header-desktop-nav">
-      <ul class="np-header-desktop-nav-list">
-        {% for website_navigation in navigations.header_navigations_external %}
-          <li class= "np-header-desktop-nav-item">
-            <a
-              href="{{ website_navigation.path }}"
-              class="np-header-desktop-nav-link np-header-font-color"
-              target="_blank"
-            >
-              {{ website_navigation.name }}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-
-    {% if current_person.signed_in? %}
-      <div class="np-hidden-mobile np-header-search np-header-search-expanded">
-        <form action="{% route search %}" method="get" data-test="desktop-search">
-          <input
-            aria-label="{% t .search %}"
-            class="np-header-search-input np-header-font-background-color"
-            type="text"
-            name="q"
-            placeholder="{% t .search %}"
-          />
-          <i class="np-header-search-icon far fa-search"></i>
-        </form>
-      </div>
-      <div class="np-hidden-mobile np-header-avatar">
-        <button
-          class="np-header-avatar-button"
-          data-test="open-desktop-menu"
-          data-toggle-class-on-target="np-hidden"
-          data-toggle-target=".np-header-avatar-tooltip"
-          data-toggle-outside
-        >
-          <img
-            alt="{{ current_person.name }}"
-            class="np-header-avatar-image"
-            src="{{ current_person.avatar_url }}"
-          >
-        </button>
-        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
-          <span class="np-header-avatar-tooltip-arrow-up"></span>
-          <div class="np-header-avatar-tooltip-learner">
-            <div class="np-header-avatar-tooltip-learner-name">
-              {{ current_person.name }}
-            </div>
-            <div class="np-header-avatar-tooltip-learner-email">
-              {{ current_person.email }}
-            </div>
-          </div>
-          <nav class="np-header-avatar-tooltip-navigation">
-             <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
-              Default
-            </a>
-          {% unless current_school.sso_active? %}
-            <a
-              class="np-header-avatar-tooltip-navigation-link"
-              href="{% route account %}"
-            >
-              Profile Settings
-            </a>
-          {% endunless %}
-            <a
-              class="np-header-avatar-tooltip-navigation-link np-danger"
-              href="{% route logout %}"
-            >
-              Sign Out
-            </a>
-          </nav>
-        </div>
-      </div>
-    {% else %}
-      <a
-        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
-        href="{% route login %}"
-      >
-        {% t shared.sign_in %}
-      </div>
-    {% endif %}
-  </div>
-</header>
+{% include "modified_header" %}

 <div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
@ -178,11 +55,10 @@
    </div>
  </div>
 </div>
-
 {% include "messages" %}
 {% include "course_version_outdated_alert", courses: courses.enrolled %}

-<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem; padding-top: 0.5rem;">
+<div class="np-homepage-hero">
  <img class="np-homepage-hero-image"
    src="{{ homepage.artwork_url }}"
    alt="{{ homepage.headline }}"
@ -288,63 +164,13 @@
 </main>
 {% include "footer" %}

-{% comment %}<style>
-  @media screen and (min-width: 300px) {
-    .np-homepage-hero{
-      background: #34abe2;
-      height: 7rem;
-    }
-
-    .np-homepage-hero-content{
-      padding: 2.25rem 2.75em;
-    }
+<style>
+  .np-homepage-hero{
+     background: #34abe2; 
+     margin-top: -4rem;
+     z-index: -1; 
  }
-
-  @media screen and (min-width: 365px) {
-    .np-homepage-hero-content{
-      padding: 2.25rem 3.2rem;
-    }
-  }
-
-  @media screen and (min-width: 550px) {
-    .np-homepage-hero{
-      height: 4rem;
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .np-header{
-      height: 130px;
-    }
-
-    .np-homepage-hero{
-      background: transparent;
-      margin-top: -3rem;
-      margin-bottom: -1rem;
-    }
-  }
-
-  @media screen and (min-width: 992px) {
-    .np-homepage-hero{
-      margin-top: -6rem;
-      margin-bottom: 0;
-      height: 6rem
-    }
-  }
-
-  @media screen and (max-width: 1024px) {
-    .progress-section {
-      padding-left: 0.5rem
-    }
-  }
-
-  @media screen and (min-width: 1200px) {
-    .np-homepage-hero{
-      margin-top: -7rem;
-      margin-bottom: 0;
-    }
-  }
-</style>{% endcomment %}
+</style>>
 <script>
  // Creates the custom dropdown and dropdown functionality
  var x, i, j, l, ll, selElmnt, a, b, c;
--- a/Custom_Templates/customer_templates/Scenario/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/homepage.html.liquid
@ -1,21 +1,24 @@
 {% include "header" %}
-{% include "course_version_outdated_alert", courses: courses.featured %}
-<main class="np-main np-homepage">
-  {% comment %}<div class="np-homepage-hero" >{% endcomment %}
-  <div class="np-homepage-hero" style="background: #34abe2; top: -1.95rem; height: 14.8rem;">
-    <img class="np-homepage-hero-image"
-      src="{{ homepage.artwork_url }}"
-      alt="{{ homepage.headline }}"
-    />
-    <div class="np-homepage-hero-content homepage-only-hero">
-      <div class="np-homepage-headline np-header-font-color">
-        {{ homepage.headline }}
-      </div>
-      <div class="np-homepage-subheadline np-header-font-color">
-        {{ homepage.subheadline }}
-      </div>
+
+{% include "messages" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+
+<div class="np-homepage-hero">
+  <img class="np-homepage-hero-image"
+    src="{{ homepage.artwork_url }}"
+    alt="{{ homepage.headline }}"
+  />
+  <div class="np-homepage-hero-content">
+    <div class="np-homepage-headline np-header-font-color">
+      {{ homepage.headline }}
+    </div>
+    <div class="np-homepage-subheadline np-header-font-color">
+      {{ homepage.subheadline }}
    </div>
  </div>
+</div>
+
+<main class="np-main np-homepage">
  {% include "sub_navigation" %}
  <div class="np-homepage-featured np-max-width">
    <div class="np-homepage-featured-text">
@ -49,7 +52,7 @@
    {% endif %}
  </div>

-  {% comment %}{% include "section_popular_topics" %}{% endcomment %}
+  {% include "section_popular_topics" %}

  {% comment %}{% include "section_tips_tricks" %}{% endcomment %}

@ -58,6 +61,14 @@
 </main>
 {% include "footer" %}
 <style>
+  .np-homepage-hero{
+    background: #34abe2; 
+    margin-bottom: -2rem; 
+    margin-top: -3rem; 
+    padding-top: 1rem;
+    z-index: -1; 
+  }
+
  @media screen and (min-width: 420px) {
    .np-homepage-hero-content {
      padding-bottom: 5rem;
--- a/Custom_Templates/customer_templates/Scenario/search.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/search.html.liquid
@ -0,0 +1,34 @@
+{% include "modified_header" %}
+
+<main class="np-main np-search np-subpage-container np-max-width">
+  <div class="np-resource-title">
+    {% t .title %}
+  </div>
+  <div class="np-search-header">
+    <div class="np-resource-subtitle">
+      {% t .showing %}
+      <span class="np-resource-subtitle-number">{{ results.count }}</span>
+      {% t .results_for %}
+      <span class="np-button-color">"{{ results.term }}"</span>
+    </div>
+    {% capture label %}{% t shared.filters.by_type %}{% endcapture %}
+    {%
+      include "filter_dropdown",
+      filters: results.filters,
+      key: "type",
+      label: label
+    %}
+  </div>
+  {% if results.items.any? %}
+    {% render "search_result" for results.items as result %}
+  {% else %}
+    {% include "search_zero_state" %}
+  {% endif %}
+</main>
+{% include "footer" %}
+
+<style>
+  .np-header{
+    margin-top: 0 !important;
+  }
+</style>
--- a/Custom_Templates/customer_templates/Scenario/styles.css.liquid
+++ b/Custom_Templates/customer_templates/Scenario/styles.css.liquid
@ -241,7 +241,7 @@ div {
  flex-flow: row wrap;
 }
 .np-topics-list .np-button-secondary {
-  margin: 6px 0;
+  margin: 6px;
  flex: 0 1 1;
 }

@ -633,6 +633,7 @@ button.jryxug {
  }
 }

+
 /* 
    3.6 - COURSE CARD
 */
@ -688,6 +689,11 @@ button.jryxug {
  border: 1px solid #2c4265;
  border-top: none;
 }
+
+.np-search-zero-state-card{
+  border: 1px solid #2c4265;
+}
+
 .np-card-content-footer {
  margin-top: 1.2rem;
 }
@ -1137,11 +1143,11 @@ button.jryxug {
 */

 .np-button.dropdown-button {
-  border: 2px solid rgba(255, 255, 255, 0.25);
+  border: 2px solid #2c4265;
  padding: 9px 60px 9px 20px;
  height: auto;
  position: relative;
-  color: #fff;
+  color: #2c4265;
 }

 .np-button.dropdown-button:before {
@ -1149,7 +1155,7 @@ button.jryxug {
  position: absolute;
  width: 20px;
  height: 100%;
-  border-left: 2px solid rgba(255, 255, 255, 0.25);
+  border-left: 2px solid #2c4265;
  right: 20px;
  top: 0;
 }
@ -1160,7 +1166,7 @@ button.jryxug {
  position: absolute;
  width: 20px;
  height: 100%;
-  color: rgba(255, 255, 255, 0.5);
+  color: #2c4265;
  right: 10px;
  top: 0;
  display: flex;
@ -1171,9 +1177,9 @@ button.jryxug {

 .dropdown-menu {
  border-radius: 0;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  color: #fff;
-  background-color: #062531;
+  border: 1px solid #2c4265;
+  color: #2c4265;
+  background-color: #FFFFFF;
  box-shadow: none;
  top: 95%;
 }
--- a/Custom_Templates/customer_templates/Scenario/training_events.html.liquid
+++ b/Custom_Templates/customer_templates/Scenario/training_events.html.liquid
@ -1,127 +1,4 @@
-<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem;">
-  <div class="np-header-content">
-    <div class="np-hidden-desktop np-header-mobile-menu-nav">
-      {% if current_person.signed_in? %}
-        <button
-          data-toggle-class="np-hidden"
-          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
-          data-toggle-target=".np-header-mobile-avatar-menu,
-          .np-header-mobile-menu-content, .np-main, .np-footer"
-        ></button>
-        <button
-          data-test="open-mobile-menu"
-          data-toggle-class="np-hidden"
-          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
-          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
-        >
-          <img
-            alt="{{ current_person.name }}"
-            class="np-header-avatar-image"
-            src="{{ current_person.avatar_url }}"
-          />
-        </button>
-      {% endif %}
-    </div>
-    {% if current_school.logo_url %}
-      <h1 class="np-header-logo">
-        <a href="{% route home %}">
-          <img
-            alt="{{ current_school.name }}"
-            class="np-header-logo-image"
-            src="{{ current_school.logo_url }}"
-          />
-        </a>
-      </h1>
-    {% else %}
-      <a href="{% route home %}" class="np-school-name np-header-font-color">
-        {{ current_school.name }}
-      </a>
-    {% endif %}
-
-    <div class="np-hidden-mobile np-header-desktop-nav">
-      <ul class="np-header-desktop-nav-list">
-        {% for website_navigation in navigations.header_navigations_external %}
-          <li class= "np-header-desktop-nav-item">
-            <a
-              href="{{ website_navigation.path }}"
-              class="np-header-desktop-nav-link np-header-font-color"
-              target="_blank"
-            >
-              {{ website_navigation.name }}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-
-    {% if current_person.signed_in? %}
-      <div class="np-hidden-mobile np-header-search np-header-search-expanded">
-        <form action="{% route search %}" method="get" data-test="desktop-search">
-          <input
-            aria-label="{% t .search %}"
-            class="np-header-search-input np-header-font-background-color"
-            type="text"
-            name="q"
-            placeholder="{% t .search %}"
-          />
-          <i class="np-header-search-icon far fa-search"></i>
-        </form>
-      </div>
-      <div class="np-hidden-mobile np-header-avatar">
-        <button
-          class="np-header-avatar-button"
-          data-test="open-desktop-menu"
-          data-toggle-class-on-target="np-hidden"
-          data-toggle-target=".np-header-avatar-tooltip"
-          data-toggle-outside
-        >
-          <img
-            alt="{{ current_person.name }}"
-            class="np-header-avatar-image"
-            src="{{ current_person.avatar_url }}"
-          >
-        </button>
-        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
-          <span class="np-header-avatar-tooltip-arrow-up"></span>
-          <div class="np-header-avatar-tooltip-learner">
-            <div class="np-header-avatar-tooltip-learner-name">
-              {{ current_person.name }}
-            </div>
-            <div class="np-header-avatar-tooltip-learner-email">
-              {{ current_person.email }}
-            </div>
-          </div>
-          <nav class="np-header-avatar-tooltip-navigation">
-             <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
-              Default
-            </a>
-          {% unless current_school.sso_active? %}
-            <a
-              class="np-header-avatar-tooltip-navigation-link"
-              href="{% route account %}"
-            >
-              Profile Settings
-            </a>
-          {% endunless %}
-            <a
-              class="np-header-avatar-tooltip-navigation-link np-danger"
-              href="{% route logout %}"
-            >
-              Sign Out
-            </a>
-          </nav>
-        </div>
-      </div>
-    {% else %}
-      <a
-        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
-        href="{% route login %}"
-      >
-        {% t shared.sign_in %}
-      </div>
-    {% endif %}
-  </div>
-</header>
+{% include "modified_header" %}

 <div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
@ -182,7 +59,7 @@
 {% include "messages" %}
 {% include "course_version_outdated_alert", courses: courses.enrolled %}

-<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem; padding-top: 0.5rem;">
+<div class="np-homepage-hero">
  <img class="np-homepage-hero-image"
    src="{{ homepage.artwork_url }}"
    alt="{{ homepage.headline }}"
@ -217,6 +94,11 @@
 {% include "footer" %}

 <style>
+  .np-homepage-hero{
+     background: #34abe2;
+     margin-top: -4rem;
+     z-index: -1; 
+  }
    /* @media screen and (min-width: 300px) {
    .np-homepage-hero{
      background: #34abe2;
--- a/CustomerNotes/Walmart.md
+++ b/CustomerNotes/Walmart.md
@ -292,7 +292,7 @@ Design:
  * Popular Topics/Discover (see screenshot)
  * Once search is started, add topics (All, Video, Text Only, etc)

-```
+```html
 <div style='display: none'>
 list of keywords
 keyword