From 8a5b7930e4e36e02616bd5f0bb1f9709feda9919 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 20 Jun 2020 05:54:09 -0500
Subject: [PATCH] feat: tab close ui

---
 src/client/components/traits.jsx | 10 +++++++++-
 src/client/scss/tabs.scss        | 20 +++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/client/components/traits.jsx b/src/client/components/traits.jsx
index e584e3f..e7d13ff 100644
--- a/src/client/components/traits.jsx
+++ b/src/client/components/traits.jsx
@@ -162,7 +162,15 @@ const Traits = (props) => {
             }
           }}
         >
-          {tabs.map(([type]) => <Tab key={type}>{type}</Tab>)}
+          {tabs.map(([type]) => (
+            <Tab key={type}>
+              <span className="wrapper">
+                <span className="icon" />
+                {type}
+                <span className="close">✕</span>
+              </span>
+            </Tab>
+          ))}
         </TabList>
         {tabs.map(([type, content]) => (
           <TabPanel
diff --git a/src/client/scss/tabs.scss b/src/client/scss/tabs.scss
index 2703fee..a773226 100644
--- a/src/client/scss/tabs.scss
+++ b/src/client/scss/tabs.scss
@@ -27,13 +27,31 @@
     color: #aaaaaa;
     cursor: pointer;
     display: inline-block;
-    padding: 1em 3em;
     &:not(:last-of-type) {
       border-right: 1px solid #282828;
     }
     &:hover {
       color: #ddd;
     }
+    .wrapper {
+      align-content: space-between;
+      align-items: center;
+      display: flex;
+      justify-content: space-evenly;
+      height: 3em;
+      width: 10em;
+    }
+    .close {
+      color: #999999;
+      padding: 0.25em;
+      visibility: hidden;
+      &:hover {
+        color: #ffffff;
+      }
+    }
+    &:hover .close {
+      visibility: visible;
+    }
   }
 
   .react-tabs__tab--selected[class] {