From f71992207243499b3ef6dfae908a470e45680094 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Tue, 18 Jan 2022 00:21:46 +0530
Subject: [PATCH] chore: updated request tab close icon styles

---
 .../components/RequestTabs/StyledWrapper.js   | 28 +++++++++++++++----
 .../src/components/RequestTabs/index.js       | 16 +++++------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
index bc18f207..532da899 100644
--- a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
     border-bottom: 1px solid #cfcfcf;
 
     li {
-      display: inline-block;
+      display: inline-flex;
       width: 150px;
       border: 1px solid transparent;
       border-bottom: none;
@@ -22,8 +22,10 @@ const Wrapper = styled.div`
       padding-right: 0;
       cursor: pointer;
       font-size: 0.8125rem;
+      height: 40px;
 
       .tab-container {
+        width: 100%;
         border-left: 1px solid #dcdcdc;
       }
 
@@ -49,17 +51,31 @@ const Wrapper = styled.div`
 
       .close-icon-container {
         min-height: 20px;
+        border-radius: 3px;
+        display: none;
 
         .close-icon {
           color: #9f9f9f;
           width: 8px;
-          padding-bottom: 3px;
-          padding-top: 3px;
+          padding-bottom: 6px;
+          padding-top: 6px;
         }
 
-        &:hover .close-icon{
-          color: rgb(142, 68, 173);
-          transform: scale(1.1);
+        &:hover, &:hover .close-icon {
+          background-color: #eaeaea;
+          color: rgb(76 76 76);
+        }
+      }
+
+      &.active {
+        .close-icon-container {
+          display: block;
+        }
+      }
+
+      &:hover{
+        .close-icon-container {
+          display: block;
         }
       }
 
diff --git a/packages/grafnode-components/src/components/RequestTabs/index.js b/packages/grafnode-components/src/components/RequestTabs/index.js
index 39590e03..e5c8efc0 100644
--- a/packages/grafnode-components/src/components/RequestTabs/index.js
+++ b/packages/grafnode-components/src/components/RequestTabs/index.js
@@ -54,18 +54,16 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
         <ul role="tablist">
           {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
             return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
-              <div className="flex items-center justify-between tab-container">
-                <div className="flex items-center tab-label pl-3">
+              <div className="flex items-center justify-between tab-container px-1">
+                <div className="flex items-center tab-label pl-2">
                   <span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
                   <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
                 </div>
-                {rt.id === activeRequestTabId ? (
-                  <div className="flex pl-2 pr-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
-                    <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
-                      <path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
-                    </svg>
-                  </div>
-                ) : null}
+                <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
+                  <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+                    <path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
+                  </svg>
+                </div>
               </div>
             </li>
           }) : null}