From e0c1330c4a54304a459592c04be8e24314b208fe Mon Sep 17 00:00:00 2001
From: steadyjaw <36079537+steadyjaw@users.noreply.github.com>
Date: Sat, 8 Jan 2022 00:44:46 +0100
Subject: [PATCH 1/2] Fix: control panel cross style (#524)

* fix: input rules and move message text to locales
* fix: omit duplicate entries in comboxes
* fix: add key to button group

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/panels/ControlPanelCrossControl.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/ControlPanelCrossControl.vue b/src/components/panels/ControlPanelCrossControl.vue
index 1192b8edf..37759569e 100644
--- a/src/components/panels/ControlPanelCrossControl.vue
+++ b/src/components/panels/ControlPanelCrossControl.vue
@@ -153,9 +153,9 @@
         </v-row>
         <v-row no-gutters class="mt-3">
             <v-col class="col-12">
-                <v-btn-toggle v-if="stepsReversed.length > 0" dense no-gutters style="flex-wrap: nowrap; width: 100%;" v-model="selectedCrossStep">
-                    <v-btn dense class="btnMinWidthAuto flex-grow-1 px-0" v-for="steps of stepsReversed" :key="'all-'+steps">
-                        <span class="body-2">{{ steps }}</span>
+                <v-btn-toggle v-if="stepsReversed.length > 0" dense no-gutters style="flex-wrap: nowrap; width: 100%;" v-model="selectedCrossStep" :key="'all-steps-'+stepsReversed.join('_')">
+                    <v-btn dense class="btnMinWidthAuto flex-grow-1 px-0" v-for="step of stepsReversed" :key="'step-'+step">
+                        <span class="body-2">{{ step }}</span>
                     </v-btn>
                 </v-btn-toggle>
                 <div class="font-weight-bold warning rounded pa-2" v-else>

From 4ac9b567755be1045c8150b137499ea5016861e8 Mon Sep 17 00:00:00 2001
From: steadyjaw <36079537+steadyjaw@users.noreply.github.com>
Date: Sat, 8 Jan 2022 00:45:04 +0100
Subject: [PATCH 2/2] refactor: change default colors (#523)

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/gcodeviewer/Viewer.vue |  7 ++++---
 src/store/gui/index.ts                | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue
index 388f8f033..76ffbcae7 100644
--- a/src/components/gcodeviewer/Viewer.vue
+++ b/src/components/gcodeviewer/Viewer.vue
@@ -327,7 +327,8 @@ export default class Viewer extends Mixins(BaseMixin) {
     viewerInit(element: HTMLCanvasElement) {
         viewer = new GCodeViewer(element)
         viewer.init()
-        viewer.setBackgroundColor('#121212')
+        viewer.setBackgroundColor(this.backgroundColor)
+        viewer.bed.setBedColor(this.gridColor)
         viewer.setCursorVisiblity(this.showCursor)
         viewer.setZClipPlane(1000000, -1000000)
         viewer.axes.show(this.showAxes)
@@ -753,7 +754,7 @@ export default class Viewer extends Mixins(BaseMixin) {
     }
 
     get backgroundColor() {
-        return this.$store.state.gui.gcodeViewer?.backgroundColor ?? '#000000'
+        return this.$store.state.gui.gcodeViewer?.backgroundColor ?? '#121212'
     }
 
     @Watch('backgroundColor')
@@ -763,7 +764,7 @@ export default class Viewer extends Mixins(BaseMixin) {
     }
 
     get gridColor() {
-        return this.$store.state.gui.gcodeViewer?.gridColor ?? '#000000'
+        return this.$store.state.gui.gcodeViewer?.gridColor ?? '#B3B3B3'
     }
 
     @Watch('gridColor')
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 1517a92ad..4113c9693 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -101,16 +101,16 @@ export const getDefaultState = (): GuiState => {
             confirmUnsavedChanges: true
         },
         gcodeViewer: {
-            extruderColors : ['#00FFFFFF','#FF00FFFF','#FFFF00FF','#000000FF','#FFFFFFFF'],
-            gridColor : '#0000FF',
-            backgroundColor : '#000000',
+            extruderColors : ['#E76F51FF','#F4A261FF','#E9C46AFF','#2A9D8FFF','#264653FF'],
+            gridColor : '#B3B3B3',
+            backgroundColor : '#121212',
             colorMode : 2,
             showAxes : true,
             minFeed : 20,
             maxFeed : 100,
-            minFeedColor : '#0000FF',
-            maxFeedColor : '#FF0000',
-            progressColor : '#FFFFFF',
+            minFeedColor : '#2196f3',
+            maxFeedColor : '#D41216',
+            progressColor : '#FFFFFFB2',
             showCursor: true,
             showTravelMoves: false,
             showObjectSelection: false,