From d74a1908c7e207bdc26cb0db5cc659c0f26f3b16 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Tue, 25 Aug 2020 13:47:02 -0500
Subject: [PATCH] move deactivated profile logic to css

---
 .../features/account/components/header.js     | 74 +++++++++----------
 .../ui/components/profile_info_panel.js       | 42 +++++------
 app/styles/components/account-header.scss     | 17 ++++-
 app/styles/components/profile-info-panel.scss | 21 +++++-
 4 files changed, 88 insertions(+), 66 deletions(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 9d24bf0a1..3e9caae12 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -226,7 +226,7 @@ class Header extends ImmutablePureComponent {
     const deactivated = account.getIn(['pleroma', 'deactivated'], false);
 
     return (
-      <div className={classNames('account__header', { inactive: !!account.get('moved') })}>
+      <div className={classNames('account__header', { inactive: !!account.get('moved'), deactivated: deactivated })}>
         <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}>
           <div className='account__header__info'>
             {info}
@@ -239,48 +239,46 @@ class Header extends ImmutablePureComponent {
           <div className='account__header__extra'>
 
             <div className='account__header__avatar'>
-              { !deactivated && <Avatar account={account} size={avatarSize} /> }
+              <Avatar account={account} size={avatarSize} />
             </div>
 
-            { !deactivated &&
-              <div className='account__header__extra__links'>
+            <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 &&
@@ -290,7 +288,7 @@ class Header extends ImmutablePureComponent {
             }
 
             {
-              me && !deactivated &&
+              me &&
               <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 7e15a079e..25034b732 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -73,35 +73,31 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
               {verified && <VerificationBadge />}
               {badge}
-              { !deactivated && <small>@{acctFull(account)} {lockedIcon}</small> }
+              { <small>@{acctFull(account)} {lockedIcon}</small> }
             </h1>
           </div>
 
-          { !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'>
+          <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.deactivated_description' defaultMessage='This account has been deactivated.'
+                id='account.member_since' defaultMessage='Member since {date}' values={{
+                  date: memberSinceDate,
+                }}
               />
-            </div>
-          }
+            </div>}
+          </div>
 
-          { !deactivated &&
+          <div className='profile-info-panel-content__deactivated'>
+            <FormattedMessage
+              id='account.deactivated_description' defaultMessage='This account has been deactivated.'
+            />
+          </div>
+
+          {
             (account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
             <div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />
           }
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index 02bb9ccbf..4bf3e24df 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -212,7 +212,22 @@
       margin-top: 50px;
     }
   }
-} // end .account__header
+}
+
+.account__header.deactivated {
+  .still-image img,
+  .still-image canvas {
+    display: none;
+  }
+
+  .account__header__extra__links,
+  .account__header__extra__buttons {
+    display: none;
+  }
+}
+
+
+// end .account__header
 
 .account-timeline {
   &__header {
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 04c54f722..fcb14051a 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -126,14 +126,31 @@
         }
       }
     }
+
+    &__deactivated {
+      display: none;
+    }
   }
 }
 
 .profile-info-panel.deactivated {
+
+  .profile-info-panel-content__name h1 small,
+  .profile-info-panel-content__badges__join-date,
+  .profile-info-panel-content__bio,
+  .profile-info-panel-content__fields {
+    display: none;
+  }
+
   .profile-info-panel__name-content {
     text-transform: uppercase;
   }
 
+  .profile-info-panel-content__deactivated {
+    color: var(--primary-text-color--faint);
+    display: block;
+  }
+
   .profile-info-panel__name-content::before {
     content: '[';
   }
@@ -141,8 +158,4 @@
   .profile-info-panel__name-content::after {
     content: ']';
   }
-
-  .profile-info-panel-content__deactivated {
-    color: var(--primary-text-color--faint);
-  }
 }