New 'close tab' icon with no background until hover

Background only shows on hover, has 'active' state.
brave · Jan 25, 2018 · afd3e24 · afd3e24
1 parent fcf0441
commit afd3e24
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 29 deletions.
diff --git a/app/extensions/brave/img/tabs/close_btn.svg b/app/extensions/brave/img/tabs/close_btn.svg
diff --git a/app/renderer/components/styles/theme.js b/app/renderer/components/styles/theme.js
@@ -146,6 +146,18 @@
       borderWidth: 1,
       color: '#333',
 
+      closeButton: {
+        background: 'transparent',
+        borderRadius: '2px',
+        active: {
+          background: '#cb2c00'
+        },
+        hover: {
+          color: 'white',
+          background: '#fd4f01'
+        }
+      },
+
       hover: {
         background: '#dbdddf',
         active: {

diff --git a/app/renderer/components/tabs/content/closeTabIcon.js b/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)
@@ -85,53 +82,78 @@ class CloseTabIcon extends React.Component {
   }
 
   render () {
-    if (this.props.isPinned || !this.props.showCloseIcon) {
+    if (this.props.isPinned || !this.props.showCloseIcon) { // <-- comment out to always show, in order to view in inspector
       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)',
+    '--close-transit-duration': theme.tab.transitionDurationOut,
+    '--close-transit-timing': theme.tab.transitionEasingOut,
+    boxSizing: 'border-box',
+    alignSelf: 'center',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.tab.closeButton.borderRadius,
+    background: theme.tab.closeButton.background,
+    transition: 'background var(--close-transit-duration) var(--close-transit-timing)',
     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,
+      '--close-transit-duration': theme.tab.transitionDurationIn,
+      '--close-transit-timing': theme.tab.transitionEasingIn
+    },
+    ':active': {
+      background: theme.tab.closeButton.active.background,
+      '--close-transit-duration': theme.tab.transitionDurationIn,
+      '--close-transit-timing': theme.tab.transitionEasingIn
     }
   },
 
-  icon_close_centered: {
+  closeIcon__graphic: {
+    flex: 1
+  },
+
+  closeIcon__line: {
+    transition: 'stroke var(--close-transit-duration) var(--close-transit-timing)',
+    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
   }
 })
 

diff --git a/test/unit/app/renderer/components/tabs/content/closeTabIconTest.js b/test/unit/app/renderer/components/tabs/content/closeTabIconTest.js
@@ -64,7 +64,6 @@ describe('Tabs content - CloseTabIcon', function () {
       useCleanCache: true
     })
     mockery.registerMock('electron', fakeElectron)
-    mockery.registerMock('../../../../extensions/brave/img/tabs/close_btn.svg')
     windowStore = require('../../../../../../../js/stores/windowStore')
     appStore = require('../../../../../../../js/stores/appStoreRenderer')
     CloseTabIcon = require('../../../../../../../app/renderer/components/tabs/content/closeTabIcon')