From 4955bf6c927b5524df800a5719afdf464d01fa30 Mon Sep 17 00:00:00 2001
From: Daniel Ledda <daniel.ledda@stock3.com>
Date: Wed, 4 Jan 2023 13:17:44 +0100
Subject: [PATCH] fix: stuff

---
 src/ui/Root/Toolbox.css     | 23 +++++++++++++++--------
 src/ui/Root/ToolboxView.tsx | 10 +++++-----
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/ui/Root/Toolbox.css b/src/ui/Root/Toolbox.css
index 5e88d38..26a34af 100644
--- a/src/ui/Root/Toolbox.css
+++ b/src/ui/Root/Toolbox.css
@@ -1,6 +1,4 @@
-.root-toolbox {
-    position: relative;
-}
+.root-toolbox { }
 
 .root-toolbox .main-row {
     height: 2.5em;
@@ -12,11 +10,8 @@
 }
 
 .root-toolbox .details {
-    position: absolute;
-    top: 2.5em;
-    left: 0;
-    right: 0;
     margin: auto;
+    height: 4em;
     width: min-content;
     border-radius: 0 0 1em 1em;
     padding: 0.5em;
@@ -25,6 +20,10 @@
     justify-content: center;
 }
 
+.root-toolbox .details.hidden {
+    visibility: hidden; 
+}
+
 .root-toolbox .track-unit {
     margin: 0;
     padding: 0;
@@ -43,4 +42,12 @@
     background-color: var(--color-ui-neutral-dark-active);
 }
 
-
+.root-toolbox .details .toolbox-button.active {
+    background-color: var(--color-ui-neutral-dark);
+}
+.root-toolbox .details .toolbox-button:hover {
+    background-color: var(--color-ui-neutral-dark-hover);
+}
+.root-toolbox .details .toolbox-button {
+    background-color: var(--color-ui-neutral-dark-active);
+}
diff --git a/src/ui/Root/ToolboxView.tsx b/src/ui/Root/ToolboxView.tsx
index 6284d36..64ddcf7 100644
--- a/src/ui/Root/ToolboxView.tsx
+++ b/src/ui/Root/ToolboxView.tsx
@@ -28,25 +28,25 @@ export default class ToolboxView extends Rung<HTMLDivElement> implements ISubscr
         switch (this.state.selectedTool) {
             case "track-unit-type":
                 return <div className={"details"}>{...TrackUnitTypeList.map(type => (
-                    <button 
+                    <div 
                         className={`toolbox-button${type === this.state.activeTrackUnitType ? " active" : ""}`}
                         onclick={() => this.state.selectTrackUnitTypePaint(type)}>
                         <div classes={TrackUnitView.getClasses({ on: true, type, stickingType: "none" })} />
-                    </button>
+                    </div>
                 ))}</div>;
             case "sticking":
                 return <div className={"details"}>{...TrackUnitStickingTypeList.reduce((prev, stickingType) => {
                     if (stickingType !== "none") {
-                        prev.push(<button 
+                        prev.push(<div 
                             className={`toolbox-button${stickingType === this.state.activeStickingType ? " active" : ""}`}
                             onclick={() => this.state.selectStickingTypePaint(stickingType)}>
                             {new IconView({ iconName: StickingTypeIconMap[stickingType] })}
-                        </button> as HTMLButtonElement);
+                        </div> as HTMLButtonElement);
                     }
                     return prev;
                 }, [] as HTMLElement[])}</div>;
             case "eraser":
-                return <></>;
+                return <div className={"details hidden"} />;
         }
     }