UX: Add support button to admin-nav (#118)

* Add support button to admin-nav

* FIX: Security vulnerabilities with _blank anchor link

* Update pro support url

* UX: Create pro button custom styling

* UX: Merge support button focus styling with hover

* DEV: Move pro support url to setting

* UX: Change support button name to Pro Support

* DEV: Format stylesheet code

* DEV: Use variables and change selector specificity for pro button

* DEV: Hardcode pro-support url in button

* DEV: Remove support url localization

* DEV: Undo formatting fixes and add pro support button strings

* DEV: Undo formatting fixes auto applied

* DEV: Add space between selectors

* DEV: Convert scss variables to CSS Custom properties

* DEV: Fix linting

* FIX: Use SCSS variables for color manipulation functions

* DEV: Fix space before i18n

* DEV: Add new line at end of file

* DEV: Add new line at end of file

* DEV: Remove name attribute in localizations

* DEV: Remove padding from new line

assets/javascripts/discourse/templates/admin-wizards.hbs

@@ -7,6 +7,10 @@
   {{/if}}
   {{nav-item route="adminWizardsLogs" label="admin.wizard.log.nav_label"}}
   {{nav-item route="adminWizardsManager" label="admin.wizard.manager.nav_label"}}
+
+  <div class="admin-actions">
+    <a target="_blank" class="btn btn-pavilion-pro" rel="noreferrer noopener" href="https://thepavilion.io/w/support" title={{i18n "admin.wizard.pro_support_button.title"}}>{{d-icon "far-life-ring"}}{{i18n "admin.wizard.pro_support_button.label"}}</a>
+  </div>
 {{/admin-nav}}
 
 <div class="admin-container">

assets/stylesheets/common/wizard-admin.scss

@@ -2,6 +2,7 @@
 @import "wizard-manager";
 @import "wizard-api";
 @import "common/components/buttons";
+@import "wizard-variables";
 
 .admin-wizard-controls {
   display: flex;
@@ -715,3 +716,22 @@
   width: 80px;
   vertical-align: middle;
 }
+
+.btn.btn-pavilion-pro {
+  background: var(--pavilion-primary);
+  color: var(--pavilion-secondary);
+
+  .d-icon {
+    color: var(--pavilion-secondary);
+  }
+
+  &:hover,
+  &:focus {
+    background: darken($pavilionPrimary, 5%);
+
+    &[href],
+    svg.d-icon {
+      color: darken($pavilionSecondary, 10%);
+    }
+  }
+}

assets/stylesheets/common/wizard-variables.scss

@@ -0,0 +1,7 @@
+$pavilionPrimary: #3c1c8c;
+$pavilionSecondary: #ffffff;
+
+:root {
+  --pavilion-primary: #3c1c8c;
+  --pavilion-secondary: #ffffff;
+}

config/locales/client.en.yml

@@ -58,6 +58,9 @@ en:
         select_type: "Select a type"
         condition: "Condition"
         index: "Index"
+        pro_support_button:
+          title: "Request Pro Support"
+          label: "Pro Support"
         
         message:
           wizard:

plugin.rb

@@ -33,6 +33,7 @@ if respond_to?(:register_svg_icon)
   register_svg_icon "chevron-right"
   register_svg_icon "chevron-left"
   register_svg_icon "save"
+  register_svg_icon "far-life-ring"
 end
 
 class ::Sprockets::DirectiveProcessor