ProfileInfoPanel: style join date and stats

app/soapbox/features/ui/components/profile_info_panel.js

@@ -135,7 +135,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             <div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />
           }
 
-          {isLocal(account) && <div className='profile-info-panel-content__badges__join-date'>
+          {isLocal(account) && <div className='profile-info-panel-content__join-date'>
             <Icon id='calendar' />
             <FormattedMessage
               id='account.member_since' defaultMessage='Joined {date}' values={{
@@ -144,7 +144,10 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             />
           </div>}
 
-          <ProfileStats account={account} />
+          <ProfileStats
+            className='profile-info-panel-content__stats'
+            account={account}
+          />
 
           {(fields.size > 0 || identity_proofs.size > 0) && (
             <div className='profile-info-panel-content__fields'>

app/soapbox/features/ui/components/profile_stats.js

@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { NavLink } from 'react-router-dom';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import { injectIntl, defineMessages } from 'react-intl';
+import classNames from 'classnames';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -16,10 +17,11 @@ class ProfileStats extends React.PureComponent {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     account: ImmutablePropTypes.map.isRequired,
+    className: PropTypes.string,
   }
 
   render() {
-    const { intl } = this.props;
+    const { intl, className } = this.props;
     const { account } = this.props;
 
     if (!account) {
@@ -29,7 +31,7 @@ class ProfileStats extends React.PureComponent {
     const acct = account.get('acct');
 
     return (
-      <div className='profile-stats'>
+      <div className={classNames('profile-stats', className)}>
         <NavLink className='profile-stat' to={`/@${acct}/followers`} onClick={this.handleClose} title={intl.formatNumber(account.get('followers_count'))}>
           <strong className='profile-stat__value'>
             {shortNumberFormat(account.get('followers_count'))}

app/styles/components/profile-info-panel.scss

@@ -20,20 +20,26 @@
       margin: 5px 0;
       flex-direction: row;
       flex-wrap: wrap;
+    }
 
-      &__join-date {
-        display: block;
-        margin-top: 5px;
+    &__join-date {
+      display: flex;
+      font-size: 14px;
+      color: var(--primary-text-color--faint);
+      align-items: center;
+      line-height: normal;
 
-        .fa {
-          margin-right: 8px;
-        }
+      .fa {
+        margin-right: 8px;
+        font-size: 20px;
+      }
+    }
 
-        span {
-          color: var(--primary-text-color);
-          font-size: 15px;
-          line-height: 1.25;
-        }
+    &__stats {
+      margin-top: 15px;
+
+      .profile-stat {
+        font-size: 16px;
       }
     }
 
@@ -56,7 +62,7 @@
 
         small {
           display: block;
-          font-size: 16px;
+          font-size: 15px;
           line-height: 1.5;
           color: var(--primary-text-color--faint);
           font-weight: 400;

app/styles/components/profile-stats.scss

@@ -23,8 +23,4 @@
     display: flex;
     color: var(--primary-text-color--faint);
   }
-
-  &:hover {
-    text-decoration: underline;
-  }
 }