From 9b85b4ad7f0b5b75f960aa505503dee5f1a691fd Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Wed, 12 Aug 2020 13:02:20 -0500
Subject: [PATCH] remove info from deactivated account pages

---
 .../features/account/components/header.js     | 78 ++++++++++---------
 .../ui/components/profile_info_panel.js       | 45 +++++++----
 app/styles/components/account-header.scss     |  4 +
 app/styles/components/columns.scss            |  1 +
 app/styles/components/profile-info-panel.scss | 18 +++++
 5 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index a26ff710f..3ec8919a3 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -221,12 +221,12 @@ class Header extends ImmutablePureComponent {
     const menu = this.makeMenu();
 
     const headerMissing = (account.get('header').indexOf('/headers/original/missing.png') > -1);
-
     const avatarSize = isSmallScreen ? 90 : 200;
+    const deactivated = account.getIn(['pleroma', 'deactivated'], false);
 
     return (
       <div className={classNames('account__header', { inactive: !!account.get('moved') })}>
-        <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing })}>
+        <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}>
           <div className='account__header__info'>
             {info}
           </div>
@@ -238,56 +238,58 @@ class Header extends ImmutablePureComponent {
           <div className='account__header__extra'>
 
             <div className='account__header__avatar'>
-              <Avatar account={account} size={avatarSize} />
+              { !deactivated && <Avatar account={account} size={avatarSize} /> }
             </div>
 
-            <div className='account__header__extra__links'>
+            { !deactivated &&
+              <div className='account__header__extra__links'>
 
-              <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
-                <span>{shortNumberFormat(account.get('statuses_count'))}</span>
-                <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
-              </NavLink>
+                <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
+                  <span>{shortNumberFormat(account.get('statuses_count'))}</span>
+                  <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
+                </NavLink>
 
-              <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
-                <span>{shortNumberFormat(account.get('following_count'))}</span>
-                <span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
-              </NavLink>
+                <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
+                  <span>{shortNumberFormat(account.get('following_count'))}</span>
+                  <span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
+                </NavLink>
 
-              <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
-                <span>{shortNumberFormat(account.get('followers_count'))}</span>
-                <span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
-              </NavLink>
+                <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
+                  <span>{shortNumberFormat(account.get('followers_count'))}</span>
+                  <span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
+                </NavLink>
 
-              {
-                account.get('id') === me &&
-                <div>
-                  <NavLink
-                    exact activeClassName='active' to={`/@${account.get('acct')}/favorites`}
-                  >
-                    { /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
-                    <span>•</span>
-                    <span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span>
-                  </NavLink>
-                  <NavLink
-                    exact activeClassName='active' to={`/@${account.get('acct')}/pins`}
-                  >
-                    { /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
-                    <span>•</span>
-                    <span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span>
-                  </NavLink>
-                </div>
-              }
-            </div>
+                {
+                  account.get('id') === me &&
+                  <div>
+                    <NavLink
+                      exact activeClassName='active' to={`/@${account.get('acct')}/favorites`}
+                    >
+                      { /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
+                      <span>•</span>
+                      <span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span>
+                    </NavLink>
+                    <NavLink
+                      exact activeClassName='active' to={`/@${account.get('acct')}/pins`}
+                    >
+                      { /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
+                      <span>•</span>
+                      <span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span>
+                    </NavLink>
+                  </div>
+                }
+              </div>
+            }
 
             {
               isSmallScreen &&
-              <div className='account-mobile-container'>
+              <div className={classNames('account-mobile-container', { 'deactivated': deactivated })}>
                 <ProfileInfoPanel username={username} account={account} />
               </div>
             }
 
             {
-              me &&
+              me && !deactivated &&
               <div className='account__header__extra__buttons'>
                 <ActionButton account={account} />
                 {account.get('id') !== me &&
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index 592d60ee0..0412beab9 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -11,10 +11,12 @@ import VerificationBadge from 'soapbox/components/verification_badge';
 import Badge from 'soapbox/components/badge';
 import { List as ImmutableList } from 'immutable';
 import { acctFull, isAdmin, isModerator } from 'soapbox/utils/accounts';
+import classNames from 'classnames';
 
 const messages = defineMessages({
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
+  deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
 });
 
 const dateFormatOptions = {
@@ -57,36 +59,47 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const badge = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
     const content = { __html: account.get('note_emojified') };
     const fields = account.get('fields');
-    const displayNameHtml = { __html: account.get('display_name_html') };
+    const deactivated = account.getIn(['pleroma', 'deactivated'], false);
+    const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
     const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
-    const verified = account.get('pleroma').get('tags').includes('verified');
+    const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
 
     return (
-      <div className='profile-info-panel'>
+      <div className={classNames('profile-info-panel', { 'deactivated': deactivated })} >
         <div className='profile-info-panel__content'>
 
           <div className='profile-info-panel-content__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} />
+              <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
               {verified && <VerificationBadge />}
               {badge}
-              <small>@{acctFull(account)} {lockedIcon}</small>
+              { !deactivated && <small>@{acctFull(account)} {lockedIcon}</small> }
             </h1>
           </div>
 
-          <div className='profile-info-panel-content__badges'>
-            {isAdmin(account) && <Badge slug='admin' title='Admin' />}
-            {isModerator(account) && <Badge slug='moderator' title='Moderator' />}
-            {account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
-            {account.get('acct').includes('@') || <div className='profile-info-panel-content__badges__join-date'>
-              <Icon id='calendar' />
+          { !deactivated &&
+            <div className='profile-info-panel-content__badges'>
+              {isAdmin(account) && <Badge slug='admin' title='Admin' />}
+              {isModerator(account) && <Badge slug='moderator' title='Moderator' />}
+              {account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
+              {account.get('acct').includes('@') || <div className='profile-info-panel-content__badges__join-date'>
+                <Icon id='calendar' />
+                <FormattedMessage
+                  id='account.member_since' defaultMessage='Member since {date}' values={{
+                    date: memberSinceDate,
+                  }}
+                />
+              </div>}
+            </div>
+          }
+
+          { deactivated &&
+            <div className='profile-info-panel-content__deactivated'>
               <FormattedMessage
-                id='account.member_since' defaultMessage='Member since {date}' values={{
-                  date: memberSinceDate,
-                }}
+                id='account.deactivated_description' defaultMessage='This account has been deactivated.'
               />
-            </div>}
-          </div>
+            </div>
+          }
 
           {
             (account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index 0a112f469..02bb9ccbf 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -207,6 +207,10 @@
       padding: 10px 10px 0;
       &--nonuser {padding: 10px 10px 15px;}
     }
+
+    .account-mobile-container.deactivated {
+      margin-top: 50px;
+    }
   }
 } // end .account__header
 
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index d8034e497..2151b168b 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -678,6 +678,7 @@
   align-items: center;
   justify-content: center;
   min-height: 160px;
+  border-radius: 0 0 10px 10px;
 
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 7474d0f06..04c54f722 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -128,3 +128,21 @@
     }
   }
 }
+
+.profile-info-panel.deactivated {
+  .profile-info-panel__name-content {
+    text-transform: uppercase;
+  }
+
+  .profile-info-panel__name-content::before {
+    content: '[';
+  }
+
+  .profile-info-panel__name-content::after {
+    content: ']';
+  }
+
+  .profile-info-panel-content__deactivated {
+    color: var(--primary-text-color--faint);
+  }
+}