fix: hotfixes for the color store design

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>
 

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;
   }

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">

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;