From 1cc44fcc84c18e3c2b34c8bfe1fc1d64ab7aeee8 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Sun, 25 Apr 2021 17:24:10 +0300
Subject: [PATCH] Styling hotbar selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-menu.scss        | 45 +++++++++++++++----
 .../components/hotbar/hotbar-menu.tsx         | 10 ++---
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index d6927c8eac..e82cf153f0 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -4,8 +4,8 @@
   position: relative;
   text-align: center;
   background: $clusterMenuBackground;
-  padding: 28px 0;
-  min-width: 75px;
+  padding-top: 28px;
+  width: 75px;
 
   .is-mac &:before {
     content: "";
@@ -14,7 +14,8 @@
 
   .HotbarItems {
     --cellWidth: 40px;
-    --cellHeight: 60px;
+    --cellHeight: 40px;
+    --cellFullHeight: 60px;
 
     box-sizing: content-box;
     margin: 0 auto;
@@ -23,8 +24,8 @@
 
     .HotbarCell {
       width: var(--cellWidth);
-      height: 40px;
-      min-height: 40px;
+      height: var(--cellHeight);
+      min-height: var(--cellHeight);
       margin: 12px;
       background: var(--layoutBackground);
       border-radius: 6px;
@@ -67,12 +68,39 @@
   }
 
   .HotbarSelector {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
+    height: 26px;
+    background-color: var(--layoutBackground);
+    position: relative;
+
+    &:before {
+      content: " ";
+      position: absolute;
+      width: 100%;
+      height: 30px;
+      background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
+      top: -30px;
+    }
 
     .Badge {
       cursor: pointer;
+      background: var(--secondaryBackground);
+      width: 100%;
+      color: var(--settingsColor);
+      padding-top: 3px;
+    }
+
+    .Icon {
+      --size: 16px;
+      padding: 0 4px;
+
+      &:hover {
+        box-shadow: none;
+        background-color: transparent;
+      }
+
+      &.previous {
+        transform: rotateY(180deg);
+      }
     }
   }
 
@@ -86,6 +114,7 @@
     border-radius: 6px;
     transition: all 0.2s;
     cursor: pointer;
+    z-index: 1;
 
     &:hover {
       background-color: var(--sidebarBackground);
diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index a486b53e59..7b9139134c 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@@ -60,7 +60,7 @@ export class HotbarMenu extends React.Component<Props> {
 
     const element = document.querySelector<HTMLDivElement>(".HotbarItems");
     const height = element.offsetHeight;
-    const cellHeight = cssVar(element).get("--cellHeight").toString();
+    const cellHeight = cssVar(element).get("--cellFullHeight").toString();
     const cellsFit = Math.floor(height / parseInt(cellHeight)) - 1;
 
     this.hotbar.items = [...Array.from(Array(cellsFit).fill(null))];
@@ -111,12 +111,12 @@ export class HotbarMenu extends React.Component<Props> {
           {this.renderGrid()}
           {this.renderAddCellButton()}
         </div>
-        <div className="HotbarSelector flex gaps auto">
-          <Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
-          <div className="box">
+        <div className="HotbarSelector flex align-center">
+          <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
+          <div className="box grow flex align-center">
             <Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
           </div>
-          <Icon material="chevron_right" className="next box" onClick={() => this.next()} />
+          <Icon material="play_arrow" className="next box" onClick={() => this.next()} />
         </div>
       </div>
     );