From 4ac89429ded873a2b0743716100724ea4c52d5a6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 11 Mar 2022 18:10:59 +0300
Subject: [PATCH] Active tab soft background

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/dock/dock-tab.module.css       | 56 +++++++++++++++++++
 src/renderer/components/dock/dock-tab.tsx     | 11 ++--
 2 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/dock/dock-tab.module.css

diff --git a/src/renderer/components/dock/dock-tab.module.css b/src/renderer/components/dock/dock-tab.module.css
new file mode 100644
index 0000000000..c4fba2192b
--- /dev/null
+++ b/src/renderer/components/dock/dock-tab.module.css
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.DockTab {
+  padding: var(--padding);
+  height: 32px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  margin-right: 4px;
+  border-radius: 3px;
+  position: relative;
+  background: no-repeat left 50% linear-gradient(0deg, #43424d, #43424d);
+  background-size: 1px 3ch;
+
+  &.pinned {
+    padding-right: var(--padding);
+  }
+
+  &:last-child {
+    padding-right: var(--padding);
+  }
+
+  &:global(.active) {
+    background-color: hsl(245deg 8% 28%);
+    background-image: none;
+
+    .tabIcon {
+      opacity: 1;
+    }
+  }
+
+  &::after {
+    display: none;
+  }
+
+  &:not(:global(.active)):hover {
+    background-color: #343439;
+    background-image: none;
+
+    .tabIcon {
+      opacity: 1;
+    }
+  }
+}
+
+.tabIcon {
+  opacity: 0;
+}
+
+.title {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx
index b49cd96f82..49131496f4 100644
--- a/src/renderer/components/dock/dock-tab.tsx
+++ b/src/renderer/components/dock/dock-tab.tsx
@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./dock-tab.scss";
+import styles from "./dock-tab.module.css";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -76,14 +76,15 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
   }
 
   render() {
-    const { className, moreActions, dockStore, ...tabProps } = this.props;
+    const { className, moreActions, dockStore, active, ...tabProps } = this.props;
     const { title, pinned } = tabProps.value;
     const label = (
       <div className="flex gaps align-center" onAuxClick={isMiddleClick(prevDefault(this.close))}>
-        <span className="title" title={title}>{title}</span>
+        <span className={styles.title} title={title}>{title}</span>
         {moreActions}
         {!pinned && (
           <Icon
+            className={styles.tabIcon}
             small material="close"
             tooltip={`Close ${isMac ? "⌘+W" : "Ctrl+W"}`}
             onClick={prevDefault(this.close)}
@@ -97,7 +98,9 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
         <Tab
           {...tabProps}
           id={`tab-${this.tabId}`}
-          className={cssNames("DockTab", className, { pinned })}
+          className={cssNames(styles.DockTab, className, {
+            [styles.pinned]: pinned,
+          })}
           onContextMenu={() => this.menuVisible = true}
           label={label}
         />