From 469986644fd4d9dbccbd83ea4346ea17208d3153 Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 01:52:21 -0800
Subject: [PATCH 1/9] Hide Unused Layers

Hides the selectors for the layers that are unused in the current keymap.
---
 src/scss/style.scss | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 919d6b496c..231749c137 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -411,16 +411,14 @@ button {
 }
 
 .layers {
-  column-count: 2;
-  padding-left: 10px;
-  padding-right: 9px;
+  padding: 0 10px;
   // background: #fff;
 }
 
 .layer {
-  width: 25px;
-  height: 25px;
-  border-radius: 25px;
+  width: 39px;
+  height: 17px;
+  border-radius: 4px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -430,7 +428,7 @@ button {
   align-items: center;
   line-height: 80%;
   font-size: 80%;
-  margin-bottom: 10px;
+  margin-bottom: 2px;
   // background: #fff;
   // color: #ccc;
 }
@@ -454,6 +452,10 @@ button {
 //   color: #fff;
 // }
 
+.layer:not(.non-empty) {
+  display: none;
+}
+
 .split-content::after {
   content: ' ';
   display: block;

From 3fd52afc96e9b5d3d452a783f46945e2368d7ffb Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 12:36:32 -0800
Subject: [PATCH 2/9] UI updates

Add the Add Layer button.
---
 src/components/LayerControl.vue | 11 ++++++++++-
 src/i18n/en.csv                 |  1 +
 src/main.js                     |  2 ++
 src/scss/style.scss             |  2 +-
 src/scss/themes.scss            |  2 +-
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue
index 3df39c4dc2..dc7e5eea30 100644
--- a/src/components/LayerControl.vue
+++ b/src/components/LayerControl.vue
@@ -3,6 +3,9 @@
     <p>
       <label>{{ $t('layer.label') }}:</label>
     </p>
+    <button class="add-button" :title="$t('layer.add')" @click="addLayer">
+      <font-awesome-icon icon="plus" size="lg" fixed-width />
+    </button>
     <div class="layers">
       <!-- prettier-ignore -->
       <div
@@ -63,12 +66,18 @@ export default {
         this.initLayer(this.layer);
         this.$store.commit('keymap/setDirty');
       }
+    },
+    addLayer() {
+      console.log( this.$store.state.keymap.length );
+      console.log( this.$store.getters['keymap/keymap'] );
+      //this.$store.state.keymap.push({})
+      //this.$store.commit('keymap/setDirty');
     }
   }
 };
 </script>
 <style>
-.clear-button {
+.clear-button, .add-button {
   line-height: 100%;
   margin: 0;
   border-radius: 3px;
diff --git a/src/i18n/en.csv b/src/i18n/en.csv
index eab113cb62..242af0f569 100644
--- a/src/i18n/en.csv
+++ b/src/i18n/en.csv
@@ -49,6 +49,7 @@ keymapName:label,Keymap Name
 keymapName:placeholder,custom keymap name
 layer:confirm,Are you sure you want to clear layer?
 layer:label,Layer
+layer:add,Add Layer
 layer:title,Clear Layer
 layout:label,layout
 loadDefault:label,Load Default
diff --git a/src/main.js b/src/main.js
index 86814eb4e2..5c90df354b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,6 +37,7 @@ import {
   faPrint,
   faUndo,
   faTrash,
+  faPlus,
   faHatWizard,
   faMagic,
   faStar,
@@ -84,6 +85,7 @@ library.add(faChevronRight);
 library.add(faPrint);
 library.add(faUndo);
 library.add(faTrash);
+library.add(faPlus);
 library.add(faHatWizard);
 library.add(faMagic);
 library.add(faChevronUp);
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 231749c137..77c01ad665 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -428,7 +428,7 @@ button {
   align-items: center;
   line-height: 80%;
   font-size: 80%;
-  margin-bottom: 2px;
+  margin: 2px;
   // background: #fff;
   // color: #ccc;
 }
diff --git a/src/scss/themes.scss b/src/scss/themes.scss
index c82d1efe44..49833dcd05 100644
--- a/src/scss/themes.scss
+++ b/src/scss/themes.scss
@@ -79,7 +79,7 @@ html {
       background: #4b0082;
       color: #ffa500;
     }
-    .clear-button {
+    .clear-button, .add-button {
       background-color: #49ad4c;
       color: #fff;
       border-color: #000;

From abb16f2442382ab806d5507eb557e2c6a11eb6e9 Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 12:40:08 -0800
Subject: [PATCH 3/9] rename layer.title to layer.clear

Makes more sense.
---
 src/components/LayerControl.vue | 2 +-
 src/i18n/de.csv                 | 2 +-
 src/i18n/en.csv                 | 2 +-
 src/i18n/es.csv                 | 2 +-
 src/i18n/fr.csv                 | 2 +-
 src/i18n/it.csv                 | 2 +-
 src/i18n/ja.csv                 | 2 +-
 src/i18n/ms.csv                 | 2 +-
 src/i18n/pl-PL.csv              | 2 +-
 src/i18n/pt-BR.csv              | 2 +-
 src/i18n/ru.csv                 | 2 +-
 src/i18n/zh.csv                 | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue
index dc7e5eea30..cdb676be1c 100644
--- a/src/components/LayerControl.vue
+++ b/src/components/LayerControl.vue
@@ -16,7 +16,7 @@
         @click="clicked(layer.id)"
       >{{ layer.name }}</div>
     </div>
-    <button class="clear-button" :title="$t('layer.title')" @click="clearLayer">
+    <button class="clear-button" :title="$t('layer.clear')" @click="clearLayer">
       <font-awesome-icon icon="trash" size="lg" fixed-width />
     </button>
   </div>
diff --git a/src/i18n/de.csv b/src/i18n/de.csv
index 330beac0f4..75f2692889 100644
--- a/src/i18n/de.csv
+++ b/src/i18n/de.csv
@@ -49,7 +49,7 @@ keymapName:label,Name
 keymapName:placeholder,Eigener Name der Tastaturbelegung
 layer:confirm,Soll die Ebene wirklich gelöscht werden?
 layer:label,Ebene
-layer:title,Ebene löschen
+layer:clear,Ebene löschen
 layout:label,Layout
 loadDefault:label,Zurücksetzen
 loadDefault:title,Standard-Tastaturbelegung der QMK Firmware laden
diff --git a/src/i18n/en.csv b/src/i18n/en.csv
index 242af0f569..f25875a4e6 100644
--- a/src/i18n/en.csv
+++ b/src/i18n/en.csv
@@ -50,7 +50,7 @@ keymapName:placeholder,custom keymap name
 layer:confirm,Are you sure you want to clear layer?
 layer:label,Layer
 layer:add,Add Layer
-layer:title,Clear Layer
+layer:clear,Clear Layer
 layout:label,layout
 loadDefault:label,Load Default
 loadDefault:title,Load default keymap from QMK Firmware
diff --git a/src/i18n/es.csv b/src/i18n/es.csv
index 59241257a0..79449185dc 100644
--- a/src/i18n/es.csv
+++ b/src/i18n/es.csv
@@ -49,7 +49,7 @@ keymapName:label,Nombre de keymap
 keymapName:placeholder,nombre de keymap personalizado
 layer:confirm,¿Estás seguro de que quieres borrar la capa?
 layer:label,Capa
-layer:title,Borrar capa
+layer:clear,Borrar capa
 layout:label,layout
 loadDefault:label,Cargar Original
 loadDefault:title,Cargar valor por defecto para layout de Firmware QMK
diff --git a/src/i18n/fr.csv b/src/i18n/fr.csv
index 7456ad6789..81097fbeb4 100644
--- a/src/i18n/fr.csv
+++ b/src/i18n/fr.csv
@@ -49,7 +49,7 @@ keymapName:label,Nom de la disposition
 keymapName:placeholder,Disposition Personnalisée
 layer:confirm,Etes-vous sur de vouloir effacer ce calque?
 layer:label,Calque
-layer:title,Efface le calque
+layer:clear,Efface le calque
 layout:label,version
 loadDefault:label,Disposition par défaut
 loadDefault:title,Charge la disposition des touches par défaut de QMK
diff --git a/src/i18n/it.csv b/src/i18n/it.csv
index 7b434eaac6..480d1c96b0 100644
--- a/src/i18n/it.csv
+++ b/src/i18n/it.csv
@@ -49,7 +49,7 @@ keymapName:label,Nome keymap
 keymapName:placeholder,nome keymap personalizzato
 layer:confirm,Sei sicuro di voler cancellare il livello?
 layer:label,Livello
-layer:title,Elimina livello
+layer:clear,Elimina livello
 layout:label,layout
 loadDefault:label,Carica Originale
 loadDefault:title,Carica il valore predefinito per il layout del Firmware QMK
diff --git a/src/i18n/ja.csv b/src/i18n/ja.csv
index d037dea5d9..20f7372ebe 100644
--- a/src/i18n/ja.csv
+++ b/src/i18n/ja.csv
@@ -49,7 +49,7 @@ keymapName:label,Keymap Name
 keymapName:placeholder,カスタムキーマップ名
 layer:confirm,レイヤをクリアしますか？
 layer:label,Layer
-layer:title,レイヤのクリア
+layer:clear,レイヤのクリア
 layout:label,layout
 loadDefault:label,Load Default
 loadDefault:title,QMK Firmwareからデフォルトキーマップをロード
diff --git a/src/i18n/ms.csv b/src/i18n/ms.csv
index 4006619a14..ea8df84c03 100644
--- a/src/i18n/ms.csv
+++ b/src/i18n/ms.csv
@@ -49,7 +49,7 @@ keymapName:label,Nama Keymap
 keymapName:placeholder,Sesuaikan nama keymap
 layer:confirm,Anda pasti ingin membuang lapisan?
 layer:label,Lapisan
-layer:title,Buang Lapisan
+layer:clear,Buang Lapisan
 layout:label,susunan
 loadDefault:label,Memuat keymap asal
 loadDefault:title,Memuatkan keymap asal dari QMK Firmware
diff --git a/src/i18n/pl-PL.csv b/src/i18n/pl-PL.csv
index 5208f3430d..094d4628db 100644
--- a/src/i18n/pl-PL.csv
+++ b/src/i18n/pl-PL.csv
@@ -49,7 +49,7 @@ keymapName:label,Nazwa mapy klawiszy
 keymapName:placeholder,Własna mapa klawiszy
 layer:confirm,Na pewno chcesz wyczyścić aktualną warstwę?
 layer:label,Warstwa
-layer:title,Wyczyść warstwę
+layer:clear,Wyczyść warstwę
 layout:label,Układ
 loadDefault:label,Wczytaj domyślną
 loadDefault:title,Wczytaj domyślną mapę klawiszy z QMK Firmware
diff --git a/src/i18n/pt-BR.csv b/src/i18n/pt-BR.csv
index a21612d0d1..cf40fb9695 100644
--- a/src/i18n/pt-BR.csv
+++ b/src/i18n/pt-BR.csv
@@ -49,7 +49,7 @@ keymapName:label,Nome da keymap
 keymapName:placeholder,nome da keymap customizada
 layer:confirm,Limpar as camadas”
 layer:label,Camadas
-layer:title,Limpar camadas
+layer:clear,Limpar camadas
 layout:label,layout
 loadDefault:label,Carregar padrão
 loadDefault:title,Carregar keymap padrão do QMK Firmware
diff --git a/src/i18n/ru.csv b/src/i18n/ru.csv
index 56a93addc4..e7b3864b2a 100644
--- a/src/i18n/ru.csv
+++ b/src/i18n/ru.csv
@@ -49,7 +49,7 @@ keymapName:label,Название раскладки
 keymapName:placeholder,название пользовательской раскладки
 layer:confirm,"Вы уверены, что хотите очистить слой?"
 layer:label,Слой
-layer:title,Очистить слой
+layer:clear,Очистить слой
 layout:label,раскладка
 loadDefault:label,Значения по умолчанию
 loadDefault:title,Загрузить раскладку со значениями по умолчанию из QMK Firmware
diff --git a/src/i18n/zh.csv b/src/i18n/zh.csv
index 1b80f5de75..553d41a421 100644
--- a/src/i18n/zh.csv
+++ b/src/i18n/zh.csv
@@ -49,7 +49,7 @@ keymapName:label,
 keymapName:placeholder,
 layer:confirm,
 layer:label,
-layer:title,
+layer:clear,
 layout:label,
 loadDefault:label,
 loadDefault:title,

From bad29b3bc483d8a129fdcc5bc44d6ab94c0d1712 Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 16:28:45 -0800
Subject: [PATCH 4/9] undo CSS layer hide

---
 src/scss/style.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 77c01ad665..4b7cd126c1 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -452,10 +452,6 @@ button {
 //   color: #fff;
 // }
 
-.layer:not(.non-empty) {
-  display: none;
-}
-
 .split-content::after {
   content: ' ';
   display: block;

From 80bbd837012e324e8054471bf0f731c281531f69 Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 17:14:22 -0800
Subject: [PATCH 5/9] use CSS Grid for Layer/Keymap controls

---
 src/components/Main.vue |  7 +++----
 src/scss/style.scss     | 20 +++++++++++++-------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index b1b30e223a..8d33706785 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -11,10 +11,10 @@
       </a>
     </div>
     <div class="split-content">
-      <div class="left-side">
+      <div class="layer-control">
         <layerControl />
       </div>
-      <div class="right-side">
+      <div class="keymap-control">
         <p>
           <label class="keymap--label" :title="$t('ColorwayTip.title')">
             {{ $t('keymap.label') }}:
@@ -182,10 +182,9 @@ export default {
   margin-top: 2px;
 }
 .keymap--count {
-  float: right;
+  text-align: left;
   color: #999;
 }
 .keymap--keyset {
-  float: right;
 }
 </style>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 4b7cd126c1..9c9f6fec8e 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -411,8 +411,7 @@ button {
 }
 
 .layers {
-  padding: 0 10px;
-  // background: #fff;
+  padding: 0 8px;
 }
 
 .layer {
@@ -452,6 +451,11 @@ button {
 //   color: #fff;
 // }
 
+.split-content {
+  display: grid;
+  grid-template: 1fr / [keymap] 1fr [layer] 70px;
+}
+
 .split-content::after {
   content: ' ';
   display: block;
@@ -472,14 +476,17 @@ button {
   padding: 30px 0px;
 }
 
-.left-side {
-  float: left;
+.layer-control {
+  width: 60px;
+  grid-column: layer;
   pointer-events: all;
 }
 
-.right-side {
-  float: left;
+.keymap-control {
+  grid-row: 1;
+  grid-column: keymap;
   pointer-events: all;
+  text-align: left;
 }
 
 .rigth-side:after {
@@ -773,7 +780,6 @@ input[type='number'] {
   cursor: pointer;
 }
 #favorite-colorway {
-  float: right;
 }
 @media print {
   .backend-status,

From 317169227b23c258f56cf126d8c0b86434ad040a Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 19:36:14 -0800
Subject: [PATCH 6/9] move Layer Controls to the right, add settings icons

---
 src/components/LayerControl.vue | 21 ++++++++++++++++-----
 src/i18n/en.csv                 |  1 +
 src/scss/style.scss             | 10 +++++++++-
 src/scss/themes.scss            | 13 ++++++++++++-
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue
index cdb676be1c..28986fb4e1 100644
--- a/src/components/LayerControl.vue
+++ b/src/components/LayerControl.vue
@@ -9,12 +9,19 @@
     <div class="layers">
       <!-- prettier-ignore -->
       <div
-        class="layer"
-        :class="layer.clazz"
         v-for="layer in layers"
-        :key="layer.id"
-        @click="clicked(layer.id)"
-      >{{ layer.name }}</div>
+        class="layer-item"
+      >
+        <div
+          class="layer"
+          :class="layer.clazz"
+          :key="layer.id"
+          @click="clicked(layer.id)"
+        >{{ layer.name }}</div>
+        <button class="small-cog" :title="$t('layer.edit')" @click="addLayer">
+          <font-awesome-icon icon="cog" size="" />
+        </button>
+      </div>
     </div>
     <button class="clear-button" :title="$t('layer.clear')" @click="clearLayer">
       <font-awesome-icon icon="trash" size="lg" fixed-width />
@@ -85,4 +92,8 @@ export default {
   padding: 6px 8px;
   cursor: pointer;
 }
+.layer-item {
+  display: grid;
+  grid-template: auto / [layer] auto [cog] auto;
+}
 </style>
diff --git a/src/i18n/en.csv b/src/i18n/en.csv
index f25875a4e6..2b83aadf4b 100644
--- a/src/i18n/en.csv
+++ b/src/i18n/en.csv
@@ -50,6 +50,7 @@ keymapName:placeholder,custom keymap name
 layer:confirm,Are you sure you want to clear layer?
 layer:label,Layer
 layer:add,Add Layer
+layer:edit,Edit Layer
 layer:clear,Clear Layer
 layout:label,layout
 loadDefault:label,Load Default
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 9c9f6fec8e..635e6acf54 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -453,7 +453,7 @@ button {
 
 .split-content {
   display: grid;
-  grid-template: 1fr / [keymap] 1fr [layer] 70px;
+  grid-template: 1fr / [keymap] auto [layer] auto [space] 1fr;
 }
 
 .split-content::after {
@@ -482,6 +482,14 @@ button {
   pointer-events: all;
 }
 
+.small-cog {
+  cursor: pointer;
+  background-color: transparent;
+  width: auto;
+  padding: 0 2px;
+  border: 0;
+}
+
 .keymap-control {
   grid-row: 1;
   grid-column: keymap;
diff --git a/src/scss/themes.scss b/src/scss/themes.scss
index 49833dcd05..be886815d8 100644
--- a/src/scss/themes.scss
+++ b/src/scss/themes.scss
@@ -84,6 +84,12 @@ html {
       color: #fff;
       border-color: #000;
     }
+    .small-cog {
+      color: #000;
+    }
+    .small-cog:hover {
+      color: #49ad4c;
+    }
     .tab {
       background: #fff;
       border-color: #ccc;
@@ -480,7 +486,12 @@ html[data-theme='dark'] {
       }
     }
   }
-
+  .small-cog {
+    color: #fff;
+  }
+  .small-cog:hover {
+    color: #ccc;
+  }
   .random-potato {
     color: #eeeeee;
   }

From af8872b5bab63db22f3f6634d02e7f028fa16c8b Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 21:20:12 -0800
Subject: [PATCH 7/9] linting

---
 src/components/LayerControl.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue
index 28986fb4e1..4c50525f12 100644
--- a/src/components/LayerControl.vue
+++ b/src/components/LayerControl.vue
@@ -8,10 +8,7 @@
     </button>
     <div class="layers">
       <!-- prettier-ignore -->
-      <div
-        v-for="layer in layers"
-        class="layer-item"
-      >
+      <div v-for="layer in layers" class="layer-item">
         <div
           class="layer"
           :class="layer.clazz"
@@ -75,8 +72,8 @@ export default {
       }
     },
     addLayer() {
-      console.log( this.$store.state.keymap.length );
-      console.log( this.$store.getters['keymap/keymap'] );
+      console.log(this.$store.state.keymap.length);
+      console.log(this.$store.getters['keymap/keymap']);
       //this.$store.state.keymap.push({})
       //this.$store.commit('keymap/setDirty');
     }
@@ -84,7 +81,8 @@ export default {
 };
 </script>
 <style>
-.clear-button, .add-button {
+.clear-button,
+.add-button {
   line-height: 100%;
   margin: 0;
   border-radius: 3px;

From 111aff8a20f6afd9d8d32ca2491f6d57c630ee2c Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Sat, 22 Feb 2020 21:30:52 -0800
Subject: [PATCH 8/9] random UI updates

---
 src/components/Main.vue | 21 +++++++++++----------
 src/scss/style.scss     |  6 +++++-
 src/scss/themes.scss    |  2 +-
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 8d33706785..8b4e25c499 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -26,6 +26,17 @@
           </label>
           &nbsp;
           <!-- maintain spacing for paragraph -->
+          <br />
+          <a
+            id="favorite-colorway"
+            :title="$t('favoriteColor')"
+            @click="favColor"
+            :class="{
+              active: isFavoriteColor
+            }"
+          >
+            <font-awesome-icon icon="star" size="lg" fixed-width />
+          </a>
           <select
             class="keymap--keyset"
             id="colorway-select"
@@ -39,16 +50,6 @@
               >{{ name }}</option
             >
           </select>
-          <a
-            id="favorite-colorway"
-            :title="$t('favoriteColor')"
-            @click="favColor"
-            :class="{
-              active: isFavoriteColor
-            }"
-          >
-            <font-awesome-icon icon="star" size="lg" fixed-width />
-          </a>
         </p>
         <visualKeymap :profile="false" />
         <span class="keymap--count"
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 635e6acf54..ee6b9b38be 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -38,6 +38,9 @@ h6 {
   margin: 0 0 20px;
 }
 
+p {
+  margin: 0 0 4px;
+}
 /*p, ul, ol, table, pre, dl {
   margin: 0 0 20px; }*/
 
@@ -427,7 +430,7 @@ button {
   align-items: center;
   line-height: 80%;
   font-size: 80%;
-  margin: 2px;
+  margin: 0px;
   // background: #fff;
   // color: #ccc;
 }
@@ -454,6 +457,7 @@ button {
 .split-content {
   display: grid;
   grid-template: 1fr / [keymap] auto [layer] auto [space] 1fr;
+  grid-column-gap: 16px;
 }
 
 .split-content::after {
diff --git a/src/scss/themes.scss b/src/scss/themes.scss
index be886815d8..d55c4f0840 100644
--- a/src/scss/themes.scss
+++ b/src/scss/themes.scss
@@ -490,7 +490,7 @@ html[data-theme='dark'] {
     color: #fff;
   }
   .small-cog:hover {
-    color: #ccc;
+    color: #49ad4c;
   }
   .random-potato {
     color: #eeeeee;

From b709f16a73dab0dc5a01316fd5b68217f875cdc4 Mon Sep 17 00:00:00 2001
From: James Young <xxiinophobia@yahoo.com>
Date: Mon, 24 Feb 2020 18:17:40 -0800
Subject: [PATCH 9/9] add v-bind:key to .layer-item

I have no idea why this is needed :( but it seems to be.
---
 src/components/LayerControl.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue
index 4c50525f12..046f2f5dc2 100644
--- a/src/components/LayerControl.vue
+++ b/src/components/LayerControl.vue
@@ -8,7 +8,11 @@
     </button>
     <div class="layers">
       <!-- prettier-ignore -->
-      <div v-for="layer in layers" class="layer-item">
+      <div
+        v-for="layer in layers"
+        v-bind:key="layer.id"
+        class="layer-item"
+      >
         <div
           class="layer"
           :class="layer.clazz"