From f2e51779e422527dd6e61e6037f906aff65a91d6 Mon Sep 17 00:00:00 2001 From: Nick O'Leary 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() { $('').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}; + }