From 4c1067b1e82d59cdd7c79129c65a5c8c6f750d4e Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 22 Nov 2021 11:03:55 +0300
Subject: [PATCH] Styling sidebar tabs

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/preferences.tsx   |  6 ++-
 .../layout/settings-layout.module.css         | 47 +++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 6440040c8d..eb2abc91ff 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -19,6 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import "./preferences.scss";
+import tabStyles from "../layout/settings-layout.module.css";
 
 import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
@@ -52,6 +53,7 @@ import { LensProxy } from "./proxy";
 import { Telemetry } from "./telemetry";
 import { Extensions } from "./extensions";
 import { sentryDsn } from "../../../common/vars";
+import { cssNames } from "../../utils";
 
 @observer
 export class Preferences extends React.Component {
@@ -69,8 +71,8 @@ export class Preferences extends React.Component {
     const isActive = (route: RouteProps) => !!matchPath(currentLocation, { path: route.path, exact: route.exact });
 
     return (
-      <Tabs className="flex column" scrollable={false} onChange={(url) => navigateWithoutHistoryChange({ pathname: url })}>
-        <div className="header">Preferences</div>
+      <Tabs className={cssNames(tabStyles.Tabs, "flex column")} scrollable={false} onChange={(url) => navigateWithoutHistoryChange({ pathname: url })}>
+        <div className={tabStyles.header}>Preferences</div>
         <Tab value={appURL()} label="Application" data-testid="application-tab" active={isActive(appRoute)}/>
         <Tab value={proxyURL()} label="Proxy" data-testid="proxy-tab" active={isActive(proxyRoute)}/>
         <Tab value={kubernetesURL()} label="Kubernetes" data-testid="kubernetes-tab" active={isActive(kubernetesRoute)}/>
diff --git a/src/renderer/components/layout/settings-layout.module.css b/src/renderer/components/layout/settings-layout.module.css
index 280707fe5e..7f4aa964c3 100644
--- a/src/renderer/components/layout/settings-layout.module.css
+++ b/src/renderer/components/layout/settings-layout.module.css
@@ -144,4 +144,51 @@
   font-size: 14px;
   color: var(--textColorDimmed);
   pointer-events: none;
+}
+
+.Tabs {
+  .header {
+    padding: 6px 10px;
+    font-size: 13px;
+    font-weight: 800;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: var(--textColorPrimary);
+
+    &:first-child {
+      padding-top: 0;
+    }
+  }
+
+  :global(.Tab) {
+    padding: 6px 10px;
+    margin-bottom: 2px;
+    border-radius: 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 15px;
+    line-height: 20px;
+    cursor: pointer;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::after {
+      content: none;
+    }
+
+    &:hover {
+      background-color: var(--navSelectedBackground);
+      color: var(--navHoverColor);
+    }
+
+    &:global(.active) {
+      background-color: var(--navSelectedBackground);
+    }
+
+    > :global(.label) {
+      width: 100%;
+      font-weight: 500;
+    }
+  }
 }
\ No newline at end of file