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

This reverts commit 74596b086e.

extensions/support-page/package.json

@@ -9,15 +9,13 @@
     "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,14 +2,6 @@ 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 = [
@@ -26,14 +18,12 @@ export default class SupportPageRendererExtension extends LensRendererExtension
   statusBarItems = [
     {
       item: (
-        <Icon>
+        <div
-          <Component.Icon
+          className="flex align-center gaps hover-highlight"
-            className="SupportIcon"
+          onClick={() => Navigation.navigate(supportPageURL())}
-            material="help"
+        >
-            smallest
+          <Component.Icon material="help" smallest />
-            onClick={() => Navigation.navigate(supportPageURL())}
+        </div>
-          />
-        </Icon>
       )
     }
   ]

extensions/support-page/src/support.scss

@@ -0,0 +1,13 @@
+.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,22 +1,9 @@
 // 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 {
@@ -24,21 +11,19 @@ export class Support extends React.Component {
     const { PageLayout } = Component;
     const { slackUrl, issuesTrackerUrl } = App;
     return (
-      <SupportPage>
+      <PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
-        <PageLayout showOnTop header={<h2>Support</h2>}>
+        <h2>Community Slack Channel</h2>
-          <h2>Community Slack Channel</h2>
+        <p>
-          <p>
+          Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
-            Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
+        </p>
-          </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,13 +2,14 @@
   $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;
   }
 
@@ -18,4 +19,10 @@
       cursor: pointer;
     }
   }
+
+  .extensions {
+    > * {
+      padding: $padding / 4 $padding / 2;
+    }
+  }
 }

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

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