style(sidebar): redesign close button

extension/sidebar.css

@@ -17,6 +17,10 @@ html, body {
   width: 100%;
 }
 
+.tab:hover {
+  background-color: #cccccc;
+}
+
 .tab-title {
   display: inline-block;
   align-self: center;
@@ -39,11 +43,42 @@ html, body {
   vertical-align: middle;
 }
 
-.close-button {
-  padding: 0 2px;
+.close-button-parent {
+  width: 17px;
+  height: 17px;
+  margin-right: 4px;
   display: none;
 }
 
-.tab:hover > .close-button {
+.tab:hover > .close-button-parent {
   display: inline-block;
 }
+
+.close-button-parent:hover {
+  background-color: #707070;
+}
+
+.close-button-outer {
+  height: 15px;
+  width: 2px;
+  margin-left: 6.2px;
+  margin-top: 1.2px;
+  background-color: black;
+  transform: rotate(45deg);
+  Z-index: 1;
+}
+
+.close-button-inner {
+  height: 15px;
+  width: 2px;
+  background-color: black;
+  transform: rotate(90deg);
+  Z-index: 2;
+}
+
+.close-button-parent:hover .close-button-outer {
+  background-color: #cccccc;
+}
+.close-button-parent:hover .close-button-inner {
+  background-color: #cccccc;
+}

src/Sidebar.purs

@@ -71,9 +71,7 @@ createTabElement port tab' = do
   J.setText tab.title tabTitle
   J.append tabTitle tabDiv
   -- close button
-  closeButton <- J.create "<div>"
-  J.addClass "close-button" closeButton
-  J.setText "×" closeButton
+  closeButton <- createCloseButton
   J.append closeButton tabDiv
   J.on "click" onCloseClick closeButton
   pure tabDiv
@@ -81,6 +79,18 @@ createTabElement port tab' = do
   onCloseClick :: J.JQueryEvent -> J.JQuery -> Effect Unit
   onCloseClick event j = Runtime.postMessageJson port $ SbTabDeleted $ view _tabId tab'
 
+createCloseButton :: Effect J.JQuery
+createCloseButton = do
+  parent <- J.create "<div>"
+  J.addClass "close-button-parent" parent
+  outer <- J.create "<div>"
+  J.addClass "close-button-outer" outer
+  J.append outer parent
+  inner <- J.create "<div>"
+  J.addClass "close-button-inner" inner
+  J.append inner outer
+  pure parent
+
 setFaviconUrl :: Maybe String -> J.JQuery -> Effect Unit
 setFaviconUrl Nothing div = pure unit