From 06482010aae534cd7d21ff0586e01d5c10232279 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Tue, 1 Dec 2020 15:42:48 -0500
Subject: [PATCH 01/22] couldn't change colors of footer text or accordion
 buttons

---
 src/assets/pages/styles/resources-landing-page.scss | 4 ----
 src/assets/pages/styles/theme-base.scss             | 6 +++++-
 src/assets/pages/styles/theme-dark.scss             | 4 +++-
 src/assets/pages/styles/theme-light.scss            | 4 +++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/assets/pages/styles/resources-landing-page.scss b/src/assets/pages/styles/resources-landing-page.scss
index 0628be9..3bd703b 100644
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@@ -14,7 +14,6 @@ html {
 
 .main {
   background-color: secondary;
-  color: navbartext;
 }
 
 body {
@@ -147,13 +146,10 @@ body {
   padding-top: 3rem;
   padding-bottom: 3rem;
   background: primary;
-  color: footertext;
 }
 
 .footer p {
   margin-bottom: .25rem;
   margin-left: 25rem;
   padding-left: 25rem;
-  color: footertext;
 }
-
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 035b10d..93e09ec 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -50,7 +50,7 @@ $enable-rounded: true !default;
 }
 
 html {
-  height: 100%
+  height: 100%;
 }
 
 body {
@@ -124,5 +124,9 @@ body {
   outline: none;
 }
 
+.fixed-top {
+  outline: none;
+}
+
 
 
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 4421cab..6b823bc 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -31,7 +31,9 @@ $theme-colors: (
         "activetextaccordion": #9d9d9d,
         "inactiveborderaccordion": #180606,
         "activeborderaccordion": rgba(26, 26, 26, 0),
-        "footertext": #7b7b7b,
+        "footertext": #787572,
+        "chevronup": #787572,
+        "chevrondown": #9d9d9d,
 );
 
 .theme-button{
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 2c145ba..c706b2c 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -4,7 +4,7 @@ $theme-colors: (
         "success": #0B031C,
         "info": #ffffff,
         "warning": #700000,
-        "navbartext": #434344,
+        "navbartext": #121213,
         "navbartextfeather": #323233,
         "navbartextactive": #212122,
         "inactivecard": #ffffff,
@@ -33,6 +33,8 @@ $theme-colors: (
         "inactiveborderaccordion": #c0c2c6,
         "activeborderaccordion": rgba(26, 26, 26, 0),
         "footertext": #434344,
+        "chevronup": #434344,
+        "chevrondown": #434344,
 );
 
 .theme-button{

From cabff002b4ca38cd4ee9a18e905e9c4dc1691fd2 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Wed, 2 Dec 2020 13:27:00 -0500
Subject: [PATCH 02/22] added help dropdown and feedback dropdown

---
 src/assets/pages/resources-landing-page.html | 38 ++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 4a07f02..6ed1c4e 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -23,9 +23,43 @@
         &nbsp;Resource Center
     </a>
     <nav class="my-2 my-md-0 mr-md-3">
-        <a class="p-2 text-navbartext" href="#">Help</a>
-        <a class="p-2 text-navbartext" href="#">Feedback</a>
+        <div class="helpdropdown">
+        <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Help</a>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                <a class="dropdown-item" href="#">About the Resource Center</a>
+                <a class="dropdown-item" href="#">Searches</a>
+                <a class="dropdown-item" href="#">Categories</a>
+                <a class="dropdown-item" href="#">Resources</a>
+                <a class="dropdown-item" href="#">Updates</a>
+            </div>
+        </div>
+    </nav>
+    <nav class="my-2 my-md-0 mr-md-3">
+        <div class="feedbackdropdown">
+        <a class="p-2 text-navbartext" href="#" role="button" id="feedbackdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Feedback</a>
+                            
+
+
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+
+                <p class="feedback-instructions px-4 py-3">Would you like to send feedback or report an issue? Type your message and click "Submit."</p>
+             
+                <div class="dropdown divider">
+
+                    <form class="px-4 py-3">
+                        <div class="form-group">
+                        <label for="DropdownFeedbackMessage">Message</label>
+                        <input type="email" class="form-control" id="DropdownFeedbackEmail" placeholder="Type message here">
+                        </div>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                    </form>
+
+                </div>
+
+            </div>
+        </div>
     </nav>
+   
     <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
 </div>
 

From 5e86195d243521cfb0251f5b1a43f394ba8c1322 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Wed, 2 Dec 2020 16:39:55 -0500
Subject: [PATCH 03/22] changing help and feedback dropdown placement, size,
 color

---
 src/assets/pages/resources-landing-page.html |  6 ++---
 src/assets/pages/styles/theme-base.scss      | 26 ++++++++++++++++++++
 src/assets/pages/styles/theme-dark.scss      |  6 +++++
 src/assets/pages/styles/theme-light.scss     | 16 ++++++++----
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 6ed1c4e..5d27d27 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -24,8 +24,8 @@
     </a>
     <nav class="my-2 my-md-0 mr-md-3">
         <div class="helpdropdown">
-        <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Help</a>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+        <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                 <a class="dropdown-item" href="#">About the Resource Center</a>
                 <a class="dropdown-item" href="#">Searches</a>
                 <a class="dropdown-item" href="#">Categories</a>
@@ -51,7 +51,7 @@
                         <label for="DropdownFeedbackMessage">Message</label>
                         <input type="email" class="form-control" id="DropdownFeedbackEmail" placeholder="Type message here">
                         </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
+                    <button type="submit" class="btn btn-feedbacksubmitbutton text-feedbacksubmitbuttontext">Submit</button>
                     </form>
 
                 </div>
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 93e09ec..40763e8 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -128,5 +128,31 @@ body {
   outline: none;
 }
 
+.helpdropdown .dropdown-menu {
+  background-color: map-get($theme-colors, menudropdownfill);
+  font-size: 15px;
+  margin-bottom: 9px;
+  color: map-get($theme-colors, activetextaccordion) !important;
+  box-shadow: -1 1 3 1 #cccccc;
+}
+
+.feedbackdropdown .dropdown-menu {
+  background-color: map-get($theme-colors, menudropdownfill);
+  font-size: 15px;
+  margin-bottom: 9 px;
+  color: map-get($theme-colors, activetextaccordion);
+  box-shadow: -1 1 3 1 #cccccc;
+}
+
+#DropdownFeedbackEmail {
+   background-color: map-get($theme-colors, feedbackmessagefill);
+   border: 1px solid;
+   border-color: map-get($theme-colors, feedbackmessageborder);
+   color: map-get($theme-colors, searchfont);
+}
+
+.form-control::-webkit-input-placeholder {
+  color: map-get($theme-colors, feedbackmessagehint) !important;
+}
 
 
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 6b823bc..0b0236e 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -34,6 +34,12 @@ $theme-colors: (
         "footertext": #787572,
         "chevronup": #787572,
         "chevrondown": #9d9d9d,
+        "menudropdownfill": #4e4e56,
+        "feedbacksubmitbutton": #0c218c,
+        "feedbacksubmitbuttontext": #d9d2d2,
+        "feedbackmessagefill": #3c3c42,
+        "feedbackmessageborder": #363434,
+        "feedbackmessagehint": #787572,
 );
 
 .theme-button{
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index c706b2c..45e4046 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -1,8 +1,8 @@
 $theme-colors: (
-        "primary": #ffffff,
-        "secondary": #e5e5e5,
+        "primary": #fdfdfd,
+        "secondary": #dcdcdc,
         "success": #0B031C,
-        "info": #ffffff,
+        "info": #f9f9f9,
         "warning": #700000,
         "navbartext": #121213,
         "navbartextfeather": #323233,
@@ -14,7 +14,7 @@ $theme-colors: (
         "activecardfont": #e1e4e8,
         "searchhint": #c0c2c6,
         "searchfont": #2c2c2c,
-        "sidebarfill": #f6f6f6,
+        "sidebarfill": #efefef,
         "sidebartext": #545455,
         "searchbuttonfill": #f6f6f6,
         "searchicon": #545455,
@@ -25,7 +25,7 @@ $theme-colors: (
         "paragraphtextcolor": #434344,
         "paragraphtextcolorhover": #ffffff,
         "themebuttonoutline": #434344,
-        "inactiveaccordion": #f6f6f6,
+        "inactiveaccordion": #efefef,
         "activeaccordion": #ffffff,
         "inactivetextaccordion": #434344,
         "activetextaccordion": #434344,
@@ -35,6 +35,12 @@ $theme-colors: (
         "footertext": #434344,
         "chevronup": #434344,
         "chevrondown": #434344,
+        "menudropdownfill": #ffffff,
+        "feedbacksubmitbutton": #099f4a,
+        "feedbacksubmitbuttontext": #ffffff,
+        "feedbackmessagefill": #efefef,
+        "feedbackmessageborder": #dbdbdb,
+        "feedbackmessagehint": #c0c2c6,
 );
 
 .theme-button{

From a372fedbb218d7362eecfa29143c44cbbb17e00a Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 12:02:13 -0500
Subject: [PATCH 04/22] wrote the help windows

---
 src/assets/pages/help-about.html              | 32 +++++++++++++++++++
 src/assets/pages/help-categories.html         | 32 +++++++++++++++++++
 src/assets/pages/help-resources.html          | 32 +++++++++++++++++++
 src/assets/pages/help-searches.html           | 32 +++++++++++++++++++
 src/assets/pages/help-updates.html            | 32 +++++++++++++++++++
 src/assets/pages/resources-landing-page.html  | 10 +++---
 .../pages/styles/resources-landing-page.scss  |  6 ++++
 7 files changed, 171 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/pages/help-about.html
 create mode 100644 src/assets/pages/help-categories.html
 create mode 100644 src/assets/pages/help-resources.html
 create mode 100644 src/assets/pages/help-searches.html
 create mode 100644 src/assets/pages/help-updates.html

diff --git a/src/assets/pages/help-about.html b/src/assets/pages/help-about.html
new file mode 100644
index 0000000..fe06018
--- /dev/null
+++ b/src/assets/pages/help-about.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Help Menu: About the Resource Center</title>
+        <link rel="stylesheet" href="styles/resources-landing-page.css">
+
+        <script>let $ = require('jquery');</script>
+        <script>require('popper.js')</script>
+        <script>require('bootstrap')</script>
+    </head>
+
+    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
+        <div class="helpcontent text-paragraphtextcolor">
+        <h4>About the Resource Center</h4>
+        <p></p>
+        <p class="lead">You rely on a vast amount of resources to do your job. How can you keep track of them all? 
+        <p></p>
+        <p class="lead">Explore the Resource Center. 
+        <p></p>
+        <p class="lead">From accounting to workflows, this desktop application can help you find the resources you need.</p>
+        <p></p>
+        <p> <a href="resources-landing-page.html">Back to main</a> </p>
+        </div>
+    </body>
+
+    <script src="scripts/tsUtil.js"></script>
+    <script>loadTSTarget("themes.js");</script>
+    <script src="scripts/index_app.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/pages/help-categories.html b/src/assets/pages/help-categories.html
new file mode 100644
index 0000000..b1493a7
--- /dev/null
+++ b/src/assets/pages/help-categories.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Help Menu: Categories</title>
+        <link rel="stylesheet" href="styles/resources-landing-page.css">
+
+        <script>let $ = require('jquery');</script>
+        <script>require('popper.js')</script>
+        <script>require('bootstrap')</script>
+    </head>
+
+    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
+        <div class="helpcontent text-paragraphtextcolor">
+        <h4>Categories</h4>
+        <p></p>
+        <p class="lead">What are <i>categories</i>? 
+        <p></p>
+        <p class="lead">JDSfaulkner has so many helpful resources available to employees that it might be overwhelming to see them all at once. That's why this application categorizes them into topics.</p>
+        <p></p>
+        <p class="lead">Click a category in the main workspace to expand a section and view all the related resources. With a section expanded, you can navigate more easily using the scrollbar on the right or by clicking a category heading in the left sidebar.</p>
+        <p></p>
+        <p> <a href="resources-landing-page.html">Back to main</a> </p>
+        </div>
+    </body>
+
+    <script src="scripts/tsUtil.js"></script>
+    <script>loadTSTarget("themes.js");</script>
+    <script src="scripts/index_app.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/pages/help-resources.html b/src/assets/pages/help-resources.html
new file mode 100644
index 0000000..c9e1b0e
--- /dev/null
+++ b/src/assets/pages/help-resources.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Help Menu: Resources</title>
+        <link rel="stylesheet" href="styles/resources-landing-page.css">
+
+        <script>let $ = require('jquery');</script>
+        <script>require('popper.js')</script>
+        <script>require('bootstrap')</script>
+    </head>
+
+    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
+        <div class="helpcontent text-paragraphtextcolor">
+        <h4>Resources</h4>
+        <p></p>
+        <p class="lead">We get it. <i>Resources</i> can mean many things to many people.</p>
+        <p></p> 
+        <p class="lead">When it comes to the Resource Center, resources are digital files, storage systems, software and websites that help you do your job.</p>
+        <p></p>
+        <p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools available to them.</p>
+        <p></p>
+        <p><a href="resources-landing-page.html">Back to main</a> </p>
+        </div>
+    </body>
+
+    <script src="scripts/tsUtil.js"></script>
+    <script>loadTSTarget("themes.js");</script>
+    <script src="scripts/index_app.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/pages/help-searches.html b/src/assets/pages/help-searches.html
new file mode 100644
index 0000000..e09b987
--- /dev/null
+++ b/src/assets/pages/help-searches.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Help Menu: Searches</title>
+        <link rel="stylesheet" href="styles/resources-landing-page.css">
+
+        <script>let $ = require('jquery');</script>
+        <script>require('popper.js')</script>
+        <script>require('bootstrap')</script>
+    </head>
+
+    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
+        <div class="helpcontent text-paragraphtextcolor">
+        <h4>Searches</h4>
+        <p></p>
+        <p class="lead">Save time. Simplify your searches. 
+        <p></p>
+        <p class="lead">Finding resources that meet your criteria is easy when you use the search tool. At the top of your workspace, type a search term in the rounded search bar. Click "enter" on your keyboard, or click the search icon, and matching results populate your workspace.</p> 
+        <p></p>
+        <p class="lead">Voil&aacute; &mdash; helpful resources at your fingertips.</p>
+        <p> <a href="resources-landing-page.html">Back to main</a> </p>
+        </div>
+
+    </body>
+
+    <script src="scripts/tsUtil.js"></script>
+    <script>loadTSTarget("themes.js");</script>
+    <script src="scripts/index_app.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/pages/help-updates.html b/src/assets/pages/help-updates.html
new file mode 100644
index 0000000..efdbe72
--- /dev/null
+++ b/src/assets/pages/help-updates.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Help Menu: Updates</title>
+        <link rel="stylesheet" href="styles/resources-landing-page.css">
+
+        <script>let $ = require('jquery');</script>
+        <script>require('popper.js')</script>
+        <script>require('bootstrap')</script>
+    </head>
+
+    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
+        <div class="helpcontent text-paragraphtextcolor">
+        <h4>Updates</h4>
+        <p></p>
+        <p class="lead">Occasionally, you might see computer code moving across your screen for a few seconds after opening the Resource Center.</p>
+        <p></p>
+        <p class="lead">What is going on? An <i>update</i>.</p>
+        <p></p>
+        <p class="lead">Developers send updates periodically to improve functionality. If you have a reliable internet connection, updates should occur quickly and automatically.</p>
+        <p><a href="resources-landing-page.html">Back to main</a> </p>
+        </div>
+    
+    </body>
+
+    <script src="scripts/tsUtil.js"></script>
+    <script>loadTSTarget("themes.js");</script>
+    <script src="scripts/index_app.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 5d27d27..2683d6f 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -26,11 +26,11 @@
         <div class="helpdropdown">
         <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
-                <a class="dropdown-item" href="#">About the Resource Center</a>
-                <a class="dropdown-item" href="#">Searches</a>
-                <a class="dropdown-item" href="#">Categories</a>
-                <a class="dropdown-item" href="#">Resources</a>
-                <a class="dropdown-item" href="#">Updates</a>
+                <a class="dropdown-item" href="help-about.html">About the Resource Center</a>
+                <a class="dropdown-item" href="help-searches.html">Searches</a>
+                <a class="dropdown-item" href="help-categories.html">Categories</a>
+                <a class="dropdown-item" href="help-resources.html">Resources</a>
+                <a class="dropdown-item" href="help-updates.html">Updates</a>
             </div>
         </div>
     </nav>
diff --git a/src/assets/pages/styles/resources-landing-page.scss b/src/assets/pages/styles/resources-landing-page.scss
index 3bd703b..633e8b8 100644
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@@ -153,3 +153,9 @@ body {
   margin-left: 25rem;
   padding-left: 25rem;
 }
+
+.helpcontent {
+  margin: 3rem;
+  padding: 3rem;
+  font-size: 11px;
+}

From 90be028c39f10760c17543aa4bab1dd591bba81d Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 12:45:10 -0500
Subject: [PATCH 05/22] cleaned up some resource-landing

---
 src/assets/conf/resources-landing-page.json  |  2 -
 src/assets/pages/resources-landing-page.html | 47 +++++++++-----------
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/assets/conf/resources-landing-page.json b/src/assets/conf/resources-landing-page.json
index a65a801..07e739e 100644
--- a/src/assets/conf/resources-landing-page.json
+++ b/src/assets/conf/resources-landing-page.json
@@ -1,8 +1,6 @@
 {
   "grid-container": {
 
-
-
     "Human Resources": {
       "description": "Policies, recruitment, onboarding, benefits and compensation",
       "cards": [
diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 4a07f02..5448ab3 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -29,7 +29,6 @@
     <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
 </div>
 
-
 <div class="container-fluid">
     <div class="row">
         <nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
@@ -83,24 +82,25 @@
             </div>
         </nav>
 
-
         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
             <div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
 
                 <div class="album py-5">
-                            
-
-                <div class="sb-example-1">
-                    <div class="search">
-                        <input type="text" class="searchTerm" placeholder="Search">
-                        <button type="submit" class="searchbutton">
-                        <svg width="100%" height="auto" viewBox="-1 -3 22 22" class="bi bi-search" fill="info" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
-                        <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
-                        </svg>
-                        </button>
+
+                    <div class="sb-example-1">
+                        <div class="search">
+                            <input type="text" class="searchTerm" placeholder="Search">
+                            <button type="submit" class="searchbutton">
+                                <svg width="100%" height="auto" viewBox="-1 -3 22 22" class="bi bi-search" fill="info"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd"
+                                          d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+                                    <path fill-rule="evenodd"
+                                          d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+                                </svg>
+                            </button>
+                        </div>
                     </div>
-                </div>
 
 
                     <div class="album py-5 ">
@@ -112,18 +112,13 @@
                 </div>
             </div>
 
-
-
-<footer class="page-footer">
-    <div class="container">
-        <p class="float-left">
-            <a href="resources-landing-page.html">&nbsp;</a>
-        </p>
-        <p class="float-right">
-            <a href="#">Back to top</a>
-        </p>
-    </div>
-</footer>
+            <footer class="page-footer">
+                <div class="container">
+                    <p class="float-right">
+                        <a href="#">Back to top</a>
+                    </p>
+                </div>
+            </footer>
 
         </main>
     </div>

From 613268a4e1ce4cf764c398af0950931570b8afbc Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 13:10:07 -0500
Subject: [PATCH 06/22] implemented first help overlay

---
 src/assets/pages/resources-landing-page.html |  5 +++--
 src/assets/pages/styles/theme-base.scss      | 13 ++++++++++++-
 src/assets/views/help-overlay.mustache       |  7 +++++++
 src/ts_source/help.ts                        | 16 ++++++++++++++++
 src/ts_source/templates.ts                   |  2 +-
 5 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/views/help-overlay.mustache
 create mode 100644 src/ts_source/help.ts

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 92d1dc0..e35f9c1 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -26,7 +26,7 @@
         <div class="helpdropdown">
         <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
-                <a class="dropdown-item" href="help-about.html">About the Resource Center</a>
+                <a class="dropdown-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
                 <a class="dropdown-item" href="help-searches.html">Searches</a>
                 <a class="dropdown-item" href="help-categories.html">Categories</a>
                 <a class="dropdown-item" href="help-resources.html">Resources</a>
@@ -160,8 +160,9 @@
 
 </body>
 
-
 <script src="scripts/tsUtil.js"></script>
 <script>loadTSTarget("themes.js");</script>
+<script>let help = loadTSTarget("help.js");</script>
+
 <script src="scripts/index_app.js"></script>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 40763e8..8953e1a 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -155,4 +155,15 @@ body {
   color: map-get($theme-colors, feedbackmessagehint) !important;
 }
 
-
+.overlay-custom {
+  position: fixed; /* Sit on top of the page content */
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+  z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
+  cursor: pointer; /* Add a pointer on hover */
+}
diff --git a/src/assets/views/help-overlay.mustache b/src/assets/views/help-overlay.mustache
new file mode 100644
index 0000000..4cd5439
--- /dev/null
+++ b/src/assets/views/help-overlay.mustache
@@ -0,0 +1,7 @@
+<html lang="en">
+<div id="help-overlay" onclick="help.closeOverlay()" class="overlay-custom">
+    <p style="position:fixed; top:50%; left:50%; color:red;">
+        HELLO FROM THE HELP SCREEN
+    </p>
+</div>
+</html>
\ No newline at end of file
diff --git a/src/ts_source/help.ts b/src/ts_source/help.ts
new file mode 100644
index 0000000..2930368
--- /dev/null
+++ b/src/ts_source/help.ts
@@ -0,0 +1,16 @@
+import {loadTemplate} from "./templates";
+
+let $ = require('jquery')
+
+console.log("we got it loaded")
+
+export function openHelpOverlay(resourceName: string){
+    let body = $("body");
+    let loadedTemplate = loadTemplate("help-overlay.mustache", {}, (x)=>{});
+    let content = $(loadedTemplate);
+    body.append(content)
+}
+
+export function closeOverlay(){
+    $("#help-overlay").remove();
+}
\ No newline at end of file
diff --git a/src/ts_source/templates.ts b/src/ts_source/templates.ts
index 0681c68..2b50932 100644
--- a/src/ts_source/templates.ts
+++ b/src/ts_source/templates.ts
@@ -20,7 +20,7 @@ export function cacheTemplates() {
         });
 }
 
-export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType) {
+export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType): string {
     let contents = templateCache[filename];
     if (!contents) throw new Error("No such template: " + filename);
     let rendered = Mustache.render(contents, obj)

From 4dbed3b19fc3135ae7fdc144e4ee138c52689902 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 13:27:28 -0500
Subject: [PATCH 07/22] implemented import of content into help overlay

---
 src/assets/views/help-overlay.mustache |  6 +++---
 src/ts_source/fileutils.ts             |  3 +++
 src/ts_source/help.ts                  | 13 +++++++++----
 src/ts_source/templates.ts             |  7 ++++++-
 src/ts_source/viewFactory.ts           |  4 +++-
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/assets/views/help-overlay.mustache b/src/assets/views/help-overlay.mustache
index 4cd5439..3092862 100644
--- a/src/assets/views/help-overlay.mustache
+++ b/src/assets/views/help-overlay.mustache
@@ -1,7 +1,7 @@
 <html lang="en">
 <div id="help-overlay" onclick="help.closeOverlay()" class="overlay-custom">
-    <p style="position:fixed; top:50%; left:50%; color:red;">
-        HELLO FROM THE HELP SCREEN
-    </p>
+    <div>
+        {{{content}}}
+    </div>
 </div>
 </html>
\ No newline at end of file
diff --git a/src/ts_source/fileutils.ts b/src/ts_source/fileutils.ts
index c730e23..ba56d73 100644
--- a/src/ts_source/fileutils.ts
+++ b/src/ts_source/fileutils.ts
@@ -60,6 +60,9 @@ export module FileUtils {
     export function getPathToView(templateName: string): string {
         return path.join(getPathToAssets(), "views", templateName + ".mustache")
     }
+    export function getPathToPage(pageName: string): string {
+        return path.join(getPathToAssets(), "pages", pageName)
+    }
 
     export function getPathToImage(imageName: string): string {
         return path.join(getPathToAssets(), "images", imageName)
diff --git a/src/ts_source/help.ts b/src/ts_source/help.ts
index 2930368..e6177bb 100644
--- a/src/ts_source/help.ts
+++ b/src/ts_source/help.ts
@@ -1,4 +1,4 @@
-import {loadTemplate} from "./templates";
+import {loadTemplate, readHTML} from "./templates";
 
 let $ = require('jquery')
 
@@ -6,9 +6,14 @@ console.log("we got it loaded")
 
 export function openHelpOverlay(resourceName: string){
     let body = $("body");
-    let loadedTemplate = loadTemplate("help-overlay.mustache", {}, (x)=>{});
-    let content = $(loadedTemplate);
-    body.append(content)
+
+    let content = readHTML(resourceName);
+    let obj = {"content": content};
+
+    let loadedTemplate = loadTemplate("help-overlay.mustache", obj, (x)=>{});
+    let wrapper = $(loadedTemplate);
+
+    body.append(wrapper)
 }
 
 export function closeOverlay(){
diff --git a/src/ts_source/templates.ts b/src/ts_source/templates.ts
index 2b50932..032d909 100644
--- a/src/ts_source/templates.ts
+++ b/src/ts_source/templates.ts
@@ -42,6 +42,11 @@ function createId(fileName: String) {
     return crypto.createHash('md5').update(fileName).digest('hex');
 }
 
-module.exports = {loadTemplate, loadTemplateSingle}
+export function readHTML(fileName: string): string{
+    let baseFilePath = FileUtils.getPathToPage(fileName);
+    return fs.readFileSync(baseFilePath, "utf8").toString();
+}
+
+module.exports = {loadTemplate, loadTemplateSingle, readHTML}
 
 cacheTemplates()
\ No newline at end of file
diff --git a/src/ts_source/viewFactory.ts b/src/ts_source/viewFactory.ts
index e0aa143..5b7533a 100644
--- a/src/ts_source/viewFactory.ts
+++ b/src/ts_source/viewFactory.ts
@@ -2,6 +2,7 @@ import {Configurator, FileUtils} from './fileutils'
 import {loadTemplate, loadTemplateSingle} from "./templates"
 
 const shell = require('electron').shell;
+const fs = require('fs');
 
 
 export class CardModel {
@@ -141,4 +142,5 @@ function launchDocument(filename: string) {
 
 function launchWebsite(url: string) {
     shell.openItem(url);
-}
\ No newline at end of file
+}
+

From fbb8d174f1380988a275d9853412fab44875d05a Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 13:30:18 -0500
Subject: [PATCH 08/22] implemented style of help screen content div

---
 src/assets/pages/styles/theme-base.scss | 10 ++++++++++
 src/assets/views/help-overlay.mustache  |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 8953e1a..d494cb2 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -167,3 +167,13 @@ body {
   z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
   cursor: pointer; /* Add a pointer on hover */
 }
+
+.overlay-content{
+  position: fixed; /* Sit on top of the page content */
+  width: 50%; /* Full width (cover the whole page) */
+  height: 50%; /* Full height (cover the whole page) */
+  top: 25%;
+  left: 25%;
+  background-color: map-get($theme-colors, secondary); /* Black background with opacity */
+  cursor: pointer; /* Add a pointer on hover */
+}
\ No newline at end of file
diff --git a/src/assets/views/help-overlay.mustache b/src/assets/views/help-overlay.mustache
index 3092862..446f6e6 100644
--- a/src/assets/views/help-overlay.mustache
+++ b/src/assets/views/help-overlay.mustache
@@ -1,6 +1,6 @@
 <html lang="en">
 <div id="help-overlay" onclick="help.closeOverlay()" class="overlay-custom">
-    <div>
+    <div class="overlay-content">
         {{{content}}}
     </div>
 </div>

From 3ceb4ff8f03f686ff504c14a6531b4f74cf660e5 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 13:32:42 -0500
Subject: [PATCH 09/22] cleaned up help-about.html

---
 src/assets/pages/help-about.html | 38 ++++++++------------------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/assets/pages/help-about.html b/src/assets/pages/help-about.html
index fe06018..6bbdc0b 100644
--- a/src/assets/pages/help-about.html
+++ b/src/assets/pages/help-about.html
@@ -1,32 +1,12 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Help Menu: About the Resource Center</title>
-        <link rel="stylesheet" href="styles/resources-landing-page.css">
-
-        <script>let $ = require('jquery');</script>
-        <script>require('popper.js')</script>
-        <script>require('bootstrap')</script>
-    </head>
-
-    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
-        <div class="helpcontent text-paragraphtextcolor">
-        <h4>About the Resource Center</h4>
-        <p></p>
-        <p class="lead">You rely on a vast amount of resources to do your job. How can you keep track of them all? 
-        <p></p>
-        <p class="lead">Explore the Resource Center. 
-        <p></p>
-        <p class="lead">From accounting to workflows, this desktop application can help you find the resources you need.</p>
-        <p></p>
-        <p> <a href="resources-landing-page.html">Back to main</a> </p>
-        </div>
-    </body>
-
-    <script src="scripts/tsUtil.js"></script>
-    <script>loadTSTarget("themes.js");</script>
-    <script src="scripts/index_app.js"></script>
-
+<div class="helpcontent text-paragraphtextcolor">
+    <h4>About the Resource Center</h4>
+    <p></p>
+    <p class="lead">You rely on a vast amount of resources to do your job. How can you keep track of them all?
+    <p></p>
+    <p class="lead">Explore the Resource Center.
+    <p></p>
+    <p class="lead">From accounting to workflows, this desktop application can help you find the resources you need.</p>
+</div>
 </html>
\ No newline at end of file

From 32e93e6b937f824d57a15e05a4adb997c7ee17da Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 14:20:20 -0500
Subject: [PATCH 10/22] changed color of chevrons to fit theme

---
 src/assets/images/chevron-down-dark.svg  |  1 +
 src/assets/images/chevron-down-light.svg |  1 +
 src/assets/images/chevron-down.svg       |  1 -
 src/assets/images/chevron-up-dark.svg    |  1 +
 src/assets/images/chevron-up-light.svg   |  1 +
 src/assets/images/chevron-up.svg         |  1 -
 src/assets/pages/styles/theme-base.scss  |  2 ++
 src/assets/views/card-category.mustache  |  2 +-
 src/assets/views/web-card.mustache       |  2 +-
 src/ts_source/help.ts                    |  2 --
 src/ts_source/themes.ts                  | 16 ++++++++++++++++
 src/ts_source/viewFactory.ts             | 10 ++++++++--
 12 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/chevron-down-dark.svg
 create mode 100644 src/assets/images/chevron-down-light.svg
 delete mode 100644 src/assets/images/chevron-down.svg
 create mode 100644 src/assets/images/chevron-up-dark.svg
 create mode 100644 src/assets/images/chevron-up-light.svg
 delete mode 100644 src/assets/images/chevron-up.svg

diff --git a/src/assets/images/chevron-down-dark.svg b/src/assets/images/chevron-down-dark.svg
new file mode 100644
index 0000000..cdf32e4
--- /dev/null
+++ b/src/assets/images/chevron-down-dark.svg
@@ -0,0 +1 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-down-light.svg b/src/assets/images/chevron-down-light.svg
new file mode 100644
index 0000000..0a3d2f3
--- /dev/null
+++ b/src/assets/images/chevron-down-light.svg
@@ -0,0 +1 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="blue" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-down.svg b/src/assets/images/chevron-down.svg
deleted file mode 100644
index 0ec9604..0000000
--- a/src/assets/images/chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up-dark.svg b/src/assets/images/chevron-up-dark.svg
new file mode 100644
index 0000000..31865de
--- /dev/null
+++ b/src/assets/images/chevron-up-dark.svg
@@ -0,0 +1 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up-light.svg b/src/assets/images/chevron-up-light.svg
new file mode 100644
index 0000000..1a4d705
--- /dev/null
+++ b/src/assets/images/chevron-up-light.svg
@@ -0,0 +1 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="blue" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up.svg b/src/assets/images/chevron-up.svg
deleted file mode 100644
index a69d6b8..0000000
--- a/src/assets/images/chevron-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index d494cb2..6538c91 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -168,6 +168,8 @@ body {
   cursor: pointer; /* Add a pointer on hover */
 }
 
+.chevron-img{}
+
 .overlay-content{
   position: fixed; /* Sit on top of the page content */
   width: 50%; /* Full width (cover the whole page) */
diff --git a/src/assets/views/card-category.mustache b/src/assets/views/card-category.mustache
index 93cd15a..3b2639a 100644
--- a/src/assets/views/card-category.mustache
+++ b/src/assets/views/card-category.mustache
@@ -1,7 +1,7 @@
 <html lang="en">
 <div>
     <div id="{{{category-key}}}-collapser" class="category-header">
-        <div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" src="../images/chevron-up.svg" class="ml-auto p-2" alt="button"/></div>
+        <div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" class="ml-auto p-2 chevron-img" src="../images/chevron-up-dark.svg" alt="button"/></div>
         <p class="align-self-center">{{{category-description}}}</p>
     </div>
     <div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>
diff --git a/src/assets/views/web-card.mustache b/src/assets/views/web-card.mustache
index 0bc51b0..4357560 100644
--- a/src/assets/views/web-card.mustache
+++ b/src/assets/views/web-card.mustache
@@ -5,7 +5,7 @@
             <h6 class="card-text text-header" style="text-align:center">{{title}}</h6>
             <p class="card-text text-paragraph text-align-left">{{description}} </p>
             <div class="d-inline-block mx-auto justify-content-between align-items-center web-card-image-background">
-                <img class="rounded-circle mx-auto d-block img-fluid"
+                <img id="collapse-image" class="rounded-circle mx-auto d-block img-fluid"
                      src="{{{imgPath}}}" alt="{{{altText}}}"
                      style="max-height:50px">
             </div>
diff --git a/src/ts_source/help.ts b/src/ts_source/help.ts
index e6177bb..177985f 100644
--- a/src/ts_source/help.ts
+++ b/src/ts_source/help.ts
@@ -2,8 +2,6 @@ import {loadTemplate, readHTML} from "./templates";
 
 let $ = require('jquery')
 
-console.log("we got it loaded")
-
 export function openHelpOverlay(resourceName: string){
     let body = $("body");
 
diff --git a/src/ts_source/themes.ts b/src/ts_source/themes.ts
index a931774..3e50911 100644
--- a/src/ts_source/themes.ts
+++ b/src/ts_source/themes.ts
@@ -2,6 +2,8 @@ const $ = require('jquery');
 import {ConfigPaths, Configurator} from "./fileutils";
 
 export module Themes {
+
+
     export enum AppTheme {
         Light = "theme-light",
         Dark = "theme-dark"
@@ -37,6 +39,20 @@ export module Themes {
             }
         }
         head.prepend(buildCSSLink(newResource));
+
+
+        let images = document.querySelectorAll(".chevron-img");
+
+        for (let i = 0, l = images.length; i < l; i++) {
+            let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
+            let element = images[i];
+            let srcImg = element.getAttribute("src");
+            let groups = imageMatchRegex.exec(srcImg);
+            let direction = groups[1];
+            let theme = groups[2];
+            let newTheme = theme === "dark" ? "light" : "dark";
+            element.setAttribute("src", `../images/chevron-${direction}-${newTheme}.svg`);
+        }
     }
 
     function getButtonClassFromAppTheme(t: AppTheme): string {
diff --git a/src/ts_source/viewFactory.ts b/src/ts_source/viewFactory.ts
index 5b7533a..6bf6084 100644
--- a/src/ts_source/viewFactory.ts
+++ b/src/ts_source/viewFactory.ts
@@ -5,6 +5,7 @@ const shell = require('electron').shell;
 const fs = require('fs');
 
 
+
 export class CardModel {
     title: string;
     description: string;
@@ -71,18 +72,23 @@ export function buildWebCardsFromConfig(configName: string) {
             let collapseButton = $(`#${categoryKey}-collapser`);
 
             collapseButton.on("click", () => {
+                let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
                 let collapsable = $(`#${categoryKey}-container`);
                 let collapseButton = $(`#${categoryKey}-collapser`);
                 let collapseImg = $(`#${categoryKey}-img`);
                 if ("none" === collapsable.css('display')) {
                     collapsable.css("display", "");
                     collapseButton.addClass("active");
-                    collapseImg.attr("src", "../images/chevron-down.svg");
                 } else {
                     collapsable.css("display", "none");
                     collapseButton.removeClass("active");
-                    collapseImg.attr("src", "../images/chevron-up.svg");
                 }
+                let srcImg = collapseImg.attr("src");
+                let groups = imageMatchRegex.exec(srcImg);
+                let direction = groups[1];
+                let theme = groups[2];
+                let newDirection = direction === "up"? "down": "up";
+                collapseImg.attr("src", `../images/chevron-${newDirection}-${theme}.svg`);
             });
 
             for (let j = 0, m = contentList.length; j < m; j++) {

From 2f5997f9923675ea7dfb868c3cfda49569d4add9 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 14:25:42 -0500
Subject: [PATCH 11/22] Modified help dropdown text color

---
 src/assets/pages/resources-landing-page.html | 10 +++++-----
 src/assets/pages/styles/theme-base.scss      |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index e35f9c1..179c5b7 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -26,11 +26,11 @@
         <div class="helpdropdown">
         <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
-                <a class="dropdown-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
-                <a class="dropdown-item" href="help-searches.html">Searches</a>
-                <a class="dropdown-item" href="help-categories.html">Categories</a>
-                <a class="dropdown-item" href="help-resources.html">Resources</a>
-                <a class="dropdown-item" href="help-updates.html">Updates</a>
+                <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
+                <a class="dropdown-item help-menu-item" href="help-searches.html">Searches</a>
+                <a class="dropdown-item help-menu-item" href="help-categories.html">Categories</a>
+                <a class="dropdown-item help-menu-item" href="help-resources.html">Resources</a>
+                <a class="dropdown-item help-menu-item" href="help-updates.html">Updates</a>
             </div>
         </div>
     </nav>
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 6538c91..a222295 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -168,6 +168,10 @@ body {
   cursor: pointer; /* Add a pointer on hover */
 }
 
+.help-menu-item{
+  color: map-get($theme-colors, activetextaccordion) !important;
+}
+
 .chevron-img{}
 
 .overlay-content{

From 5cbe73c31e8da0e1ccfa588c1d43ab45486dc742 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 14:29:22 -0500
Subject: [PATCH 12/22] changed foother text color with a class

---
 src/assets/pages/resources-landing-page.html | 3 ++-
 src/assets/pages/styles/theme-base.scss      | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 179c5b7..7fbad84 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -148,7 +148,8 @@
 
             <footer class="page-footer">
                 <div class="container">
-                    <p class="float-right">
+                    <p class="float-right footer-text">
+                        Here's some footer text that is not a link
                         <a href="#">Back to top</a>
                     </p>
                 </div>
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index a222295..98b2a41 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -172,6 +172,10 @@ body {
   color: map-get($theme-colors, activetextaccordion) !important;
 }
 
+.footer-text{
+  color: red;
+}
+
 .chevron-img{}
 
 .overlay-content{

From 6367be66b4448e8b6acb4185571cc490d9b24d46 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 14:38:04 -0500
Subject: [PATCH 13/22] Made sidebar textcolor more dynamic

---
 src/assets/pages/styles/theme-base.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 98b2a41..8ec6295 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -176,6 +176,14 @@ body {
   color: red;
 }
 
+.text-sidebartext{
+  color: map-get($theme-colors, navbartextactive) !important;
+}
+
+.text-sidebartext:hover{
+  color: map-get($theme-colors, navbartext) !important;
+}
+
 .chevron-img{}
 
 .overlay-content{

From 9db51f3c0d86d38d2d3d1436582f87b8d3a4dbf5 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 14:38:59 -0500
Subject: [PATCH 14/22] Made sidebar textcolor more dynamic

---
 src/assets/pages/styles/theme-base.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 8ec6295..5187649 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -172,6 +172,10 @@ body {
   color: map-get($theme-colors, activetextaccordion) !important;
 }
 
+.help-menu-item:hover{
+  color: map-get($theme-colors, activetextaccordion) !important;
+}
+
 .footer-text{
   color: red;
 }

From 833664bb1bd2822e66890efca53285981167de42 Mon Sep 17 00:00:00 2001
From: dtookey <dtookey@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 14:42:41 -0500
Subject: [PATCH 15/22] window is limited to minimum of 769. this prevents
 media resizing

---
 src/assets/pages/styles/resources-landing-page.scss | 11 +++++------
 src/index.js                                        |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/assets/pages/styles/resources-landing-page.scss b/src/assets/pages/styles/resources-landing-page.scss
index 633e8b8..59faa24 100644
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@@ -1,10 +1,15 @@
 html {
   font-size: 14px;
 }
+
 @media (min-width: 768px) {
   html {
     font-size: 16px;
   }
+  .main {
+    padding-right: 40px;
+    padding-left: 220px; /* 180 + 40 */
+  }
 }
 
 .input-group {
@@ -106,12 +111,6 @@ body {
   color: navbartext;
 }
 
-@media (min-width: 768 px) {
-  .main {
-  padding-right: 40px;
-  padding-left: 220px; /* 180 + 40 */
-}
-}
 
 .searchbutton {
   background-color: transparent;
diff --git a/src/index.js b/src/index.js
index e5809ea..9cd4d7d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,7 +17,7 @@ function initialize () {
     function createWindow () {
         const windowOptions = {
             width: 1080,
-            minWidth: 680,
+            minWidth: 769,
             height: 840,
             title: app.name,
             webPreferences: {

From 37e8d5b13f7fef0fd8fd80eb6726755d5162149d Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Thu, 3 Dec 2020 16:57:03 -0500
Subject: [PATCH 16/22] updated help window html and assigned themed colors for
 chevrons

---
 src/assets/images/chevron-down-dark.svg      |  2 +-
 src/assets/images/chevron-down-light.svg     |  2 +-
 src/assets/images/chevron-up-dark.svg        |  2 +-
 src/assets/images/chevron-up-light.svg       |  2 +-
 src/assets/pages/help-about.html             | 18 +++++++--------
 src/assets/pages/help-categories.html        | 24 ++------------------
 src/assets/pages/help-resources.html         | 24 ++------------------
 src/assets/pages/help-searches.html          | 24 ++------------------
 src/assets/pages/help-updates.html           | 24 ++------------------
 src/assets/pages/resources-landing-page.html |  8 +++----
 src/assets/pages/styles/theme-base.scss      | 12 +++++-----
 11 files changed, 31 insertions(+), 111 deletions(-)

diff --git a/src/assets/images/chevron-down-dark.svg b/src/assets/images/chevron-down-dark.svg
index cdf32e4..a5a5d5c 100644
--- a/src/assets/images/chevron-down-dark.svg
+++ b/src/assets/images/chevron-down-dark.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#9d9d9d" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-down-light.svg b/src/assets/images/chevron-down-light.svg
index 0a3d2f3..98ac8f7 100644
--- a/src/assets/images/chevron-down-light.svg
+++ b/src/assets/images/chevron-down-light.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="blue" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up-dark.svg b/src/assets/images/chevron-up-dark.svg
index 31865de..815b0fd 100644
--- a/src/assets/images/chevron-up-dark.svg
+++ b/src/assets/images/chevron-up-dark.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#787572" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up-light.svg b/src/assets/images/chevron-up-light.svg
index 1a4d705..86d240a 100644
--- a/src/assets/images/chevron-up-light.svg
+++ b/src/assets/images/chevron-up-light.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="blue" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/pages/help-about.html b/src/assets/pages/help-about.html
index 6bbdc0b..45ffdf3 100644
--- a/src/assets/pages/help-about.html
+++ b/src/assets/pages/help-about.html
@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
-<div class="helpcontent text-paragraphtextcolor">
-    <h4>About the Resource Center</h4>
-    <p></p>
-    <p class="lead">You rely on a vast amount of resources to do your job. How can you keep track of them all?
-    <p></p>
-    <p class="lead">Explore the Resource Center.
-    <p></p>
-    <p class="lead">From accounting to workflows, this desktop application can help you find the resources you need.</p>
-</div>
+	<div class="helpcontent text-activetextaccordion">
+    	<h4>About the Resource Center</h4>
+    	<p></p>
+    	<p class="lead">You rely on a vast amount of resources to do your job. How can you keep track of them all?
+    	<p></p>
+    	<p class="lead">Explore the Resource Center.
+    	<p></p>
+    	<p class="lead">From accounting to workflows, this desktop application can help you find the resources you need.</p>
+	</div>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/help-categories.html b/src/assets/pages/help-categories.html
index b1493a7..bac8255 100644
--- a/src/assets/pages/help-categories.html
+++ b/src/assets/pages/help-categories.html
@@ -1,18 +1,6 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Help Menu: Categories</title>
-        <link rel="stylesheet" href="styles/resources-landing-page.css">
-
-        <script>let $ = require('jquery');</script>
-        <script>require('popper.js')</script>
-        <script>require('bootstrap')</script>
-    </head>
-
-    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
-        <div class="helpcontent text-paragraphtextcolor">
+    <div class="helpcontent text-activetextaccordion">
         <h4>Categories</h4>
         <p></p>
         <p class="lead">What are <i>categories</i>? 
@@ -20,13 +8,5 @@
         <p class="lead">JDSfaulkner has so many helpful resources available to employees that it might be overwhelming to see them all at once. That's why this application categorizes them into topics.</p>
         <p></p>
         <p class="lead">Click a category in the main workspace to expand a section and view all the related resources. With a section expanded, you can navigate more easily using the scrollbar on the right or by clicking a category heading in the left sidebar.</p>
-        <p></p>
-        <p> <a href="resources-landing-page.html">Back to main</a> </p>
-        </div>
-    </body>
-
-    <script src="scripts/tsUtil.js"></script>
-    <script>loadTSTarget("themes.js");</script>
-    <script src="scripts/index_app.js"></script>
-
+    </div>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/help-resources.html b/src/assets/pages/help-resources.html
index c9e1b0e..59d7063 100644
--- a/src/assets/pages/help-resources.html
+++ b/src/assets/pages/help-resources.html
@@ -1,18 +1,6 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Help Menu: Resources</title>
-        <link rel="stylesheet" href="styles/resources-landing-page.css">
-
-        <script>let $ = require('jquery');</script>
-        <script>require('popper.js')</script>
-        <script>require('bootstrap')</script>
-    </head>
-
-    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
-        <div class="helpcontent text-paragraphtextcolor">
+    <div class="helpcontent text-paragraphtextcolor">
         <h4>Resources</h4>
         <p></p>
         <p class="lead">We get it. <i>Resources</i> can mean many things to many people.</p>
@@ -20,13 +8,5 @@
         <p class="lead">When it comes to the Resource Center, resources are digital files, storage systems, software and websites that help you do your job.</p>
         <p></p>
         <p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools available to them.</p>
-        <p></p>
-        <p><a href="resources-landing-page.html">Back to main</a> </p>
-        </div>
-    </body>
-
-    <script src="scripts/tsUtil.js"></script>
-    <script>loadTSTarget("themes.js");</script>
-    <script src="scripts/index_app.js"></script>
-
+    </div>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/help-searches.html b/src/assets/pages/help-searches.html
index e09b987..2e3fc6d 100644
--- a/src/assets/pages/help-searches.html
+++ b/src/assets/pages/help-searches.html
@@ -1,18 +1,6 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Help Menu: Searches</title>
-        <link rel="stylesheet" href="styles/resources-landing-page.css">
-
-        <script>let $ = require('jquery');</script>
-        <script>require('popper.js')</script>
-        <script>require('bootstrap')</script>
-    </head>
-
-    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
-        <div class="helpcontent text-paragraphtextcolor">
+    <div class="helpcontent text-paragraphtextcolor">
         <h4>Searches</h4>
         <p></p>
         <p class="lead">Save time. Simplify your searches. 
@@ -20,13 +8,5 @@
         <p class="lead">Finding resources that meet your criteria is easy when you use the search tool. At the top of your workspace, type a search term in the rounded search bar. Click "enter" on your keyboard, or click the search icon, and matching results populate your workspace.</p> 
         <p></p>
         <p class="lead">Voil&aacute; &mdash; helpful resources at your fingertips.</p>
-        <p> <a href="resources-landing-page.html">Back to main</a> </p>
-        </div>
-
-    </body>
-
-    <script src="scripts/tsUtil.js"></script>
-    <script>loadTSTarget("themes.js");</script>
-    <script src="scripts/index_app.js"></script>
-
+    </div>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/help-updates.html b/src/assets/pages/help-updates.html
index efdbe72..f33c609 100644
--- a/src/assets/pages/help-updates.html
+++ b/src/assets/pages/help-updates.html
@@ -1,18 +1,6 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Help Menu: Updates</title>
-        <link rel="stylesheet" href="styles/resources-landing-page.css">
-
-        <script>let $ = require('jquery');</script>
-        <script>require('popper.js')</script>
-        <script>require('bootstrap')</script>
-    </head>
-
-    <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
-        <div class="helpcontent text-paragraphtextcolor">
+    <div class="helpcontent text-paragraphtextcolor">
         <h4>Updates</h4>
         <p></p>
         <p class="lead">Occasionally, you might see computer code moving across your screen for a few seconds after opening the Resource Center.</p>
@@ -20,13 +8,5 @@
         <p class="lead">What is going on? An <i>update</i>.</p>
         <p></p>
         <p class="lead">Developers send updates periodically to improve functionality. If you have a reliable internet connection, updates should occur quickly and automatically.</p>
-        <p><a href="resources-landing-page.html">Back to main</a> </p>
-        </div>
-    
-    </body>
-
-    <script src="scripts/tsUtil.js"></script>
-    <script>loadTSTarget("themes.js");</script>
-    <script src="scripts/index_app.js"></script>
-
+    </div>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 7fbad84..8687dc3 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -27,10 +27,10 @@
         <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                 <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
-                <a class="dropdown-item help-menu-item" href="help-searches.html">Searches</a>
-                <a class="dropdown-item help-menu-item" href="help-categories.html">Categories</a>
-                <a class="dropdown-item help-menu-item" href="help-resources.html">Resources</a>
-                <a class="dropdown-item help-menu-item" href="help-updates.html">Updates</a>
+                <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-searches.html');">Searches</a>
+                <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-categories.html');">Categories</a>
+                <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-resources.html');">Resources</a>
+                <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-updates.html');">Updates</a>
             </div>
         </div>
     </nav>
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 5187649..b041e66 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -163,7 +163,7 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
   z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
   cursor: pointer; /* Add a pointer on hover */
 }
@@ -192,10 +192,10 @@ body {
 
 .overlay-content{
   position: fixed; /* Sit on top of the page content */
-  width: 50%; /* Full width (cover the whole page) */
-  height: 50%; /* Full height (cover the whole page) */
-  top: 25%;
-  left: 25%;
-  background-color: map-get($theme-colors, secondary); /* Black background with opacity */
+  width: 400px; /* Full width (cover the whole page) */
+  height: 600px; /* Full height (cover the whole page) */
+  top: 5%;
+  right: 25%;
+  background-color: map-get($theme-colors, sidebarfill); /* Black background with opacity */
   cursor: pointer; /* Add a pointer on hover */
 }
\ No newline at end of file

From 44b9b6f7dff22778b6984af83c8ead2b05630cc9 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Fri, 4 Dec 2020 11:08:12 -0500
Subject: [PATCH 17/22] improved sidebar hover bg and text colors, fixed
 wrapping of nav bar when screen width smaller, tweaked active/inactive
 accordion and chevron colors

---
 src/assets/images/chevron-down-light.svg      |  2 +-
 src/assets/images/chevron-up-light.svg        |  2 +-
 src/assets/pages/resources-landing-page.html  | 24 +++---
 .../pages/styles/resources-landing-page.scss  | 29 ++-----
 src/assets/pages/styles/theme-base.scss       | 75 ++++++++++++++++---
 src/assets/pages/styles/theme-dark.scss       |  3 +
 src/assets/pages/styles/theme-light.scss      | 19 +++--
 7 files changed, 102 insertions(+), 52 deletions(-)

diff --git a/src/assets/images/chevron-down-light.svg b/src/assets/images/chevron-down-light.svg
index 98ac8f7..9c6eb65 100644
--- a/src/assets/images/chevron-down-light.svg
+++ b/src/assets/images/chevron-down-light.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#080404" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up-light.svg b/src/assets/images/chevron-up-light.svg
index 86d240a..782d2fa 100644
--- a/src/assets/images/chevron-up-light.svg
+++ b/src/assets/images/chevron-up-light.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#3f4959" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 8687dc3..8c05db1 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -16,6 +16,8 @@
 
 <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
 
+
+
 <div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
     <a class="navbar-brand text-navbartext my-0 mr-md-auto">
         <img src="../images/Asset4.png" height="30" class="d-inline-block align-top"
@@ -63,51 +65,54 @@
     <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
 </div>
 
+
+
+
 <div class="container-fluid">
     <div class="row">
         <nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
             <div class="sidebar-sticky">
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link active text-sidebartext" href="#">
+                        <a class="nav-link active" href="#">
                             <span data-feather="home"></span>
                             Top <span class="sr-only">(current)</span>
                         </a>
                     </li>
                 </ul>
 
-                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext">
+                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1">
                     <span>Resource Categories</span>
                     <a class="d-flex align-items-center" href="#">
                     </a>
                 </h6>
                 <ul class="nav flex-column mb-2 ml-4">
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#human-resources-collapser">
+                        <a class="nav-link" href="#human-resources-collapser">
                             <span data-feather="list-ul"></span>
                             Human Resources
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#marketing-collapser">
+                        <a class="nav-link" href="#marketing-collapser">
                             <span data-feather="list-ul"></span>
                             Marketing
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#productivity-collapser">
+                        <a class="nav-link" href="#productivity-collapser">
                             <span data-feather="list-ul"></span>
                             Productivity
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#training-collapser">
+                        <a class="nav-link" href="#training-collapser">
                             <span data-feather="list-ul"></span>
                             Training
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#workflow-collapser">
+                        <a class="nav-link" href="#workflow-collapser">
                             <span data-feather="list-ul"></span>
                             Workflow
                         </a>
@@ -148,9 +153,8 @@
 
             <footer class="page-footer">
                 <div class="container">
-                    <p class="float-right footer-text">
-                        Here's some footer text that is not a link
-                        <a href="#">Back to top</a>
+                    <p class="float-right">
+                        <a href="#" class="footer-text">Back to top</a>
                     </p>
                 </div>
             </footer>
diff --git a/src/assets/pages/styles/resources-landing-page.scss b/src/assets/pages/styles/resources-landing-page.scss
index 59faa24..a05cbc2 100644
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@@ -2,7 +2,7 @@ html {
   font-size: 14px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 876px) {
   html {
     font-size: 16px;
   }
@@ -23,10 +23,11 @@ html {
 
 body {
   font-size: 1rem;
-  padding-top: 80px;
+  padding-top: 125px;
   padding-bottom: 20px;
 }
 
+
 .feather {
   width: 16px;
   height: 16 px;
@@ -62,7 +63,10 @@ body {
   bottom: 0;
   left: 0;
   z-index: 100; /* Behind the navbar */
-  padding: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+  padding-right: 10px;
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
@@ -77,25 +81,6 @@ body {
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 }
 
-.sidebar .nav-link {
-  font-weight: 500;
-  color: navbartext;
-}
-
-.sidebar .nav-link .feather {
-  margin-right: 4px;
-  color: navbartextfeather;
-}
-
-.sidebar .nav-link.active {
-  color: navbartextactive;
-}
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: inherit;
-}
-
 .sidebar-heading {
   font-size: .75rem;
   text-transform: uppercase;
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index b041e66..66fbe7f 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -168,29 +168,84 @@ body {
   cursor: pointer; /* Add a pointer on hover */
 }
 
-.help-menu-item{
-  color: map-get($theme-colors, activetextaccordion) !important;
+.help-menu-item {
+  color: map-get($theme-colors, navbartext) !important;
 }
 
-.help-menu-item:hover{
+.help-menu-item:hover {
   color: map-get($theme-colors, activetextaccordion) !important;
 }
 
-.footer-text{
-  color: red;
+.footer-text {
+  color: map-get($theme-colors, footerback);
 }
 
-.text-sidebartext{
-  color: map-get($theme-colors, navbartextactive) !important;
+.footer-text:focus {
+  color: map-get($theme-colors, footerbackfocus);
 }
 
-.text-sidebartext:hover{
-  color: map-get($theme-colors, navbartext) !important;
+
+
+.sidebarsticky li a:hover {
+  color: map-get($theme-colors, activetextaccordion) !important; /* This is NOT working */
+}
+
+
+.sidebar-sticky {
+  color: map-get($theme-colors, yellow) !important; /* This is NOT working */
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: blue; /* This is NOT working */
+}
+
+
+
+
+.sidebar {
+  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
+}
+
+.sidebar:hover {
+  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
 }
 
+.sidebar .nav-link.active {
+  color: map-get($theme-colors, sidebartext); /* This is the color of the Top item in menu when inactive */
+}
+
+.sidebar .nav-link.active:hover {
+  color: map-get($theme-colors, activetextaccordion); /* This is the color of the Top item in menu when hovered */
+  background-color: map-get($theme-colors, sidebarbg);
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: map-get($theme-colors, sidebartext); /* This is the color of the category names when inactive */
+}
+
+.sidebar .nav-link:hover {
+  font-weight: 500;
+  color: map-get($theme-colors, activetextaccordion); /* This is the color of the category names when hovered */
+  background-color: map-get($theme-colors, sidebarbg);
+}
+
+
+
+
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: green;
+}
+
+
+
+
 .chevron-img{}
 
-.overlay-content{
+.overlay-content {
   position: fixed; /* Sit on top of the page content */
   width: 400px; /* Full width (cover the whole page) */
   height: 600px; /* Full height (cover the whole page) */
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 0b0236e..0dceaf5 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -18,6 +18,7 @@ $theme-colors: (
         "searchbuttonfill": #39393f,
         "searchicon": #737373,
         "sidebartext": #787572,
+        "sidebarbg": #29292d,
         "webcardimagebackground": #707070,
         "webcardimagebackgroundhover": #98928F,
         "headertextcolor": #9d9d9d,
@@ -40,6 +41,8 @@ $theme-colors: (
         "feedbackmessagefill": #3c3c42,
         "feedbackmessageborder": #363434,
         "feedbackmessagehint": #787572,
+        "footerback": rgba(120, 117, 114, 0.8),
+        "footerbackfocus": rgba(120, 117, 114, 1),
 );
 
 .theme-button{
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 45e4046..6b096ed 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -4,9 +4,9 @@ $theme-colors: (
         "success": #0B031C,
         "info": #f9f9f9,
         "warning": #700000,
-        "navbartext": #121213,
-        "navbartextfeather": #323233,
-        "navbartextactive": #212122,
+        "navbartext": #080404,
+        "navbartextfeather": #080404,
+        "navbartextactive": #080404,
         "inactivecard": #ffffff,
         "activecard": #13a04a,
         "boxborder": #c0c2c6,
@@ -15,20 +15,21 @@ $theme-colors: (
         "searchhint": #c0c2c6,
         "searchfont": #2c2c2c,
         "sidebarfill": #efefef,
-        "sidebartext": #545455,
+        "sidebartext": #3f4959,
+        "sidebarbg": #e5e5e5,
         "searchbuttonfill": #f6f6f6,
         "searchicon": #545455,
         "webcardimagebackground": #eeeeee,
         "webcardimagebackgroundhover": #f0f0f0,
-        "headertextcolor": #434344,
+        "headertextcolor": #080404,
         "headertextcolorhover": #ffffff,
-        "paragraphtextcolor": #434344,
+        "paragraphtextcolor": #080404,
         "paragraphtextcolorhover": #ffffff,
         "themebuttonoutline": #434344,
         "inactiveaccordion": #efefef,
         "activeaccordion": #ffffff,
-        "inactivetextaccordion": #434344,
-        "activetextaccordion": #434344,
+        "inactivetextaccordion": #3f4959,
+        "activetextaccordion": #080404,
         "borderaccordion": #c0c2c6,
         "inactiveborderaccordion": #c0c2c6,
         "activeborderaccordion": rgba(26, 26, 26, 0),
@@ -41,6 +42,8 @@ $theme-colors: (
         "feedbackmessagefill": #efefef,
         "feedbackmessageborder": #dbdbdb,
         "feedbackmessagehint": #c0c2c6,
+        "footerback": #434344,
+        "footerbackfocus": #000000,
 );
 
 .theme-button{

From 0e742c0abaf39bfb20df9338b0f25d04e377a679 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Fri, 4 Dec 2020 11:24:12 -0500
Subject: [PATCH 18/22] made a footer hover and click color change

---
 src/assets/pages/styles/theme-base.scss  | 4 ++++
 src/assets/pages/styles/theme-dark.scss  | 5 +++--
 src/assets/pages/styles/theme-light.scss | 5 +++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 66fbe7f..f53597b 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -180,6 +180,10 @@ body {
   color: map-get($theme-colors, footerback);
 }
 
+.footer-text:hover {
+  color: map-get($theme-colors, footerbackhover);
+}
+
 .footer-text:focus {
   color: map-get($theme-colors, footerbackfocus);
 }
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 0dceaf5..4f498de 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -41,8 +41,9 @@ $theme-colors: (
         "feedbackmessagefill": #3c3c42,
         "feedbackmessageborder": #363434,
         "feedbackmessagehint": #787572,
-        "footerback": rgba(120, 117, 114, 0.8),
-        "footerbackfocus": rgba(120, 117, 114, 1),
+        "footerback": #787572,
+        "footerbackfocus": #787572,
+        "footerbackhover": rgba(157, 157, 157, .8),
 );
 
 .theme-button{
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 6b096ed..9154dbc 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -42,8 +42,9 @@ $theme-colors: (
         "feedbackmessagefill": #efefef,
         "feedbackmessageborder": #dbdbdb,
         "feedbackmessagehint": #c0c2c6,
-        "footerback": #434344,
-        "footerbackfocus": #000000,
+        "footerback": #3f4959,
+        "footerbackfocus": #3f4959,
+        "footerbackhover": #080404,
 );
 
 .theme-button{

From d5e95db8f3d14178d7454d5d35d7006a2e55954e Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Fri, 4 Dec 2020 12:03:52 -0500
Subject: [PATCH 19/22] made search button change colors on click

---
 src/assets/pages/styles/theme-base.scss  | 15 +++++++++++++++
 src/assets/pages/styles/theme-dark.scss  |  2 ++
 src/assets/pages/styles/theme-light.scss |  8 +++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index f53597b..b02a717 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -124,6 +124,21 @@ body {
   outline: none;
 }
 
+.sb-example-1 .searchbutton:focus {
+  width: 40px;
+  height: 50px;
+  border: 1px solid;
+  border-color: map-get($theme-colors, boxborder2);
+  background-color: map-get($theme-colors, searchbuttonfillfocus);
+  text-align: center;
+  fill: map-get($theme-colors, searchiconfocus);
+  border-radius: 0 25px 25px 0;
+  cursor: pointer;
+  font-weight: normal;
+  box-shadow: none;
+  outline: none;
+}
+
 .fixed-top {
   outline: none;
 }
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 4f498de..c49f642 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -16,7 +16,9 @@ $theme-colors: (
         "searchfont": #9f9c9a, 
         "sidebarfill": #202023,
         "searchbuttonfill": #39393f,
+        "searchbuttonfillfocus": #3e3e45, 
         "searchicon": #737373,
+        "searchiconfocus": #878787,
         "sidebartext": #787572,
         "sidebarbg": #29292d,
         "webcardimagebackground": #707070,
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 9154dbc..cf81cd1 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -4,7 +4,7 @@ $theme-colors: (
         "success": #0B031C,
         "info": #f9f9f9,
         "warning": #700000,
-        "navbartext": #080404,
+        "navbartext": #3f4a5a,
         "navbartextfeather": #080404,
         "navbartextactive": #080404,
         "inactivecard": #ffffff,
@@ -18,14 +18,16 @@ $theme-colors: (
         "sidebartext": #3f4959,
         "sidebarbg": #e5e5e5,
         "searchbuttonfill": #f6f6f6,
-        "searchicon": #545455,
+        "searchbuttonfillfocus": #f2f2f2,
+        "searchicon": #3f4959,
+        "searchiconfocus": #38414f,
         "webcardimagebackground": #eeeeee,
         "webcardimagebackgroundhover": #f0f0f0,
         "headertextcolor": #080404,
         "headertextcolorhover": #ffffff,
         "paragraphtextcolor": #080404,
         "paragraphtextcolorhover": #ffffff,
-        "themebuttonoutline": #434344,
+        "themebuttonoutline": #3f4a5a,
         "inactiveaccordion": #efefef,
         "activeaccordion": #ffffff,
         "inactivetextaccordion": #3f4959,

From d3f9146a92979eb935f1f11112508387f6b62ba0 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Fri, 4 Dec 2020 14:36:39 -0500
Subject: [PATCH 20/22] made the nav items change color on hover

---
 src/assets/pages/resources-landing-page.html |  6 ++---
 src/assets/pages/styles/theme-base.scss      | 23 +++++++++++++++++---
 src/assets/pages/styles/theme-dark.scss      |  6 ++++-
 src/assets/pages/styles/theme-light.scss     |  8 +++++--
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 8c05db1..09455f0 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -19,14 +19,14 @@
 
 
 <div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
-    <a class="navbar-brand text-navbartext my-0 mr-md-auto">
+    <a class="navbar-brand my-0 mr-md-auto">
         <img src="../images/Asset4.png" height="30" class="d-inline-block align-top"
              alt="JDSfaulkner logo">
         &nbsp;Resource Center
     </a>
     <nav class="my-2 my-md-0 mr-md-3">
         <div class="helpdropdown">
-        <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
+        <a class="p-2 navigationitem" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                 <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
                 <a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-searches.html');">Searches</a>
@@ -38,7 +38,7 @@
     </nav>
     <nav class="my-2 my-md-0 mr-md-3">
         <div class="feedbackdropdown">
-        <a class="p-2 text-navbartext" href="#" role="button" id="feedbackdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Feedback</a>
+        <a class="p-2 navigationitem" href="#" role="button" id="feedbackdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Feedback</a>
                             
 
 
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index b02a717..f28fd45 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -139,10 +139,26 @@ body {
   outline: none;
 }
 
-.fixed-top {
+.navigationitem {
   outline: none;
+  color: map-get($theme-colors, navbartext);
 }
 
+.navigationitem:hover {
+  color: map-get($theme-colors, activetextaccordion);
+}
+
+.navbar-brand {
+  outline: none;
+  color: map-get($theme-colors, navbarbrandtext);
+}
+
+.navbar-brand:hover {
+  outline: none;
+  color: map-get($theme-colors, navbarbrandtext);
+}
+
+
 .helpdropdown .dropdown-menu {
   background-color: map-get($theme-colors, menudropdownfill);
   font-size: 15px;
@@ -184,11 +200,12 @@ body {
 }
 
 .help-menu-item {
-  color: map-get($theme-colors, navbartext) !important;
+  color: map-get($theme-colors, helpmenudropdowntext) !important;
 }
 
 .help-menu-item:hover {
-  color: map-get($theme-colors, activetextaccordion) !important;
+  color: map-get($theme-colors, helpmenudropdowntexthover) !important;
+  background-color: map-get($theme-colors, helpmenudropdownbghover) !important;
 }
 
 .footer-text {
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index c49f642..a521198 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -4,6 +4,7 @@ $theme-colors: (
         "success": #808080,
         "info": #2d2d31,
         "warning": #000000,
+        "navbarbrandtext": #9d9d9d,
         "navbartext": #808080,
         "navbartextfeather": #303033,
         "navbartextactive": #202022,
@@ -19,7 +20,7 @@ $theme-colors: (
         "searchbuttonfillfocus": #3e3e45, 
         "searchicon": #737373,
         "searchiconfocus": #878787,
-        "sidebartext": #787572,
+        "sidebartext": #7d7d7d,
         "sidebarbg": #29292d,
         "webcardimagebackground": #707070,
         "webcardimagebackgroundhover": #98928F,
@@ -46,6 +47,9 @@ $theme-colors: (
         "footerback": #787572,
         "footerbackfocus": #787572,
         "footerbackhover": rgba(157, 157, 157, .8),
+        "helpmenudropdowntext": #9d9d9d,
+        "helpmenudropdowntexthover": #a8a8a8,
+        "helpmenudropdownbghover": #5c5c66, 
 );
 
 .theme-button{
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index cf81cd1..5e373c8 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -4,7 +4,8 @@ $theme-colors: (
         "success": #0B031C,
         "info": #f9f9f9,
         "warning": #700000,
-        "navbartext": #3f4a5a,
+        "navbartext": #3f4959,
+        "navbarbrandtext": #3f4a5a,
         "navbartextfeather": #080404,
         "navbartextactive": #080404,
         "inactivecard": #ffffff,
@@ -18,7 +19,7 @@ $theme-colors: (
         "sidebartext": #3f4959,
         "sidebarbg": #e5e5e5,
         "searchbuttonfill": #f6f6f6,
-        "searchbuttonfillfocus": #f2f2f2,
+        "searchbuttonfillfocus": #f1f1f1,
         "searchicon": #3f4959,
         "searchiconfocus": #38414f,
         "webcardimagebackground": #eeeeee,
@@ -47,6 +48,9 @@ $theme-colors: (
         "footerback": #3f4959,
         "footerbackfocus": #3f4959,
         "footerbackhover": #080404,
+        "helpmenudropdowntext": #3f4a5a,
+        "helpmenudropdowntexthover": #080404,
+        "helpmenudropdownbghover": #f2f2f2,
 );
 
 .theme-button{

From 7588f397d6d73902d0d2865cde059569b2164e61 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Fri, 4 Dec 2020 16:53:53 -0500
Subject: [PATCH 21/22] designed the help screens and tried to change theme
 toggle colors

---
 src/assets/pages/help-resources.html         |  2 +-
 src/assets/pages/help-updates.html           |  2 +-
 src/assets/pages/resources-landing-page.html |  2 +-
 src/assets/pages/styles/theme-base.scss      | 93 +++++++++-----------
 src/assets/pages/styles/theme-dark.scss      |  4 +-
 src/assets/pages/styles/theme-light.scss     |  4 +-
 6 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/src/assets/pages/help-resources.html b/src/assets/pages/help-resources.html
index 59d7063..38798ad 100644
--- a/src/assets/pages/help-resources.html
+++ b/src/assets/pages/help-resources.html
@@ -7,6 +7,6 @@
         <p></p> 
         <p class="lead">When it comes to the Resource Center, resources are digital files, storage systems, software and websites that help you do your job.</p>
         <p></p>
-        <p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools available to them.</p>
+        <p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools that JDSfaulkner offers.</p>
     </div>
 </html>
\ No newline at end of file
diff --git a/src/assets/pages/help-updates.html b/src/assets/pages/help-updates.html
index f33c609..5e128a2 100644
--- a/src/assets/pages/help-updates.html
+++ b/src/assets/pages/help-updates.html
@@ -5,7 +5,7 @@
         <p></p>
         <p class="lead">Occasionally, you might see computer code moving across your screen for a few seconds after opening the Resource Center.</p>
         <p></p>
-        <p class="lead">What is going on? An <i>update</i>.</p>
+        <p class="lead">What is going on? Resource Center is making an <i>update</i>.</p>
         <p></p>
         <p class="lead">Developers send updates periodically to improve functionality. If you have a reliable internet connection, updates should occur quickly and automatically.</p>
     </div>
diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 09455f0..6dd25d1 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -46,7 +46,7 @@
 
                 <p class="feedback-instructions px-4 py-3">Would you like to send feedback or report an issue? Type your message and click "Submit."</p>
              
-                <div class="dropdown divider">
+                <div class="feedbackentry"><hr/>
 
                     <form class="px-4 py-3">
                         <div class="form-group">
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index f28fd45..f77f7ee 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -74,6 +74,25 @@ body {
   border-color: map-get($theme-colors, activeborderaccordion);
 }
 
+#theme-toggle {
+  btn-outline: map-get($theme-colors, themebuttonoutline);
+}
+
+#theme-toggle:hover {
+  btn: map-get($theme-colors, themebuttonfill) !important;
+  color: map-get($theme-colors, themebuttontext) !important;
+}
+
+#theme-toggle:focus {
+  btn: map-get($theme-colors, themebuttonfill) !important;
+  color: map-get($theme-colors, themebuttontext) !important;
+}
+
+#theme-toggle:active {
+  btn: map-get($theme-colors, themebuttonfill) !important;
+  color: map-get($theme-colors, themebuttontext) !important;
+}
+
 .searchTerm::-webkit-input-placeholder {
   color: map-get($theme-colors, searchhint) !important;
 }
@@ -186,19 +205,6 @@ body {
   color: map-get($theme-colors, feedbackmessagehint) !important;
 }
 
-.overlay-custom {
-  position: fixed; /* Sit on top of the page content */
-  width: 100%; /* Full width (cover the whole page) */
-  height: 100%; /* Full height (cover the whole page) */
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
-  z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
-  cursor: pointer; /* Add a pointer on hover */
-}
-
 .help-menu-item {
   color: map-get($theme-colors, helpmenudropdowntext) !important;
 }
@@ -220,31 +226,12 @@ body {
   color: map-get($theme-colors, footerbackfocus);
 }
 
-
-
-.sidebarsticky li a:hover {
-  color: map-get($theme-colors, activetextaccordion) !important; /* This is NOT working */
-}
-
-
-.sidebar-sticky {
-  color: map-get($theme-colors, yellow) !important; /* This is NOT working */
-}
-
-.sidebar .nav-link .feather {
-  margin-right: 4px;
-  color: blue; /* This is NOT working */
-}
-
-
-
-
 .sidebar {
-  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
+  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color inactive */
 }
 
 .sidebar:hover {
-  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
+  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color on hover */
 }
 
 .sidebar .nav-link.active {
@@ -267,26 +254,32 @@ body {
   background-color: map-get($theme-colors, sidebarbg);
 }
 
-
-
-
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: green;
+.overlay-custom {
+  position: fixed; /* Sit on top of the page content */
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
+  z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
+  cursor: pointer; /* Add a pointer on hover */
 }
 
-
-
-
-.chevron-img{}
-
 .overlay-content {
   position: fixed; /* Sit on top of the page content */
-  width: 400px; /* Full width (cover the whole page) */
-  height: 600px; /* Full height (cover the whole page) */
-  top: 5%;
-  right: 25%;
+  width: 50%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0%;
+  right: 0%;
   background-color: map-get($theme-colors, sidebarfill); /* Black background with opacity */
   cursor: pointer; /* Add a pointer on hover */
+}
+
+hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index a521198..7f6bef6 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -29,6 +29,8 @@ $theme-colors: (
         "paragraphtextcolor": #9d9d9d,
         "paragraphtextcolorhover":#d9d2d2,
         "themebuttonoutline": #808080,
+        "themebuttonfill": #c0c0c0,
+        "themebuttontext": #cdcdcd,
         "inactiveaccordion": #202023,
         "activeaccordion": #333337,
         "inactivetextaccordion": #787572,
@@ -42,7 +44,7 @@ $theme-colors: (
         "feedbacksubmitbutton": #0c218c,
         "feedbacksubmitbuttontext": #d9d2d2,
         "feedbackmessagefill": #3c3c42,
-        "feedbackmessageborder": #363434,
+        "feedbackmessageborder": #5b5b63,
         "feedbackmessagehint": #787572,
         "footerback": #787572,
         "footerbackfocus": #787572,
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 5e373c8..bc54379 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -28,7 +28,9 @@ $theme-colors: (
         "headertextcolorhover": #ffffff,
         "paragraphtextcolor": #080404,
         "paragraphtextcolorhover": #ffffff,
-        "themebuttonoutline": #3f4a5a,
+        "themebuttonoutline": #3f4959,
+        "themebuttonfill": #dcdcdc,
+        "themebuttontext": #fdfdfd,
         "inactiveaccordion": #efefef,
         "activeaccordion": #ffffff,
         "inactivetextaccordion": #3f4959,

From e907591269dee7c9a307b909eb39e0e49bff3723 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Mon, 7 Dec 2020 12:49:35 -0500
Subject: [PATCH 22/22] made the webcards the same height with buttons lined up
 along bottom, no matter the screen width

---
 src/assets/views/web-card.mustache | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/views/web-card.mustache b/src/assets/views/web-card.mustache
index 4357560..11ad99f 100644
--- a/src/assets/views/web-card.mustache
+++ b/src/assets/views/web-card.mustache
@@ -1,10 +1,10 @@
 <html lang="en">
-<div class="col-md-4 web-card" id="{{{id}}}">
-    <div class="card mb-4 shadow-sm web-card-background">
-        <div class="card-body  text-center">
+<div class="col-md-4 mb-4 web-card" id="{{{id}}}">
+    <div class="card mb-4 h-100 shadow-sm web-card-background">
+        <div class="card-body d-flex flex-column text-center">
             <h6 class="card-text text-header" style="text-align:center">{{title}}</h6>
             <p class="card-text text-paragraph text-align-left">{{description}} </p>
-            <div class="d-inline-block mx-auto justify-content-between align-items-center web-card-image-background">
+            <div class="d-inline-block mt-auto mx-auto justify-content-between align-items-center web-card-image-background">
                 <img id="collapse-image" class="rounded-circle mx-auto d-block img-fluid"
                      src="{{{imgPath}}}" alt="{{{altText}}}"
                      style="max-height:50px">