Scenario JS Snippet and Notes

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>

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;
   }

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>
 

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">
+  .help-guide-link {
-  <div class="np-header-mobile-menu-content np-hidden">
+    color: #2c4265;
-    {% if current_person.signed_in? %}
+    font-size: 18px;
-      <img
+    font-weight: 500;
-        alt="{{ current_person.name }}"
+    margin: 0 15px;
-        class="np-header-mobile-menu-content-avatar"
+    text-decoration: none;
-        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:hover{
+    color: rgb(4, 173, 240);
+  }
+</style>

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>

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"> 
+      <div class="col-xs-12 np-stretch-content" style="justify-content: space-evenly; flex-direction: row-reverse;"> 
-        <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>
+        {% for category in current_school.filterable_categories %}
-        <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 col-xs-2" href="/app/catalog?filter[category_uuid][in][]={{category.id}}">{{category.name}}</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>
+        {% endfor %}
-        <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>
   </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>

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>

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>

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;">
+{% include "modified_header" %}
-  <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>
 
 <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>
+<style>
-  @media screen and (min-width: 300px) {
+  .np-homepage-hero{
-    .np-homepage-hero{
+     background: #34abe2; 
-      background: #34abe2;
+     margin-top: -4rem;
-      height: 7rem;
+     z-index: -1; 
-    }
-
-    .np-homepage-hero-content{
-      padding: 2.25rem 2.75em;
-    }
   }
-
+</style>>
-  @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 %}
 <script>
   // Creates the custom dropdown and dropdown functionality
   var x, i, j, l, ll, selElmnt, a, b, c;

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">
+{% include "messages" %}
-  {% comment %}<div class="np-homepage-hero" >{% endcomment %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
-  <div class="np-homepage-hero" style="background: #34abe2; top: -1.95rem; height: 14.8rem;">
+
-    <img class="np-homepage-hero-image"
+<div class="np-homepage-hero">
-      src="{{ homepage.artwork_url }}"
+  <img class="np-homepage-hero-image"
-      alt="{{ homepage.headline }}"
+    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">
+  <div class="np-homepage-hero-content">
-        {{ homepage.headline }}
+    <div class="np-homepage-headline np-header-font-color">
-      </div>
+      {{ homepage.headline }}
-      <div class="np-homepage-subheadline np-header-font-color">
+    </div>
-        {{ homepage.subheadline }}
+    <div class="np-homepage-subheadline np-header-font-color">
-      </div>
+      {{ 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;

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>

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);
+  border: 1px solid #2c4265;
-  color: #fff;
+  color: #2c4265;
-  background-color: #062531;
+  background-color: #FFFFFF;
   box-shadow: none;
   top: 95%;
 }

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;">
+{% include "modified_header" %}
-  <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>
 
 <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;

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