new tab close icon

Background only shows on hover, has 'active' state.

app/renderer/components/styles/theme.js

@@ -146,6 +146,17 @@
       borderWidth: 1,
       color: '#333',
 
+      closeButton: {
+        borderRadius: '2px',
+        active: {
+          background: '#cb2c00'
+        },
+        hover: {
+          color: 'white',
+          background: '#fd4f01'
+        }
+      },
+
       hover: {
         background: '#dbdddf',
         active: {

app/renderer/components/tabs/content/closeTabIcon.js

@@ -4,11 +4,10 @@
 
 const React = require('react')
 const ReactDOM = require('react-dom')
-const {StyleSheet} = require('aphrodite/no-important')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
-const TabIcon = require('./tabIcon')
 
 // State helpers
 const tabState = require('../../../../common/state/tabState')
@@ -21,8 +20,6 @@ const globalStyles = require('../../styles/global')
 const {theme} = require('../../styles/theme')
 const {opacityIncreaseElementKeyframes} = require('../../styles/animations')
 
-const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg')
-
 class CloseTabIcon extends React.Component {
   constructor (props) {
     super(props)
@@ -89,49 +86,68 @@ class CloseTabIcon extends React.Component {
       return null
     }
 
-    return <TabIcon
+    return <div
       data-test-id='closeTabIcon'
       data-test2-id={this.props.showCloseIcon ? 'close-icon-on' : 'close-icon-off'}
-      className={[
-        styles.icon_close,
-        this.props.centralizeTabIcons && styles.icon_close_centered
-      ]}
-      l10nId='closeTabButton'
+      className={css(
+        styles.closeIcon,
+        this.props.centralizeTabIcons && styles.closeIcon_centered
+      )}
+      data-l10n-id='closeTabButton'
       onClick={this.props.onClick}
       onDragStart={this.onDragStart}
       draggable='true'
       ref={this.setRef}
-    />
+    >
+      <svg className={css(styles.closeIcon__graphic)} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path className={css(styles.closeIcon__line)} fill='none' stroke='#000' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.29' d='M11.5 4.5l-7 7m7 0l-7-7' />
+      </svg>
+    </div>
   }
 }
 
 const styles = StyleSheet.create({
-  icon_close: {
+  closeIcon: {
+    '--close-line-color': 'var(--tab-color)',
+    boxSizing: 'border-box',
+    alignSelf: 'center',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.tab.closeButton.borderRadius,
+    background: 'var(--tab-background)',
+    transition: 'background 120ms ease',
     marginRight: globalStyles.spacing.defaultTabMargin,
     marginBottom: 'var(--tab-contents-shim-bottom)',
-    backgroundImage: `url(${closeTabSvg})`,
-
-    // Override default properties
-    backgroundSize: globalStyles.spacing.closeIconSize,
     width: globalStyles.spacing.closeIconSize,
     height: globalStyles.spacing.closeIconSize,
-
-    // mask icon to gray to avoid calling another icon on hover
-    transition: 'filter 120ms ease',
-    filter: theme.tab.icon.close.filter,
-
+    zIndex: globalStyles.zindex.zindexTabsThumbnail,
     ':hover': {
-      filter: 'none'
+      '--close-line-color': theme.tab.closeButton.hover.color,
+      background: theme.tab.closeButton.hover.background
+    },
+    ':active': {
+      background: theme.tab.closeButton.active.background
     }
   },
 
-  icon_close_centered: {
+  closeIcon__graphic: {
+    flex: 1
+  },
+
+  closeIcon__line: {
+    transition: 'stroke 120ms ease',
+    stroke: 'var(--close-line-color)'
+  },
+
+  closeIcon_centered: {
     position: 'absolute',
-    left: 0,
+    left: `calc(50% - (${globalStyles.spacing.closeIconSize} / 2))`,
     right: 0,
-    top: 0,
+    top: `calc(50% - (${globalStyles.spacing.closeIconSize} / 2))`,
     bottom: 0,
-    margin: 'auto'
+    margin: 0
   }
 })