move deactivated profile logic to css

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,10 +239,9 @@ 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'>
 
               <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
@@ -280,7 +279,6 @@ class Header extends ImmutablePureComponent {
                 </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 &&

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

@@ -73,11 +73,10 @@ 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' />}
@@ -91,17 +90,14 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               />
             </div>}
           </div>
-          }
 
-          { deactivated &&
           <div className='profile-info-panel-content__deactivated'>
             <FormattedMessage
               id='account.deactivated_description' defaultMessage='This account has been deactivated.'
             />
           </div>
-          }
 
-          { !deactivated &&
+          {
             (account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
             <div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />
           }

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 {

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);
-  }
 }