From 0f746d836fa9999dc892834b64397f5faeef571e Mon Sep 17 00:00:00 2001
From: Jim Richter <jim-x@web.de>
Date: Thu, 1 Apr 2021 19:21:01 +0200
Subject: [PATCH] fix: hotfixes for the color store design

---
 view/src/components/Editor/Editor.svelte  |  2 +-
 view/src/components/Editor/Painter.svelte |  4 ++--
 view/src/components/Editor/TopBar.svelte  |  4 ++--
 view/src/routes/list.svelte               | 25 +++++++++++++++--------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/view/src/components/Editor/Editor.svelte b/view/src/components/Editor/Editor.svelte
index b748615..6354c29 100644
--- a/view/src/components/Editor/Editor.svelte
+++ b/view/src/components/Editor/Editor.svelte
@@ -21,7 +21,7 @@
   let layerOpacity = 50;
   let _layerOpacity = localStorage.getItem("layerOpacity");
   if (_layerOpacity) {
-    layerOpacity = _layerOpacity;
+    layerOpacity = +_layerOpacity;
   }
 </script>
 
diff --git a/view/src/components/Editor/Painter.svelte b/view/src/components/Editor/Painter.svelte
index 18d1f77..0efdaae 100644
--- a/view/src/components/Editor/Painter.svelte
+++ b/view/src/components/Editor/Painter.svelte
@@ -516,7 +516,7 @@
     position: absolute;
     top: 60px;
     right: 10px;
-    z-index: 1001;
+    z-index: 998;
     cursor: pointer;
     pointer-events: all;
   }
@@ -525,7 +525,7 @@
     position: absolute;
     top: 10px;
     right: 10px;
-    z-index: 1001;
+    z-index: 998;
     cursor: pointer;
     pointer-events: all;
   }
diff --git a/view/src/components/Editor/TopBar.svelte b/view/src/components/Editor/TopBar.svelte
index fbadee5..ef70eb0 100644
--- a/view/src/components/Editor/TopBar.svelte
+++ b/view/src/components/Editor/TopBar.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { colorStore } from "stores";
+  import { colorStore, modalStore } from "stores";
 
   export let activeColor = "ff0000";
   export let activeTool;
@@ -39,7 +39,7 @@
         style={`background-color: #${c.val};`}
       />
     {/each}
-    <div class="color">Ξ</div>
+    <div class="color" on:click={() => ($modalStore = "colors")}>Ξ</div>
   </div>
 
   <div class="settings-wrapper">
diff --git a/view/src/routes/list.svelte b/view/src/routes/list.svelte
index 965247d..d5fc49c 100644
--- a/view/src/routes/list.svelte
+++ b/view/src/routes/list.svelte
@@ -94,19 +94,24 @@
     {/if}
   {/each}
 
-  <div id="cross-wrapper" on:click={() => route.set("main")}>
-    <Cross w={20} color="white" weight={2} />
-    <p>Add more images</p>
-  </div>
+  <div class="footer">
+    <div id="cross-wrapper" on:click={() => route.set("main")}>
+      <Cross w={20} color="white" weight={2} />
+      <p>Add more images</p>
+    </div>
 
-  <div id="color-wrapper" on:click={() => ($modalStore = "colors")}>
-    <Cross w={20} color="white" weight={2} />
-    <p>Add more images</p>
+    <div id="color-wrapper" on:click={() => ($modalStore = "colors")}>
+      <p>Edit Colors</p>
+    </div>
   </div>
 </main>
 
 <style>
-  #cross-wrapper {
+  .footer {
+    display: flex;
+  }
+  #cross-wrapper,
+  #color-wrapper {
     margin-top: 10px;
     display: flex;
     align-items: center;
@@ -114,8 +119,10 @@
     padding: 10px;
     width: fit-content;
     cursor: pointer;
+    margin-right: 10px;
   }
-  #cross-wrapper > p {
+  #cross-wrapper > p,
+  #color-wrapper > p {
     margin: 0;
     color: white;
     margin-left: 10px;