From 7817db39f2bac2f1a442180abdac2540aeea5b3f Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 30 Oct 2020 13:05:22 +0300
Subject: [PATCH] Status bar improvements

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 extensions/support-page/renderer.tsx                    | 3 +--
 src/renderer/components/cluster-manager/bottom-bar.scss | 3 ++-
 src/renderer/components/cluster-manager/bottom-bar.tsx  | 2 +-
 src/renderer/components/icon/icon.scss                  | 7 +++++++
 src/renderer/components/icon/icon.tsx                   | 5 +++--
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/extensions/support-page/renderer.tsx b/extensions/support-page/renderer.tsx
index 9f52a972bf..0901061e79 100644
--- a/extensions/support-page/renderer.tsx
+++ b/extensions/support-page/renderer.tsx
@@ -22,8 +22,7 @@ export default class SupportPageRendererExtension extends LensRendererExtension
           className="flex align-center gaps hover-highlight"
           onClick={() => Navigation.navigate(supportPageURL())}
         >
-          <Component.Icon material="help_outline" small/>
-          <span>Support</span>
+          <Component.Icon material="help" xs/>
         </div>
       )
     }
diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss
index 021ac7e8d7..833e7b9bfc 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.scss
+++ b/src/renderer/components/cluster-manager/bottom-bar.scss
@@ -4,8 +4,9 @@
 
   font-size: $font-size-small;
   background-color: #3d90ce;
-  padding: 0 $padding;
+  padding: 0 2px;
   color: white;
+  height: 22px;
 
   #current-workspace {
     padding: $padding / 4 $padding / 2;
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index e29ea3bc56..1b464dd00f 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -14,7 +14,7 @@ export class BottomBar extends React.Component {
     return (
       <div className="BottomBar flex gaps">
         <div id="current-workspace" className="flex gaps align-center hover-highlight">
-          <Icon small material="layers"/>
+          <Icon xs material="layers"/>
           <span className="workspace-name">{currentWorkspace.name}</span>
         </div>
         <WorkspaceMenu
diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss
index 529a8d8551..761afc22c4 100644
--- a/src/renderer/components/icon/icon.scss
+++ b/src/renderer/components/icon/icon.scss
@@ -1,6 +1,7 @@
 .Icon {
   --size: 21px;
   --small-size: 18px;
+  --extra-small-size: 16px;
   --big-size: 32px;
   --color-active: #{$iconActiveColor};
   --bgc-active: #{$iconActiveBackground};
@@ -21,6 +22,12 @@
   width: var(--size);
   height: var(--size);
 
+  &.xs {
+    font-size: var(--extra-small-size);
+    width: var(--extra-small-size);
+    height: var(--extra-small-size);
+  }
+
   &.small {
     font-size: var(--small-size);
     width: var(--small-size);
diff --git a/src/renderer/components/icon/icon.tsx b/src/renderer/components/icon/icon.tsx
index 81635faae1..45e0d04a21 100644
--- a/src/renderer/components/icon/icon.tsx
+++ b/src/renderer/components/icon/icon.tsx
@@ -15,6 +15,7 @@ export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorPr
   href?: string;              // render icon as hyperlink
   size?: string | number;     // icon-size
   small?: boolean;            // pre-defined icon-size
+  xs?: boolean;            // pre-defined icon-size
   big?: boolean;              // pre-defined icon-size
   active?: boolean;           // apply active-state styles
   interactive?: boolean;      // indicates that icon is interactive and highlight it on focus/hover
@@ -63,7 +64,7 @@ export class Icon extends React.PureComponent<IconProps> {
     const { isInteractive } = this;
     const {
       // skip passing props to icon's html element
-      className, href, link, material, svg, size, small, big,
+      className, href, link, material, svg, size, xs, small, big,
       disabled, sticker, active, focusable, children,
       interactive: _interactive,
       onClick: _onClick,
@@ -75,7 +76,7 @@ export class Icon extends React.PureComponent<IconProps> {
     const iconProps: Partial<IconProps> = {
       className: cssNames("Icon", className,
         { svg, material, interactive: isInteractive, disabled, sticker, active, focusable },
-        !size ? { small, big } : {}
+        !size ? { xs, small, big } : {}
       ),
       onClick: isInteractive ? this.onClick : undefined,
       onKeyDown: isInteractive ? this.onKeyDown : undefined,