Aligning hotbar and cluster avatar styles

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

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

@@ -21,6 +21,7 @@
 
 .ClusterManager {
   --bottom-bar-height: 22px;
+  --hotbar-width: 75px;
 
   display: grid;
   grid-template-areas:
@@ -48,7 +49,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: 40px; // Move below top bar
+    top: 0;
     right: 0;
     bottom: 0;
     display: flex;

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

@@ -25,13 +25,8 @@
   position: relative;
   text-align: center;
   background: $clusterMenuBackground;
-  padding-top: 28px;
-  width: 75px;
-
-  .is-mac &:before {
-    content: "";
-    height: 4px; // extra spacing for mac-os "traffic-light" buttons
-  }
+  padding-top: 1px;
+  width: var(--hotbar-width);
 
   .HotbarItems {
     --cellWidth: 40px;

src/renderer/components/layout/sidebar.scss

@@ -46,11 +46,20 @@
     text-align: center;
   }
 
-  .cluster-name {
+  .cluster-description {
+    display: flex;
+    align-items: center;
     padding: 1.25rem;
+  }
+
+  .cluster-name {
+    word-break: break-word;
     font-weight: bold;
-    font-size: 1.5rem;
-    word-break: break-all;
     color: var(--textColorAccent);
+    display: -webkit-box;
+    /* Simulate text-overflow:ellipsis styles but for multiple text lines */
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 }

src/renderer/components/layout/sidebar.tsx

@@ -41,6 +41,7 @@ import { Apps } from "../+apps";
 import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { HotbarIcon } from "../hotbar/hotbar-icon";
 
 interface Props {
   className?: string;
@@ -187,8 +188,17 @@ export class Sidebar extends React.Component<Props> {
     return (
       <div className={cssNames(Sidebar.displayName, "flex column", className)}>
         {this.clusterEntity && (
-          <div className="cluster-name">
-            {this.clusterEntity.metadata.name}
+          <div className="cluster-description">
+            <HotbarIcon
+              uid={this.clusterEntity.metadata.uid}
+              title={this.clusterEntity.metadata.name}
+              source={this.clusterEntity.metadata.source}
+              src={this.clusterEntity.spec.icon?.src}
+              className="mr-5"
+            />
+            <div className="cluster-name">
+              {this.clusterEntity.metadata.name}
+            </div>
           </div>
         )}
         <div className={cssNames("sidebar-nav flex column box grow-fixed")}>

src/renderer/components/layout/topbar.module.css

@@ -28,6 +28,7 @@
   z-index: 1;
   width: 100%;
   grid-area: topbar;
+  padding-left: var(--hotbar-width);
 }
 
 .history {

src/renderer/components/layout/topbar.tsx

@@ -95,7 +95,7 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
         <Icon
           data-testid="home-button"
           material="home"
-          className="ml-5"
+          className="ml-4"
           onClick={goHome}
           disabled={isActiveRoute(catalogRoute)}
         />