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() {
$('').text(RED._("common.label.close")).appendTo(nextButton);
} else if (state.index === 0) {
$('start').text(RED._("tourGuide.start")).appendTo(nextButton);
+ $('').appendTo(nextButton);
} else if (state.index < state.count-1) {
$('').text(RED._("tourGuide.next")).appendTo(nextButton);
- $('').appendTo(nextButton);
+ $('').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};
+
}