Progress

app/javascript/gabsocial/components/tab_bar_item.js

@@ -1,7 +1,6 @@
 import { withRouter } from 'react-router-dom'
 import classNames from 'classnames/bind'
 import Button from './button'
-import Icon from './icon'
 import Text from './text'
 
 // Bind CSS Modules global variable `_s` to classNames module
@@ -9,7 +8,6 @@ const cx = classNames.bind(_s)
 
 /**
  * Renders a tab bar item component
- * @param {string} [props.icon] - icon to use
  * @param {bool} [props.isLarge] - to style the tab bar larger
  * @param {bool} [props.isActive] - if item is active
  * @param {func} [props.onClick] - function to call on click
@@ -21,7 +19,6 @@ export default
 class TabBarItem extends PureComponent {
 
   static propTypes = {
-    icon: PropTypes.string,
     isLarge: PropTypes.bool,
     isActive: PropTypes.bool,
     onClick: PropTypes.func,
@@ -52,7 +49,6 @@ class TabBarItem extends PureComponent {
       onClick,
       location,
       isLarge,
-      icon,
       isActive,
     } = this.props
     const { isCurrent } = this.state
@@ -74,7 +70,7 @@ class TabBarItem extends PureComponent {
       py5: 1,
       outlineNone: 1,
       cursorPointer: 1,
-      backgroundTransparent: 1,
+      bgTransparent: 1,
       borderColorTransparent: !active,
       borderColorBrand: active,
       mr5: isLarge,
@@ -89,7 +85,7 @@ class TabBarItem extends PureComponent {
       radiusSmall: 1,
       px10: !isLarge,
       px15: isLarge,
-      backgroundColorSubtle2Dark_onHover: !active,
+      bgSecondaryDark_onHover: !active,
     })
 
     const textOptions = {
@@ -98,12 +94,6 @@ class TabBarItem extends PureComponent {
       weight: active ? 'bold' : isLarge ? 'medium' : 'normal',
     }
 
-    const iconOptions = {
-      id: icon,
-      width: !!isLarge ? 20 : 14,
-      height: !!isLarge ? 20 : 14,
-    }
-
     return (
       <Button
         onClick={onClick}
@@ -112,17 +102,9 @@ class TabBarItem extends PureComponent {
         noClasses
       >
         <span className={textParentClasses}>
-          {
-            !!title &&
-            <Text {...textOptions}>
-              {title}
-            </Text>
-          }
-
-          {
-            !!icon &&
-            <Icon {...iconOptions} />
-          }
+          <Text {...textOptions}>
+            {title}
+          </Text>
         </span>
       </Button>
     )