From 98af8f9bc1385b2bbb9c03503761d33c36b74ccb Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 11 Mar 2022 18:34:01 +0300
Subject: [PATCH] Show close btn on hover

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/dock/dock-tab.module.css | 14 ++++++++++++--
 src/renderer/components/dock/dock-tab.tsx        | 13 +++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/dock/dock-tab.module.css b/src/renderer/components/dock/dock-tab.module.css
index c4fba2192b..73625946a7 100644
--- a/src/renderer/components/dock/dock-tab.module.css
+++ b/src/renderer/components/dock/dock-tab.module.css
@@ -26,7 +26,7 @@
     background-color: hsl(245deg 8% 28%);
     background-image: none;
 
-    .tabIcon {
+    .close {
       opacity: 1;
     }
   }
@@ -39,12 +39,22 @@
     background-color: #343439;
     background-image: none;
 
-    .tabIcon {
+    .close {
       opacity: 1;
+      background: linear-gradient(90deg, transparent 0%, #343439 25%);
     }
   }
 }
 
+.close {
+  position: absolute;
+  right: 0px;
+  width: 5ch;
+  opacity: 0;
+  text-align: center;
+  background: linear-gradient(90deg, transparent 0%, rgba(67,66,77,1) 25%);
+}
+
 .tabIcon {
   opacity: 0;
 }
diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx
index 49131496f4..d7cba70def 100644
--- a/src/renderer/components/dock/dock-tab.tsx
+++ b/src/renderer/components/dock/dock-tab.tsx
@@ -83,12 +83,13 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
         <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)}
-          />
+          <div className={styles.close}>
+            <Icon
+              small material="close"
+              tooltip={`Close ${isMac ? "⌘+W" : "Ctrl+W"}`}
+              onClick={prevDefault(this.close)}
+            />
+          </div>
         )}
       </div>
     );