From f08eb9774e12ab2fb10be34b283a347125407e83 Mon Sep 17 00:00:00 2001
From: Norm Rasmussen <norman.rasmussen@me.com>
Date: Mon, 18 Apr 2022 21:26:52 -0400
Subject: [PATCH] JNJ Updated Templates

---
 .../JnJVision/_cards_course.html.liquid       | 32 +++++++++++++----
 .../_course_details_review.html.liquid        | 18 ++++++++++
 .../JnJVision/_head.html.liquid               |  2 +-
 .../JnJVision/_homepage_events.html.liquid    | 30 ++++++++++++++++
 .../JnJVision/_section_faqs.html.liquid       |  4 +--
 .../JnJVision/homepage.html.liquid            |  2 +-
 .../JnJVision/styles.css.liquid               |  2 +-
 settings.json                                 | 34 +++++++++++++++++++
 8 files changed, 113 insertions(+), 11 deletions(-)
 create mode 100644 settings.json

diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
index e8d7d5b8..9d6ecb28 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
@@ -8,7 +8,6 @@
           src="{{ course.image_url }}"
         >
       </div>
-   
       <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
             <p class="course-title-vision">
                 {{ course.name }}
@@ -38,6 +37,8 @@
     </div>
 </div> {% endcomment %}
 
+{% comment %} - This was Kaitlyn's original code, I'm commenting it out to keep it incase
+the client wants to revert back. My categories boxes are below.
 <a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}" >
     <div class="np-card-container">
         <div class="np-card-image-content-top"> </div>
@@ -47,22 +48,41 @@
           src="{{ course.image_url }}"
         >
       </div>
-   
+  
       <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
             <p class="course-title-vision">
                 {{ course.name }}
             </p>
         <div class="np-card-content-footer">
             {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
-            {% comment %}            {% if course.has_to_restart? %}
+          {% if course.has_to_restart? %}
               {% include "course_version_outdated_popup", path: course_path %}
-            {% endif %}{% endcomment %}
+            {% endif %}
         </div>
     </div>
+</a> {% endcomment %}
+
+<a class="np-card" >
+    <div class="np-card-container">
+        <div class="np-card-image-content-top"> </div>
+        <img
+          class="np-card-image"
+          src="https://s3.amazonaws.com/static.northpass.com/Gusto/gusto2.png"
+        >
+      </div>
+  
+      <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+                {% for category in course.categories %}
+                  {{course.categories.first.name }}
+                {% endfor %}
+            </p>
+    </div>
 </a>
 
+
 <style>
-.np-card {
+  .np-card {
   text-decoration:none;
 }
   .fas.fa-star {
@@ -83,6 +103,6 @@
   }
 
   .course-title-vision {
-    font-family: Lexend !important;
+    font-family: "Plus Jakarta Sans", "Regular" !important;
   }
 </style>
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_course_details_review.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_course_details_review.html.liquid
index f1baab4a..fba9d334 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_course_details_review.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_course_details_review.html.liquid
@@ -25,6 +25,24 @@
         {% endif %}
       {% endif %}
     </div>
+    {% comment %} <div class="np-course-detail course-detail-rating">
+      <div class='course-detail-rating-stars' style='display: flex; flex-wrap: nowrap;'>
+        {% for i in (1..5) %}
+          {% if course.properties.np_course_rating >= i %}
+            <svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#006161"/>
+            </svg>  
+          {% else %}
+            <svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#006161"/>
+            </svg>
+          {% endif %}
+        {% endfor %}
+      </div>
+      <span class="np-details-label" style= 'display: flex;'>
+        {{course.properties.np_course_rating}} <div style='font-weight: 500; padding-left: 5px;'>({{course.properties.np_course_rating_count}}) </div>
+      </span>
+    </div> {% endcomment %}
 </div>
 
 <style>
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_head.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_head.html.liquid
index 99d1e352..8f79cbd4 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_head.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_head.html.liquid
@@ -4,7 +4,7 @@
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;400;500;600;700;800&display=swap" rel="stylesheet">
+<link href="https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
index 984ce4bf..cfc515d0 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
@@ -204,6 +204,35 @@
         font-weight: 400;
     }
 
+    @media (min-width:768px) and (max-width:1169px) {
+        .events-event {
+            padding: 48px;
+        }
+
+        .events-event-left {
+            width: 65%;
+        }
+
+        .events-event-right {
+            width: 35%;
+            margin-left: 45px;
+        }
+
+        .events-event-right-person {
+            display: block;
+            margin: 16px 0;
+        }
+
+        .events-event-right-person-image {
+            margin-bottom: 16px;
+        }
+
+        .events-event-left-subtitle {
+            font-size: 18px;
+        }
+
+    }
+
     @media (min-width:768px) {
 
         .events {
@@ -237,6 +266,7 @@
 
          .events-event-left-title {
             font-size: 28px;
+            margin-top:0;
         }
 
         .events-event-left-date {
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_section_faqs.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_section_faqs.html.liquid
index 513eea03..953ec06f 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_section_faqs.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_section_faqs.html.liquid
@@ -5,7 +5,7 @@
       </div>
     </div>
     <div class="row np-faqs" style='margin:0;'>
-        <div class="col-md-6">
+        <div class="col-12 col-lg-6">
             <div class="np-accordion">
                 <div class="accordion-btn">
                     <i class="fal fa-plus"></i>
@@ -40,7 +40,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-6">
+        <div class="col-12 col-lg-6">
             <div class="np-accordion">
                 <div class="accordion-btn">
                     <i class="fal fa-plus"></i>
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
index 2542a560..fba99350 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
@@ -1,5 +1,5 @@
 {% include "header" %}
-{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}
+{% include "course_version_outdated_alert", courses: courses.featured %}
 <main class="np-main np-homepage">
   {% include "homepage_hero_carousel" %}
   {% comment %} {% include "sub_navigation" %} {% endcomment %}
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid b/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
index 3c273a29..6d57b0cd 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
@@ -50,7 +50,7 @@
 
 body {
 	background: white;
-	font-family: "Lexend", "Roboto", sans-serif;
+	font-family: "Plus Jakarta Sans", "Regular", "Arial", sans-serif;
 }
 
 /* div {
diff --git a/settings.json b/settings.json
new file mode 100644
index 00000000..50942ff3
--- /dev/null
+++ b/settings.json
@@ -0,0 +1,34 @@
+{
+    "terminal.integrated.inheritEnv": false,
+    "workbench.colorTheme": "Northpass '22",
+    "editor.tokenColorCustomizations": {
+        "textMateRules": [
+            {
+                "scope": "text.notes.info",
+                "settings": {
+                    "foreground": "#17a2b8",
+                    "fontStyle": "bold"
+                }
+            },
+            {
+                "scope": "text.notes.success",
+                "settings": {
+                    "foreground": "#28a745",
+                    "fontStyle": "bold"
+                }
+            },
+            {
+                "scope": "text.notes.warning",
+                "settings": {
+                    "foreground": "#ffc107",
+                    "fontStyle": "bold"
+                }
+            },
+            {
+                "scope": "text.notes.danger",
+                "settings": {
+                    "foreground": "#dc3545",
+                    "fontStyle": "bold"
+                }
+            }
+