Status bar improvements

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

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>
       )
     }

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;

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

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);

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,