Using css-in-js styling in support-page extension

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

extensions/support-page/package.json

@@ -9,13 +9,15 @@
     "dev": "webpack --watch",
     "test": "echo NO TESTS"
   },
-  "dependencies": {},
   "devDependencies": {
+    "@emotion/core": "^10.1.1",
+    "@emotion/styled": "^10.0.27",
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
     "@types/react": "^16.9.53",
     "@types/react-router": "^5.1.8",
     "@types/webpack": "^4.41.17",
     "css-loader": "^5.0.0",
+    "emotion": "^10.0.27",
     "mobx": "^5.15.5",
     "react": "^16.13.1",
     "sass-loader": "^10.0.4",

extensions/support-page/renderer.tsx

@@ -2,6 +2,14 @@ import React from "react";
 import { Component, LensRendererExtension, Navigation } from "@k8slens/extensions";
 import { supportPageRoute, supportPageURL } from "./src/support.route";
 import { Support } from "./src/support";
+import styled from '@emotion/styled';
+
+const Icon = styled.div`
+  color: white;
+  display: flex;
+  align-items: center;
+  padding-right: calc(var(--padding) / 2);
+`
 
 export default class SupportPageRendererExtension extends LensRendererExtension {
   globalPages = [
@@ -18,12 +26,14 @@ export default class SupportPageRendererExtension extends LensRendererExtension
   statusBarItems = [
     {
       item: (
-        <div
+        <Icon>
-          className="flex align-center gaps hover-highlight"
+          <Component.Icon
-          onClick={() => Navigation.navigate(supportPageURL())}
+            className="SupportIcon"
-        >
+            material="help"
-          <Component.Icon material="help" smallest />
+            smallest
-        </div>
+            onClick={() => Navigation.navigate(supportPageURL())}
+          />
+        </Icon>
       )
     }
   ]

extensions/support-page/src/support.scss

@@ -1,13 +0,0 @@
-.PageLayout.Support {
-  a[target=_blank] {
-    text-decoration: none;
-    border-bottom: 1px solid;
-
-    &:after {
-      content: "launch";
-      font: small "Material Icons";
-      vertical-align: middle;
-      margin-left: 2px;
-    }
-  }
-}

extensions/support-page/src/support.tsx

@@ -1,9 +1,22 @@
 // TODO: support localization / figure out how to extract / consume i18n strings
 
-import "./support.scss"
 import React from "react"
 import { observer } from "mobx-react"
 import { App, Component } from "@k8slens/extensions";
+import styled from '@emotion/styled';
+
+const SupportPage = styled.div`
+  a[target=_blank] {
+    text-decoration: none;
+
+    &:after {
+      content: "launch";
+      font: small "Material Icons";
+      vertical-align: middle;
+      margin-left: 2px;
+    }
+  }
+`
 
 @observer
 export class Support extends React.Component {
@@ -11,19 +24,21 @@ export class Support extends React.Component {
     const { PageLayout } = Component;
     const { slackUrl, issuesTrackerUrl } = App;
     return (
-      <PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
+      <SupportPage>
-        <h2>Community Slack Channel</h2>
+        <PageLayout showOnTop header={<h2>Support</h2>}>
-        <p>
+          <h2>Community Slack Channel</h2>
-          Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
+          <p>
-        </p>
+            Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
+          </p>
 
-        <h2>Report an Issue</h2>
+          <h2>Report an Issue</h2>
-        <p>
+          <p>
-          Review existing issues or open a new one <a href={issuesTrackerUrl} target="_blank">here</a>
+            Review existing issues or open a new one <a href={issuesTrackerUrl} target="_blank">here</a>
-        </p>
+          </p>
 
-        {/*<h2><Trans>Commercial Support</Trans></h2>*/}
+          {/*<h2><Trans>Commercial Support</Trans></h2>*/}
-      </PageLayout>
+        </PageLayout>
+      </SupportPage>
     );
   }
 }

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

@@ -2,14 +2,13 @@
   $spacing: $padding / 2;
   --flex-gap: #{$spacing};
 
-  font-size: $font-size-small;
-  background-color: #3d90ce;
   padding: 0 2px;
-  color: white;
   height: 22px;
 
   #current-workspace {
+    font-size: var(--font-size-small);
     padding: $padding / 4 $padding / 2;
+    color: white;
     cursor: pointer;
   }
 
@@ -19,10 +18,4 @@
       cursor: pointer;
     }
   }
-
-  .extensions {
-    > * {
-      padding: $padding / 4 $padding / 2;
-    }
-  }
 }

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

@@ -17,6 +17,7 @@
 
   .BottomBar {
     grid-area: bottom-bar;
+    background-color: var(--blue);
   }
 
   #lens-views {