From 6661c222c0de35c04aa99d7db59b8a54172016ce Mon Sep 17 00:00:00 2001
From: checktheroads <mtt.lov@gmail.com>
Date: Fri, 23 Aug 2019 12:10:28 -0700
Subject: [PATCH] add secondary color, fix footer bugs [skip ci]

---
 hyperglass/render/templates/footer.html.j2 |  6 +++---
 hyperglass/render/templates/theme.sass.j2  |  9 +++++----
 hyperglass/static/hyperglass.es6           | 20 ++++++++++++++++----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/hyperglass/render/templates/footer.html.j2 b/hyperglass/render/templates/footer.html.j2
index 64fe887..44bb95c 100644
--- a/hyperglass/render/templates/footer.html.j2
+++ b/hyperglass/render/templates/footer.html.j2
@@ -3,12 +3,12 @@
   <div class="container-fluid row no-gutters text-center p-0">
     <div class="col-auto float-left">
       <div class="d-none" id="hg-footer-terms-html">{{ details.footer.content | safe }}</div>
-      <a class="btn btn-link hg-footer-item" id="hg-footer-terms-btn" href="#" data-toggle="popover" tabindex="0"
+      <a class="btn btn-link" id="hg-footer-terms-btn" href="#" data-toggle="popover" tabindex="0" role="button"
         title="{{ branding.text.terms }}"><small>{{ branding.text.terms }}</small></a>
     </div>
     <div class="col-auto float-left">
       <div class="d-none" id="hg-footer-help-html">{{ rendered_help.content | safe }}</div>
-      <a class="btn btn-link hg-footer-item" id="hg-footer-help-btn" href="#" data-toggle="popover" tabindex="0"
+      <a class="btn btn-link" id="hg-footer-help-btn" href="#" data-toggle="popover" tabindex="0" role="button"
         title="{{ branding.text.info }}"><small>{{ branding.text.info }}</small></a>
     </div>
     <div class="col-auto mr-auto"></div>
@@ -21,7 +21,7 @@
         Source code licensed <a href="https://github.com/checktheroads/hyperglass/blob/master/LICENSE"
           target="_blank">BSD 3-Clause Clear.</a>
       </div>
-      <a class="btn btn-link" id="hg-footer-credit-btn" href="#" data-toggle="popover" tabindex="0"><small><i
+      <a class="btn btn-link" id="hg-footer-credit-btn" href="#" data-toggle="popover" tabindex="0" role="button"><small><i
             class="remixicon-code-s-slash-line"></i></small></a>
     </div>
     {% endif %}
diff --git a/hyperglass/render/templates/theme.sass.j2 b/hyperglass/render/templates/theme.sass.j2
index 5d08d6c..4aeb1c1 100644
--- a/hyperglass/render/templates/theme.sass.j2
+++ b/hyperglass/render/templates/theme.sass.j2
@@ -1,10 +1,11 @@
 // Jinja2-rendered theme elements
 $hg-primary: {{ colors.primary }}
-$hg-background: {{ colors.background }}
-$hg-light: {{ colors.light }}
-$hg-dark: {{ colors.dark }}
+$hg-secondary: {{ colors.secondary }}
 $hg-danger: {{ colors.danger }}
 $hg-warning: {{ colors.warning }}
+$hg-light: {{ colors.light }}
+$hg-dark: {{ colors.dark }}
+$hg-background: {{ colors.background }}
 
 // Functions
 @function findTextColor($color)
@@ -44,7 +45,7 @@ $enable-responsive-font-sizes: true
 
 $enable-validation-icons: false
 
-$theme-colors: ("primary": $hg-primary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading, "footer": $hg-footer)
+$theme-colors: ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading, "footer": $hg-footer)
 
 $body-bg: $hg-background
 
diff --git a/hyperglass/static/hyperglass.es6 b/hyperglass/static/hyperglass.es6
index d95f3db..2ac0a64 100644
--- a/hyperglass/static/hyperglass.es6
+++ b/hyperglass/static/hyperglass.es6
@@ -87,27 +87,39 @@ queryType.selectpicker({
 
 footerTermsBtn.popover({
   html: true,
-  trigger: 'focus click',
+  trigger: 'manual',
   template: footerPopoverTemplate,
   placement: 'top',
   content: $('#hg-footer-terms-html').html(),
+}).on('click', (e) => {
+  $(e.currentTarget).popover('toggle');
+}).on('focusout', (e) => {
+  $(e.currentTarget).popover('hide');
 });
 
 footerHelpBtn.popover({
   html: true,
-  trigger: 'focus click',
+  trigger: 'manual',
   placement: 'top',
   template: footerPopoverTemplate,
   content: $('#hg-footer-help-html').html(),
+}).on('click', (e) => {
+  $(e.currentTarget).popover('toggle');
+}).on('focusout', (e) => {
+  $(e.currentTarget).popover('hide');
 });
 
 footerCreditBtn.popover({
   html: true,
-  trigger: 'focus click',
+  trigger: 'manual',
   placement: 'top',
   title: $('#hg-footer-credit-title').html(),
   content: $('#hg-footer-credit-content').html(),
   template: footerPopoverTemplate,
+}).on('click', (e) => {
+  $(e.currentTarget).popover('toggle');
+}).on('focusout', (e) => {
+  $(e.currentTarget).popover('hide');
 });
 
 $(document).ready(() => {
@@ -124,7 +136,7 @@ $(document).ready(() => {
   formContainer.animsition('in');
 });
 
-const supportedBtn = qt => `<button class="btn btn-dark hg-info-btn" id="hg-info-btn-${qt}" data-hg-type="${qt}" type="button"><div id="hg-info-icon-${qt}"><i class="remixicon-information-line"></i></div></button>`;
+const supportedBtn = qt => `<button class="btn btn-secondary hg-info-btn" id="hg-info-btn-${qt}" data-hg-type="${qt}" type="button"><div id="hg-info-icon-${qt}"><i class="remixicon-information-line"></i></div></button>`;
 
 queryType.on('changed.bs.select', () => {
   const queryTypeId = queryType.val();