From 014ec6a03be01ba8eb10f491ef4b529a38a3917c Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 29 Jun 2022 15:44:36 +0300
Subject: [PATCH] Align HotbarSelector elements with status bar items (#5755)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../hotbar/hotbar-selector.module.scss           | 16 ++++++----------
 .../components/hotbar/hotbar-selector.tsx        |  4 ++--
 .../components/status-bar/status-bar.module.scss |  4 +++-
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-selector.module.scss b/src/renderer/components/hotbar/hotbar-selector.module.scss
index b95823f7fe..a8154c4579 100644
--- a/src/renderer/components/hotbar/hotbar-selector.module.scss
+++ b/src/renderer/components/hotbar/hotbar-selector.module.scss
@@ -6,9 +6,10 @@
 .HotbarSelector {
   display: flex;
   align-items: center;
-  height: 26px;
+  height: 25px;
   background-color: var(--layoutBackground);
   position: relative;
+  justify-content: center;
 
   &:before {
     content: " ";
@@ -21,8 +22,7 @@
 
   .HotbarIndex {
     display: flex;
-    flex-grow: 1;
-    align-items: center;
+    width: 3ch;
   }
 
   .Badge {
@@ -30,21 +30,17 @@
     background: var(--secondaryBackground);
     width: 100%;
     color: var(--settingsColor);
-    padding-top: 3px;
+    padding: 0px calc(var(--padding) / 2);
   }
 
   .Icon {
-    --size: 16px;
-    padding: 0 4px 0 0px;
-    margin: 0px 4px;
-
     &:hover {
       box-shadow: none;
       background-color: transparent;
     }
 
-    &.previous {
-      transform: rotateY(180deg);
+    &:focus-visible {
+      z-index: 1;
     }
   }
 }
diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx
index d6a52dcae6..4d6104b5b3 100644
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@@ -58,7 +58,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarStore, openCommandOv
   return (
     <div className={styles.HotbarSelector}>
       <Icon
-        material="play_arrow"
+        material="arrow_left"
         className={cssNames(styles.Icon, styles.previous)}
         onClick={onPrevClick}/>
       <div className={styles.HotbarIndex}>
@@ -80,7 +80,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarStore, openCommandOv
         </Tooltip>
       </div>
       <Icon
-        material="play_arrow"
+        material="arrow_right"
         className={styles.Icon}
         onClick={onNextClick}
       />
diff --git a/src/renderer/components/status-bar/status-bar.module.scss b/src/renderer/components/status-bar/status-bar.module.scss
index 04f07fa31b..8bd56c55f7 100644
--- a/src/renderer/components/status-bar/status-bar.module.scss
+++ b/src/renderer/components/status-bar/status-bar.module.scss
@@ -19,17 +19,19 @@
 .leftSide {
   display: flex;
   align-items: center;
+  padding-inline-start: calc(var(--padding) / 2);
 }
 
 .rightSide {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  padding-inline-end: calc(var(--padding) / 2);
 }
 
 .item {
   height: 100%;
-  padding: 0 4px;
+  padding-inline: calc(var(--padding) / 4);
   display: flex;
   align-items: center;