🎨 cleaner data on approval requests

app/javascript/mastodon/components/display_name.js

@@ -83,12 +83,12 @@ export default class DisplayName extends React.PureComponent {
         acct = `${acct}@${localDomain}`;
       }
 
-      displayName = <bdi ><strong
+      displayName = (<bdi ><strong
         className='display-name__html'
         dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
       />
 
-      </bdi >;
+      </bdi >);
       suffix = <span className='display-name__account'>@{acct}</span >;
     }
 

app/javascript/mastodon/features/follow_requests/components/account_authorize.js

@@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Permalink from '../../../components/permalink';
 import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
-import IconButton from '../../../components/icon_button';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { shortNumberFormat } from 'mastodon/utils/numbers';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { NavLink } from 'react-router-dom';
 
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -36,18 +36,56 @@ class AccountAuthorize extends ImmutablePureComponent {
             to={`/accounts/${account.get('id')}`}
             className='detailed-status__display-name'
           >
-            <div className='account-authorize__avatar'><Avatar
+            <div className='account-authorize__avatar'>
+              <Avatar
                 account={account}
-              size={48}
+                size={100}
-            /></div >
+              />
+
+            </div >
             <DisplayName account={account} />
+
+          </Permalink >
           {/*count posts*/}
-            <strong >{shortNumberFormat(account.get('statuses_count'))}</strong >
+          <span className='account-authorize--more-data'>
-            <FormattedMessage
+            <NavLink
+              isActive={this.isStatusesPageActive}
+              activeClassName='active'
+              to={`/accounts/${account.get('id')}`}
+              title={intl.formatNumber(account.get('statuses_count'))}
+            >
+              <i className='fa fa-comment' />
+              <strong >{shortNumberFormat(account.get('statuses_count'))}</strong > <FormattedMessage
               id='account.posts'
               defaultMessage='Toots'
             />
-          </Permalink >
+            </NavLink >
+
+            <NavLink
+              exact
+              activeClassName='active'
+              to={`/accounts/${account.get('id')}/following`}
+              title={intl.formatNumber(account.get('following_count'))}
+            >
+              <strong >{shortNumberFormat(account.get('following_count'))}</strong > <FormattedMessage
+              id='account.follows'
+              defaultMessage='Follows'
+            />
+            </NavLink >
+
+            <NavLink
+              exact
+              activeClassName='active'
+              to={`/accounts/${account.get('id')}/followers`}
+              title={intl.formatNumber(account.get('followers_count'))}
+            >
+              <strong >{shortNumberFormat(account.get('followers_count'))}</strong > <FormattedMessage
+              id='account.followers'
+              defaultMessage='Followers'
+            />
+            </NavLink >
+
+            </span >
 
           <div
             className='account__header__content'
@@ -56,19 +94,25 @@ class AccountAuthorize extends ImmutablePureComponent {
         </div >
 
         <div className='account--panel'>
-          <div className='account--panel__button'>
+          <div
-            <IconButton
+            className='account--panel__button account--panel__button__allow clickable'
-              title={intl.formatMessage(messages.authorize)}
-              icon='check'
             onClick={onAuthorize}
-            /> {intl.formatMessage(messages.authorize)}
+          >
+            <i
+              className='fa fa-check'
+              title={intl.formatMessage(messages.authorize)}
+            ></i >
+            {intl.formatMessage(messages.authorize)}
           </div >
-          <div className='account--panel__button'>
+          <div
-            <IconButton
+            className='account--panel__button  account--panel__button__reject clickable'
-              title={intl.formatMessage(messages.reject)}
-              icon='times'
             onClick={onReject}
-            /> {intl.formatMessage(messages.reject)}
+          >
+            <i
+              className='fa fa-times'
+              title={intl.formatMessage(messages.reject)}
+            ></i >
+            {intl.formatMessage(messages.reject)}
           </div >
         </div >
       </div >

app/javascript/styles/bliss/basics.scss

@@ -192,3 +192,18 @@ button {
   }
 }
 
+.clickable {
+  cursor: pointer;
+
+  &:hover {
+    color: $ui-highlight-color;
+  }
+}
+
+.pull-right {
+  float: right;
+}
+
+.pull-left {
+  float: left;
+}

app/javascript/styles/bliss/components.scss

@@ -1420,10 +1420,19 @@ a .account__avatar {
   padding: 14px 10px;
 
   .detailed-status__display-name {
-    display: block;
+    display: inline-block;
     margin-bottom: 15px;
     overflow: hidden;
   }
+
+  &--more-data {
+    margin-bottom: 0.5em;
+
+    a {
+      padding: 1em;
+      color: $highlight-text-color;
+    }
+  }
 }
 
 .account-authorize__avatar {
@@ -2265,7 +2274,7 @@ a.account__display-name {
   .columns-area__panels__pane--compositional {
     display: none;
   }
-  .hide-on-smaller-screens{
+  .hide-on-smaller-screens {
     display: none;
   }
 }
@@ -2322,7 +2331,7 @@ a.account__display-name {
   flex-direction: column;
   height: calc(100% - 10px);
   overflow-y: hidden;
-  z-index:1;
+  z-index: 1;
 
   .navigation-bar {
     padding-top: 20px;