Progress

app/javascript/gabsocial/components/list_item.js

@@ -1,6 +1,7 @@
-import { NavLink } from 'react-router-dom'
 import classNames from 'classnames/bind'
+import Button from './button'
 import Icon from './icon'
+import Text from './text'
 
 const cx = classNames.bind(_s)
 
@@ -8,38 +9,52 @@ export default class ListItem extends PureComponent {
   static propTypes = {
     isLast: PropTypes.bool,
     to: PropTypes.string,
+    href: PropTypes.string,
     title: PropTypes.string,
     onClick: PropTypes.func,
+    small: PropTypes.bool,
   }
 
   render() {
-    const { to, title, isLast } = this.props
+    const { title, isLast, to, href, onClick, small } = this.props
 
     const containerClasses = cx({
       default: 1,
       cursorPointer: 1,
       noUnderline: 1,
-      px15: 1,
-      py15: 1,
+      px15: !small,
+      py15: !small,
+      px10: small,
+      py10: small,
       flexRow: 1,
       alignItemsCenter: 1,
+      width100PC: 1,
       backgroundSubtle_onHover: 1,
       borderColorSecondary: !isLast,
       borderBottom1PX: !isLast,
     })
 
+    const textSize = small ? 'small' : 'normal'
+
     return (
-      <NavLink to={to} className={containerClasses} >
-        <span className={[_s.default, _s.text, _s.colorPrimary, _s.fontSize14PX].join(' ')}>
+      <Button
+        to={to}
+        href={href}
+        onClick={onClick}
+        className={containerClasses}
+        noClasses
+      >
+        <Text color='primary' size={textSize}>
           {title}
-        </span>
+        </Text>
+
         <Icon
           id='angle-right'
           width='10px'
           height='10px'
           className={[_s.marginLeftAuto, _s.fillColorBlack].join(' ')}
         />
-      </NavLink>
+      </Button>
     )
   }
 }