From 242adcad798d490aa22e9dbdb3b9ca6ad212ea0b Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Mon, 24 May 2021 11:12:27 +0200
Subject: [PATCH] fix template account card

---
 .../directory/components/account_card.js      | 145 ++++++++++--------
 1 file changed, 78 insertions(+), 67 deletions(-)

diff --git a/app/javascript/mastodon/features/directory/components/account_card.js b/app/javascript/mastodon/features/directory/components/account_card.js
index 2d61ea908..1f0f174eb 100644
--- a/app/javascript/mastodon/features/directory/components/account_card.js
+++ b/app/javascript/mastodon/features/directory/components/account_card.js
@@ -9,27 +9,27 @@ import DisplayName from 'mastodon/components/display_name';
 import Permalink from 'mastodon/components/permalink';
 import RelativeTimestamp from 'mastodon/components/relative_timestamp';
 import IconButton from 'mastodon/components/icon_button';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
 import ShortNumber from 'mastodon/components/short_number';
 import {
-  followAccount,
-  unfollowAccount,
   blockAccount,
+  followAccount,
   unblockAccount,
+  unfollowAccount,
   unmuteAccount,
 } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
 import { initMuteModal } from 'mastodon/actions/mutes';
 
 const messages = defineMessages({
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
+  follow         : { id: 'account.follow', defaultMessage: 'Follow' },
+  unfollow       : { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  requested      : { id: 'account.requested', defaultMessage: 'Awaiting approval' },
+  unblock        : { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
+  unmute         : { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
   unfollowConfirm: {
-    id: 'confirmations.unfollow.confirm',
+    id            : 'confirmations.unfollow.confirm',
     defaultMessage: 'Unfollow',
   },
 });
@@ -53,14 +53,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       if (unfollowModal) {
         dispatch(
           openModal('CONFIRM', {
-            message: (
+            message  : (
               <FormattedMessage
                 id='confirmations.unfollow.message'
                 defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
+                values={{ name: <strong >@{account.get('acct')}</strong > }}
               />
             ),
-            confirm: intl.formatMessage(messages.unfollowConfirm),
+            confirm  : intl.formatMessage(messages.unfollowConfirm),
             onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
           }),
         );
@@ -89,17 +89,16 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 });
 
-export default
-@injectIntl
+export default @injectIntl
 @connect(makeMapStateToProps, mapDispatchToProps)
 class AccountCard extends ImmutablePureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    intl: PropTypes.object.isRequired,
+    account : ImmutablePropTypes.map.isRequired,
+    intl    : PropTypes.object.isRequired,
     onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onMute: PropTypes.func.isRequired,
+    onBlock : PropTypes.func.isRequired,
+    onMute  : PropTypes.func.isRequired,
   };
 
   handleMouseEnter = ({ currentTarget }) => {
@@ -113,7 +112,7 @@ class AccountCard extends ImmutablePureComponent {
       let emoji = emojis[i];
       emoji.src = emoji.getAttribute('data-original');
     }
-  }
+  };
 
   handleMouseLeave = ({ currentTarget }) => {
     if (autoPlayGif) {
@@ -126,7 +125,7 @@ class AccountCard extends ImmutablePureComponent {
       let emoji = emojis[i];
       emoji.src = emoji.getAttribute('data-static');
     }
-  }
+  };
 
   handleFollow = () => {
     this.props.onFollow(this.props.account);
@@ -207,7 +206,7 @@ class AccountCard extends ImmutablePureComponent {
             }
             alt=''
           />
-        </div>
+        </div >
 
         <div className='columns'>
           <div className='column'>
@@ -217,56 +216,68 @@ class AccountCard extends ImmutablePureComponent {
                 href={account.get('url')}
                 to={`/accounts/${account.get('id')}`}
               >
-                <Avatar account={account} size={48} />
+                <Avatar
+                  account={account}
+                  size={48}
+                />
                 <DisplayName account={account} />
-              </Permalink>
+              </Permalink >
 
-          <div className='directory__card__bar__relationship account__relationship'>
-            {buttons}
-          </div>
-        </div>
+              <div className='directory__card__bar__relationship account__relationship'>
+                {buttons}
+              </div >
+            </div >
 
-        <div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <div
-            className='account__header__content translate'
-            dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
-          />
-        </div>
+            <div
+              className='directory__card__extra'
+              onMouseEnter={this.handleMouseEnter}
+              onMouseLeave={this.handleMouseLeave}
+            >
+              <div
+                className='account__header__content translate'
+                dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+              />
+            </div >
 
-        <div className='directory__card__extra'>
-          <div className='accounts-table__count'>
-            <ShortNumber value={account.get('statuses_count')} />
-            <small>
-              <FormattedMessage id='account.posts' defaultMessage='Toots' />
-            </small>
-          </div>
-          <div className='accounts-table__count'>
-            <ShortNumber value={account.get('followers_count')} />{' '}
-            <small>
-              <FormattedMessage
-                id='account.followers'
-                defaultMessage='Followers'
-              />
-            </small>
-          </div>
-          <div className='accounts-table__count'>
-            {account.get('last_status_at') === null ? (
-              <FormattedMessage
-                id='account.never_active'
-                defaultMessage='Never'
-              />
-            ) : (
-              <RelativeTimestamp timestamp={account.get('last_status_at')} />
-            )}{' '}
-            <small>
-              <FormattedMessage
-                id='account.last_status'
-                defaultMessage='Last active'
-              />
-            </small>
-          </div>
-        </div>
-      </div>
+            <div className='directory__card__extra'>
+              <div className='accounts-table__count'>
+                <ShortNumber value={account.get('statuses_count')} />
+                <small >
+                  <FormattedMessage
+                    id='account.posts'
+                    defaultMessage='Toots'
+                  />
+                </small >
+              </div >
+              <div className='accounts-table__count'>
+                <ShortNumber value={account.get('followers_count')} />{' '}
+                <small >
+                  <FormattedMessage
+                    id='account.followers'
+                    defaultMessage='Followers'
+                  />
+                </small >
+              </div >
+              <div className='accounts-table__count'>
+                {account.get('last_status_at') === null ? (
+                  <FormattedMessage
+                    id='account.never_active'
+                    defaultMessage='Never'
+                  />
+                ) : (
+                  <RelativeTimestamp timestamp={account.get('last_status_at')} />
+                )}{' '}
+                <small >
+                  <FormattedMessage
+                    id='account.last_status'
+                    defaultMessage='Last active'
+                  />
+                </small >
+              </div >
+            </div >
+          </div >
+        </div >
+      </div >
     );
   }