From 03ffe899fe15d5ae68258874d6f275267897c652 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 9 Sep 2021 12:27:34 +0300
Subject: [PATCH] Aligning hotbar and cluster avatar styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../cluster-manager/cluster-manager.scss          |  3 ++-
 src/renderer/components/hotbar/hotbar-menu.scss   |  9 ++-------
 src/renderer/components/layout/sidebar.scss       | 15 ++++++++++++---
 src/renderer/components/layout/sidebar.tsx        | 14 ++++++++++++--
 src/renderer/components/layout/topbar.module.css  |  1 +
 src/renderer/components/layout/topbar.tsx         |  2 +-
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index f5371febb3..cc6a4a8e37 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/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;
diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index 3b7300507a..270d8b6bb1 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/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;
diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.scss
index 18ac932f69..fac73debdd 100644
--- a/src/renderer/components/layout/sidebar.scss
+++ b/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;
   }
 }
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 1f584d176f..3d0b0c03c7 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/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")}>
diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css
index 83b3c4cd76..07e201a1c4 100644
--- a/src/renderer/components/layout/topbar.module.css
+++ b/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 {
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 2783471bb3..1532fa89d4 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/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)}
         />