Progress

app/javascript/gabsocial/components/popover/user_info_popover.js

@@ -1,11 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { shortNumberFormat } from '../../utils/numbers'
+import { NavLink } from 'react-router-dom'
 import PopoverLayout from './popover_layout'
+import AccountActionButton from '../account_action_button'
 import Avatar from '../avatar'
-import Button from '../button'
 import DisplayName from '../display_name'
-import Text from '../text'
 
 export default class UserInfoPopover extends ImmutablePureComponent {
   static propTypes = {
@@ -16,46 +15,32 @@ export default class UserInfoPopover extends ImmutablePureComponent {
     const { account } = this.props
 
     const content = !account ? null : { __html: account.get('note_emojified') }
+    const to = !account ? '' : `/${account.get('acct')}`
+    
+    // : todo : is remote
 
     return (
-      <PopoverLayout>
-        <div className={[_s.default, _s.px15, _s.py15].join(' ')} style={{width: '260px'}}>
+      <PopoverLayout width={280}>
+        <div className={[_s.default, _s.width100PC, _s.px15, _s.py15].join(' ')}>
           
           <div className={[_s.default, _s.flexRow].join(' ')}>
-            <div className={[_s.default, _s.flexGrow1].join(' ')}>
+            <NavLink
+              to={to}
+              className={[_s.default, _s.noUnderline, _s.flexGrow1].join(' ')}
+            >
               <Avatar account={account} size={42} />
               <DisplayName account={account} multiline noHover />
-            </div>
+            </NavLink>
+
             <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
-              <Button
-                color='white'
-              >
-                <Text size='medium' weight='bold' color='inherit'>
-                  Following
-                </Text>
-              </Button>
+              <AccountActionButton account={account} />
             </div>
           </div>
 
-          <div className={[_s.default, _s.my10].join(' ')}>
+          <div className={[_s.default, _s.mt10].join(' ')}>
             <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
           </div>
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
-            <div>
-              <Text size='small'>
-                {shortNumberFormat(account.get('following_count'))}
-                Following
-              </Text>
-            </div>
-            <div>
-              <Text size='small'>
-                {shortNumberFormat(account.get('followers_count'))}
-                Followers
-              </Text>
-            </div>
-          </div>
-
         </div>
       </PopoverLayout>
     )