From 8daee0e708a08f2757c8eaec22b625d7a2bdb1f6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 12 Jan 2022 14:42:30 +0300
Subject: [PATCH] Convert HotbarSelector to use css modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...elector.scss => hotbar-selector.module.scss} | 10 +++++++++-
 .../components/hotbar/hotbar-selector.tsx       | 17 +++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)
 rename src/renderer/components/hotbar/{hotbar-selector.scss => hotbar-selector.module.scss} (92%)

diff --git a/src/renderer/components/hotbar/hotbar-selector.scss b/src/renderer/components/hotbar/hotbar-selector.module.scss
similarity index 92%
rename from src/renderer/components/hotbar/hotbar-selector.scss
rename to src/renderer/components/hotbar/hotbar-selector.module.scss
index 5eaeb33692..4e432557e1 100644
--- a/src/renderer/components/hotbar/hotbar-selector.scss
+++ b/src/renderer/components/hotbar/hotbar-selector.module.scss
@@ -20,6 +20,8 @@
  */
 
 .HotbarSelector {
+  display: flex;
+  align-items: center;
   height: 26px;
   background-color: var(--layoutBackground);
   position: relative;
@@ -33,7 +35,13 @@
     top: -20px;
   }
 
-  .SelectorIndex {
+  .HotbarIndex {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  .Badge {
     cursor: pointer;
     background: var(--secondaryBackground);
     width: 100%;
diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx
index d0e25bf437..f4faaee80e 100644
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./hotbar-selector.scss";
+import styles from "./hotbar-selector.module.scss";
 import React, { useRef, useState } from "react";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
@@ -30,6 +30,7 @@ import { observer } from "mobx-react";
 import type { Hotbar } from "../../../common/hotbar-types";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
+import { cssNames } from "../../utils";
 
 export interface HotbarSelectorProps {
   hotbar: Hotbar;
@@ -70,15 +71,19 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommand
   };
 
   return (
-    <div className="HotbarSelector flex align-center">
-      <Icon material="play_arrow" className="previous box" onClick={() => onArrowClick(hotbarManager.switchToPrevious)} />
-      <div className="box grow flex align-center">
+    <div className={styles.HotbarSelector}>
+      <Icon
+        material="play_arrow"
+        className={cssNames(styles.Icon, styles.previous)}
+        onClick={() => onArrowClick(hotbarManager.switchToPrevious)}
+      />
+      <div className={styles.HotbarIndex}>
         <Badge
           id="hotbarIndex"
           small
           label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
           onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
-          className="SelectorIndex"
+          className={styles.Badge}
           onMouseEnter={onMouseEvent}
           onMouseLeave={onMouseEvent}
         />
@@ -90,7 +95,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommand
           {hotbar.name}
         </Tooltip>
       </div>
-      <Icon material="play_arrow" className="next box" onClick={() => onArrowClick(hotbarManager.switchToNext)} />
+      <Icon material="play_arrow" className={styles.Icon} onClick={() => onArrowClick(hotbarManager.switchToNext)} />
     </div>
   );
 });