Move bottom bar styles to css modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/cluster-manager/bottom-bar.module.css

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+ .BottomBar {
+  @apply flex px-2 text-white;
+
+  grid-area: bottom-bar;
+  background-color: var(--blue);
+  height: var(--bottom-bar-height);
+  font-size: var(--font-size-small);
+}
+
+.item {
+  @apply flex items-center mr-2 h-full px-2 last:mr-0;
+
+  &:hover {
+    @apply cursor-pointer;
+
+    background-color: #ffffff33;
+  }
+}
+
+.extensions {
+  @apply flex flex-1 justify-end;
+}

src/renderer/components/cluster-manager/bottom-bar.tsx

@@ -19,11 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./bottom-bar.scss";
+import styles from "./bottom-bar.module.css";
 
 import React from "react";
 import { observer } from "mobx-react";
 import { StatusBarRegistration, StatusBarRegistry } from "../../../extensions/registries";
+import { ActiveHotbarName } from "./active-hotbar-name";
 
 @observer
 export class BottomBar extends React.Component {
@@ -45,14 +46,14 @@ export class BottomBar extends React.Component {
     }
 
     return (
-      <div className="extensions box grow flex gaps justify-flex-end">
+      <div className={styles.extensions}>
         {items.map((registration, index) => {
           if (!registration?.item && !registration?.components?.Item) {
             return null;
           }
 
           return (
-            <div className="flex align-center gaps item" key={index}>
+            <div className={styles.item} key={index}>
               {this.renderRegisteredItem(registration)}
             </div>
           );
@@ -63,7 +64,10 @@ export class BottomBar extends React.Component {
 
   render() {
     return (
-      <div className="BottomBar flex gaps">
+      <div className={styles.BottomBar}>
+        <div className={styles.item}>
+          <ActiveHotbarName/>
+        </div>
         {this.renderRegisteredItems()}
       </div>
     );

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -20,7 +20,7 @@
  */
 
 .ClusterManager {
-  --bottom-bar-height: 22px;
+  --bottom-bar-height: 21px;
   --hotbar-width: 75px;
 
   display: grid;

src/renderer/components/hotbar/hotbar-selector.scss

@@ -43,7 +43,8 @@
 
   .Icon {
     --size: 16px;
-    padding: 0 4px;
+    padding: 0 4px 0 0px;
+    margin: 0px 4px;
 
     &:hover {
       box-shadow: none;