diff --git a/extensions/support-page/package.json b/extensions/support-page/package.json index 3db5c0e2ac..550021efd4 100644 --- a/extensions/support-page/package.json +++ b/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", diff --git a/extensions/support-page/renderer.tsx b/extensions/support-page/renderer.tsx index 9558a74bd7..87142c79da 100644 --- a/extensions/support-page/renderer.tsx +++ b/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: ( - - Navigation.navigate(supportPageURL())} - /> - +
Navigation.navigate(supportPageURL())} + > + +
) } ] diff --git a/extensions/support-page/src/support.scss b/extensions/support-page/src/support.scss new file mode 100644 index 0000000000..efc14f2827 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/extensions/support-page/src/support.tsx b/extensions/support-page/src/support.tsx index 3d96649ee3..6c588a1cef 100644 --- a/extensions/support-page/src/support.tsx +++ b/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 ( - - Support}> -

Community Slack Channel

-

- Ask a question, see what's being discussed, join the conversation here -

+ Support}> +

Community Slack Channel

+

+ Ask a question, see what's being discussed, join the conversation here +

-

Report an Issue

-

- Review existing issues or open a new one here -

+

Report an Issue

+

+ Review existing issues or open a new one here +

- {/*

Commercial Support

*/} -
-
+ {/*

Commercial Support

*/} + ); } } diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss index 5d21270ea0..833e7b9bfc 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.scss +++ b/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; + } + } } diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index e0a3925915..f1a1f75ed8 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -17,7 +17,6 @@ .BottomBar { grid-area: bottom-bar; - background-color: var(--blue); } #lens-views {