feat: tab close ui

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

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] {