From f2e51779e422527dd6e61e6037f906aff65a91d6 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sat, 2 Oct 2021 23:15:35 +0100
Subject: [PATCH] Improve themeing of tourGuide

---
 .../editor-client/src/js/ui/tour/tourGuide.js   |  3 ++-
 .../editor-client/src/sass/colors.scss          |  5 ++---
 .../editor-client/src/sass/tourGuide.scss       | 17 ++++++++---------
 .../editor-client/src/sass/variables.scss       |  3 +++
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js
index e6933f01c..11f82782e 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js
@@ -285,9 +285,10 @@ RED.tourGuide = (function() {
                     $('<span></span>').text(RED._("common.label.close")).appendTo(nextButton);
                 } else if (state.index === 0) {
                     $('<span>start</span>').text(RED._("tourGuide.start")).appendTo(nextButton);
+                    $('<span style="margin-left: 6px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
                 } else if (state.index < state.count-1) {
                     $('<span></span>').text(RED._("tourGuide.next")).appendTo(nextButton);
-                    $('<span style="margin-left: 4px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
+                    $('<span style="margin-left: 6px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
                 }
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index eb0582ba1..930b2d2d4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -295,9 +295,8 @@ $group-default-stroke: #999;
 $group-default-stroke-opacity: 1;
 $group-default-label-color: #a4a4a4;
 
-$tourGuide-shade: $shade-color;
-$tourGuide-border: #a22222;
-$tourGuide-heading-color: #a22222;
+$tourGuide-border: #c56c6c;
+$tourGuide-heading-color: #c56c6c;
 
 // Deprecated
 $text-color-green: $text-color-success;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss
index 53c920222..d33d8d385 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss
@@ -16,7 +16,7 @@
     z-index: 2001;
     transform: translate(-50%, -50%);
     border-radius: 50%;
-    border: 2px solid $tourGuide-border;
+    border: 2px solid var(--red-ui-tourGuide-border);
 
     &.transition {
         transition: 0.4s ease;
@@ -33,7 +33,7 @@
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        border: solid 6000px $tourGuide-shade;
+        border: solid 6000px var(--red-ui-shade-color);
         margin-left: -6000px;
         margin-top: -6000px;
         pointer-events: none;
@@ -41,15 +41,15 @@
 }
 .red-ui-popover.red-ui-tourGuide-popover {
     z-index: 2003;
-    --red-ui-popover-background: #{$secondary-background};
-    --red-ui-popover-border: #{$tourGuide-border};
-    --red-ui-popover-color: #{$primary-text-color};
+    --red-ui-popover-background: var(--red-ui-secondary-background);
+    --red-ui-popover-border: var(--red-ui-tourGuide-border);
+    --red-ui-popover-color: var(--red-ui-primary-text-color);
 
     .red-ui-popover-content {
         h2 {
             text-align: center;
             margin-top: 0px;
-            color: #a22222;
+            color: var(--red-ui-tourGuide-heading-color);
             i.fa {
                 font-size: 1.5em
             }
@@ -90,9 +90,8 @@
 }
 .red-ui-popover.red-ui-tourGuide-popover button.red-ui-button {
     &:not(.primary) {
-        border-color: transparent;
-        background: $secondary-background;
-        color: $primary-text-color !important;
+        background: var(--red-ui-secondary-background);
+        color: var(--red-ui-primary-text-color) !important;
     }
     &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
         border-color: $popover-button-border-color-hover;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
index 1ddf08411..aadc2231e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
@@ -92,4 +92,7 @@
     --red-ui-popover-border: #{$popover-border};
     --red-ui-popover-color: #{$popover-color};
 
+    --red-ui-tourGuide-border: #{$tourGuide-border};
+    --red-ui-tourGuide-heading-color: #{$tourGuide-heading-color};
+
 }