From 5588180dcd8a8606b3cbfa4bd839f5174d8bd477 Mon Sep 17 00:00:00 2001
From: Angus McLeod <angus@mcleod.org.au>
Date: Wed, 19 Aug 2020 14:41:20 +1000
Subject: [PATCH] Clean up: variable usage and style registration

---
 assets/stylesheets/common/wizard-admin.scss   |  4 +-
 assets/stylesheets/common/wizard-api.scss     |  2 +-
 assets/stylesheets/common/wizard-mapper.scss  |  2 +-
 .../wizard/custom/autocomplete.scss           | 13 +++--
 assets/stylesheets/wizard/custom/badges.scss  |  8 +--
 .../stylesheets/wizard/custom/composer.scss   | 14 +++---
 assets/stylesheets/wizard/custom/events.scss  | 50 +++++++++----------
 assets/stylesheets/wizard/custom/field.scss   | 12 ++---
 .../stylesheets/wizard/custom/locations.scss  | 10 ++--
 assets/stylesheets/wizard/custom/step.scss    | 14 +++---
 assets/stylesheets/wizard/custom/wizard.scss  | 26 +++++++---
 lib/custom_wizard/wizard.rb                   |  8 +++
 plugin.rb                                     | 10 +---
 13 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss
index 6d26e13b..99fa857e 100644
--- a/assets/stylesheets/common/wizard-admin.scss
+++ b/assets/stylesheets/common/wizard-admin.scss
@@ -344,7 +344,7 @@
   }
 
   .buttons .error {
-    color: $danger;
+    color: var(--danger);
 
     .fa {
       margin-right: 5px;
@@ -509,7 +509,7 @@
     top: 50%;
     width: 9999px;
     height: 1px;
-    background: $tertiary;
+    background: var(--tertiary);
   }
 
   > span:before {
diff --git a/assets/stylesheets/common/wizard-api.scss b/assets/stylesheets/common/wizard-api.scss
index 2bd437ca..c3e50e55 100644
--- a/assets/stylesheets/common/wizard-api.scss
+++ b/assets/stylesheets/common/wizard-api.scss
@@ -23,7 +23,7 @@
 
     .error {
       margin-top: 10px;
-      color: $danger;
+      color: var(--danger);
     }
   }
 }
diff --git a/assets/stylesheets/common/wizard-mapper.scss b/assets/stylesheets/common/wizard-mapper.scss
index 97f8b2aa..018fd419 100644
--- a/assets/stylesheets/common/wizard-mapper.scss
+++ b/assets/stylesheets/common/wizard-mapper.scss
@@ -128,7 +128,7 @@
     align-items: center;
     
     &.active {
-      color: $tertiary;
+      color: var(--tertiary);
       text-decoration: underline;
     }
     
diff --git a/assets/stylesheets/wizard/custom/autocomplete.scss b/assets/stylesheets/wizard/custom/autocomplete.scss
index 9cb7b913..5b2dca84 100644
--- a/assets/stylesheets/wizard/custom/autocomplete.scss
+++ b/assets/stylesheets/wizard/custom/autocomplete.scss
@@ -2,8 +2,8 @@ div.ac-wrap {
   overflow: visible;
   max-height: 150px;
   min-height: 34px;
-  background-color: $secondary;
-  border: 1px solid $primary-medium;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
   padding: 5px 4px 1px 4px;
 
   div.item {
@@ -88,13 +88,16 @@ img.avatar {
         
         span.username {
           color: var(--primary);
+          vertical-align: middle;
         }
         span.name {
           font-size: $font-down-1;
           vertical-align: middle;
+          margin-left: 5px;
+          color: var(--primary);
         }
         &.selected {
-          background-color: var(--tertiary-low);
+          background-color: var(--tertiary);
         }
         &:hover {
           background-color: var(--highlight-low);
@@ -145,11 +148,11 @@ img.avatar {
 
 .ac-form-result {
   cursor: pointer;
-  background-color: $secondary;
+  background-color: var(--secondary);
   display: flex;
 
   &:hover, &.selected {
-    background-color: $tertiary;
+    background-color: var(--tertiary);
     color: white;
 
     label {
diff --git a/assets/stylesheets/wizard/custom/badges.scss b/assets/stylesheets/wizard/custom/badges.scss
index 438f58d9..966f5538 100644
--- a/assets/stylesheets/wizard/custom/badges.scss
+++ b/assets/stylesheets/wizard/custom/badges.scss
@@ -24,7 +24,7 @@
   &.bullet {
     margin-right: 12px;
     span.badge-category {
-      color: $primary-high;
+      color: var(--primary-high);
       overflow: hidden;
       text-overflow: ellipsis;
       .extra-info-wrapper & {
@@ -47,7 +47,7 @@
       }
     }
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
@@ -91,7 +91,7 @@
     margin-right: 5px;
 
     span.badge-category {
-      color: $primary-high;
+      color: var(--primary-high);
       padding: 1px 3px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -113,7 +113,7 @@
   }
 
   &.none {
-    color: $primary-high;
+    color: var(--primary-high);
     margin-right: 5px;
   }
 }
\ No newline at end of file
diff --git a/assets/stylesheets/wizard/custom/composer.scss b/assets/stylesheets/wizard/custom/composer.scss
index 6575d886..ee3eb2b1 100644
--- a/assets/stylesheets/wizard/custom/composer.scss
+++ b/assets/stylesheets/wizard/custom/composer.scss
@@ -25,8 +25,8 @@
 .d-editor .d-editor-modal {
   min-width: 400px;
   position: absolute;
-  background-color: $secondary;
-  border: 1px solid $primary;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary);
   padding: 1em;
   top: 25px;
 
@@ -52,8 +52,8 @@
 
 .d-editor-textarea-wrapper,
 .d-editor-preview-wrapper {
-  background-color: $secondary;
-  border: 1px solid $primary-low;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
   flex: 1;
 }
 
@@ -82,7 +82,7 @@
 
   button {
     background-color: transparent;
-    color: $primary;
+    color: var(--primary);
   }
 
   .btn:not(.no-text) {
@@ -102,7 +102,7 @@
   width: 1px;
   height: 20px;
   margin: 0 5px;
-  background-color: $primary;
+  background-color: var(--primary);
   display: inline-block;
 }
 
@@ -149,7 +149,7 @@
 
 .composing-whisper .d-editor-preview {
   font-style: italic;
-  color: $primary !important;
+  color: var(--primary) !important;
 }
 
 .d-editor-preview > *:first-child {
diff --git a/assets/stylesheets/wizard/custom/events.scss b/assets/stylesheets/wizard/custom/events.scss
index 88f7dd97..01a724dd 100644
--- a/assets/stylesheets/wizard/custom/events.scss
+++ b/assets/stylesheets/wizard/custom/events.scss
@@ -79,7 +79,7 @@
       
       &.disabled {
         span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button {
-          color: $primary-low;
+          color: var(--primary-low);
           background-image: initial;
           background: initial;
           box-shadow: initial;
@@ -88,7 +88,7 @@
         }
         
         input, .pika-lendar {
-          border: 1px solid $primary-low !important;
+          border: 1px solid var(--primary-low) !important;
         }
       }
     }
@@ -127,8 +127,8 @@
         padding: 4px 10px;
         font-size: 1em;
         line-height: 1;
-        color: $primary;
-        border: 1px solid $primary-medium;
+        color: var(--primary);
+        border: 1px solid var(--primary-medium);
         min-height: 30px;
         width: 130px;
         margin: 10px 0;
@@ -151,7 +151,7 @@
       z-index: 100;
 
       .pika-lendar {
-        border: 1px solid $primary-medium;
+        border: 1px solid var(--primary-medium);
         padding: 14px;
         margin: 0;
         float: none;
@@ -190,24 +190,24 @@
 // Variables are namespaced with the pd (pikaday) prefix
 
 // Colours
-$pd-text-color: $primary !default;
-$pd-title-color: $primary !default;
-$pd-title-bg: $secondary !default;
-$pd-picker-bg: $secondary !default;
-$pd-picker-border: $primary-low !default;
-$pd-picker-border-bottom: $primary-low !default;
+$pd-text-color: var(--primary) !default;
+$pd-title-color: var(--primary) !default;
+$pd-title-bg: var(--secondary) !default;
+$pd-picker-bg: var(--secondary) !default;
+$pd-picker-border: var(--primary-low) !default;
+$pd-picker-border-bottom: var(--primary-low) !default;
 $pd-picker-shadow: rgba(0,0,0,.5) !default;
-$pd-th-color: $primary !default;
-$pd-day-color: $primary !default;
-$pd-day-bg: $secondary !default;
-$pd-day-hover-color: $primary !default;
-$pd-day-hover-bg: $tertiary-low !default;
-$pd-day-today-color: $tertiary !default;
-$pd-day-selected-color: $secondary !default;
-$pd-day-selected-bg: $tertiary !default;
-$pd-day-selected-shadow: $tertiary-low !default;
-$pd-day-disabled-color: $primary !default;
-$pd-week-color: $primary !default;
+$pd-th-color: var(--primary) !default;
+$pd-day-color: var(--primary) !default;
+$pd-day-bg: var(--secondary) !default;
+$pd-day-hover-color: var(--primary) !default;
+$pd-day-hover-bg: var(--tertiary-low) !default;
+$pd-day-today-color: var(--tertiary) !default;
+$pd-day-selected-color: var(--secondary) !default;
+$pd-day-selected-bg: var(--tertiary) !default;
+$pd-day-selected-shadow: var(--tertiary-low) !default;
+$pd-day-disabled-color: var(--primary) !default;
+$pd-week-color: var(--primary) !default;
 
 // Font
 $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
@@ -410,15 +410,15 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 }
 
 .is-startrange .pika-button {
-    color: $secondary;
+    color: var(--secondary);
     background: #6CB31D;
     box-shadow: none;
     border-radius: 3px;
 }
 
 .is-endrange .pika-button {
-    color: $secondary;
-    background: $tertiary;
+    color: var(--secondary);
+    background: var(--tertiary);
     box-shadow: none;
     border-radius: 3px;
 }
diff --git a/assets/stylesheets/wizard/custom/field.scss b/assets/stylesheets/wizard/custom/field.scss
index 4a78da3b..663d8508 100644
--- a/assets/stylesheets/wizard/custom/field.scss
+++ b/assets/stylesheets/wizard/custom/field.scss
@@ -17,7 +17,7 @@
 
     .field-description {
       flex: 1;
-      color: $primary;
+      color: var(--primary);
       margin-top: 0;
 
       p {
@@ -35,7 +35,7 @@
     &.invalid {
       textarea, input[type=text], input[type=checkbox], .select-kit {
         padding: 3px;
-        border: 4px solid $danger;
+        border: 4px solid var(--danger);
       }
     }
   }
@@ -75,12 +75,6 @@
   .wizard-step-form .wizard-btn {
     display: block;
     margin: 20px 0;
-    color: var(--primary);
-    background: var(--primary-low);
-    
-    &.primary {
-      background: $tertiary;
-    }
   }
 
   .wizard-image-row {
@@ -130,7 +124,7 @@
   input.date-picker {
     font-size: 1.1487em;
     padding: 6px;
-    border: 1px solid $primary;
+    border: 1px solid var(--primary);
     transition: border-color 0.5s;
   }
 
diff --git a/assets/stylesheets/wizard/custom/locations.scss b/assets/stylesheets/wizard/custom/locations.scss
index d3952ae5..ec46185f 100644
--- a/assets/stylesheets/wizard/custom/locations.scss
+++ b/assets/stylesheets/wizard/custom/locations.scss
@@ -46,7 +46,7 @@
   }
 
   .address + .coordinates {
-    border-left: 1px solid $primary-low;
+    border-left: 1px solid var(--primary-low);
     padding-left: 20px;
   }
   
@@ -74,7 +74,7 @@
 
 input.input-location, div.input-location {
   max-height: 150px;
-  background-color: $secondary;
+  background-color: var(--secondary);
   box-shadow: none;
   box-sizing: border-box;
   margin: 0;
@@ -125,11 +125,11 @@ input.input-location, div.input-location {
 
 .location-form-result {
   cursor: pointer;
-  background-color: $secondary;
+  background-color: var(--secondary);
   display: flex;
 
   &:hover, &.selected {
-    background-color: $tertiary;
+    background-color: var(--tertiary);
     color: white;
 
     label {
@@ -159,7 +159,7 @@ input.input-location, div.input-location {
   }
 
   ul {
-    background-color: dark-light-diff($primary, $secondary, 97%, -65%);
+    background-color: var(--primary-very-low);
     border: 1px solid #e9e9e9;
     margin: 0;
     padding: 0;
diff --git a/assets/stylesheets/wizard/custom/step.scss b/assets/stylesheets/wizard/custom/step.scss
index e20e5b5e..40c97c97 100644
--- a/assets/stylesheets/wizard/custom/step.scss
+++ b/assets/stylesheets/wizard/custom/step.scss
@@ -113,7 +113,7 @@
   
   .wizard-progress {
     .screen {
-      background-color: $tertiary;
+      background-color: var(--tertiary);
     }
   }
 
@@ -124,18 +124,18 @@
     padding: 20px;
 
     &.success {
-      background-color: $success;
-      color: $secondary;
+      background-color: var(--success);
+      color: var(--secondary);
     }
 
     &.error {
-      background-color: $danger;
-      color: $secondary;
+      background-color: var(--danger);
+      color: var(--secondary);
     }
 
     &.not-permitted {
-      background-color: $danger;
-      color: $secondary;
+      background-color: var(--danger);
+      color: var(--secondary);
     }
     
     .text {
diff --git a/assets/stylesheets/wizard/custom/wizard.scss b/assets/stylesheets/wizard/custom/wizard.scss
index c9a8f7c6..683c4ef9 100644
--- a/assets/stylesheets/wizard/custom/wizard.scss
+++ b/assets/stylesheets/wizard/custom/wizard.scss
@@ -1,10 +1,10 @@
 .custom-wizard {
-  background-color: $secondary;
-  color: $primary;
+  background-color: var(--secondary);
+  color: var(--primary);
   font-size: 1.1em;
   
   .wizard-column {
-    background-color: $secondary;
+    background-color: var(--secondary);
     
     .wizard-field .input-area {
       margin: 0.5em 0;
@@ -15,7 +15,7 @@
     }
     
     .wizard-footer {
-      background-color: $secondary;
+      background-color: var(--secondary);
     }
   }
   
@@ -28,14 +28,26 @@
     margin-right: 10px;
   }
   
+  .wizard-column .wizard-btn {
+    color: var(--primary);
+    background: var(--primary-low);
+    cursor: pointer;
+    
+    &.primary,
+    &.next {
+      color: var(--secondary);
+      background: var(--tertiary);
+    }
+  }
+  
   .wizard-column .wizard-step-footer button.wizard-btn.done,
   .wizard-column .wizard-step-footer button.wizard-btn.finish {
-    color: $primary;
-    background-color: $success;
+    color: var(--secondary);
+    background-color: var(--success);
   }
   
   .wizard-column .action-link {
-    color: $tertiary;
+    color: var(--tertiary);
   }
 }
 
diff --git a/lib/custom_wizard/wizard.rb b/lib/custom_wizard/wizard.rb
index 80d8726e..04308a7f 100644
--- a/lib/custom_wizard/wizard.rb
+++ b/lib/custom_wizard/wizard.rb
@@ -364,4 +364,12 @@ class CustomWizard::Wizard
       false
     end
   end
+  
+  def self.register_styles
+    full_path = "#{Rails.root}/plugins/discourse-custom-wizard/assets/stylesheets/wizard/wizard_custom.scss"
+    DiscoursePluginRegistry.register_asset(full_path, {}, "wizard_custom")
+    Stylesheet::Importer.register_import("wizard_custom") do
+      import_files(DiscoursePluginRegistry.stylesheets["wizard_custom"])
+    end
+  end
 end
diff --git a/plugin.rb b/plugin.rb
index d09c6b0e..8125a79a 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -88,14 +88,6 @@ after_initialize do
     load File.expand_path(path, __FILE__)
   end
   
-  reloadable_patch do
-    full_path = File.dirname(@path) << "/assets/stylesheets/wizard/wizard_custom.scss"
-    DiscoursePluginRegistry.register_asset(full_path, {}, "wizard_custom")
-    Stylesheet::Importer.register_import("wizard_custom") do
-      import_files(DiscoursePluginRegistry.stylesheets["wizard_custom"])
-    end
-  end
-  
   add_class_method(:wizard, :user_requires_completion?) do |user|
     wizard_result = self.new(user).requires_completion?
     return wizard_result if wizard_result
@@ -172,5 +164,7 @@ after_initialize do
   ::Wizard::Field.prepend CustomWizardFieldExtension
   ::Wizard::Step.prepend CustomWizardStepExtension
   
+  CustomWizard::Wizard.register_styles
+  
   DiscourseEvent.trigger(:custom_wizard_ready)
 end