keep `locked` badge for approves-followers + add `frozen` badge for admin-locked accts, also federate `frozen` state

2 files changed, 10 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js
index 0f03770b7..f70593868 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.js
+++ b/app/javascript/flavours/glitch/features/account/components/header.js
@@ -191,6 +191,7 @@ class Header extends ImmutablePureComponent {
     const fields          = account.get('fields');
 
     const badge_locked    = account.get('locked') ? (<div className='account-role locked'><FormattedMessage id='account.badges.locked' defaultMessage='🔒 Locked' /></div>) : null;
+    const badge_froze     = account.get('froze') ? (<div className='account-role froze'><FormattedMessage id='account.badges.froze' defaultMessage='❄️ Frozen by admin' /></div>) : null;
     const badge_bot       = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
     const badge_ac        = account.get('adult_content') ? (<div className='account-role adult'><FormattedMessage id='account.badges.adult' defaultMessage="🔞 Adult content" /></div>) : null;
     const badge_gently    = account.get('gently') ? (<div className='account-role gently'><FormattedMessage id='account.badges.gently' defaultMessage="Gentlies kobolds" /></div>) : null;
@@ -226,9 +227,10 @@ class Header extends ImmutablePureComponent {
 
           <div className='account__header__tabs__name'>
             <h1>
+              <span className='account__header__locked'>{lockedIcon}</span>
               <span dangerouslySetInnerHTML={displayNameHtml} />
-              <small>@{acct} {lockedIcon}</small>
-              <div className='roles'>{badge_locked}{badge_admin}{badge_mod}{badge_ac}{badge_bot}{badge_gently}{badge_kobold}</div>
+              <small>@{acct}</small>
+              <div className='roles'>{badge_froze}{badge_locked}{badge_admin}{badge_mod}{badge_ac}{badge_bot}{badge_gently}{badge_kobold}</div>
             </h1>
           </div>
 
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index 49236fe4c..6c1de090e 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -236,6 +236,12 @@
   }
 
   &.locked {
+    color: lighten(pink, 12%);
+    background-color: rgba(lighten(pink, 12%), 0.1);
+    border-color: rgba(lighten(pink, 12%), 0.5);
+  }
+
+  &.froze {
     color: lighten($warning-red, 12%);
     background-color: rgba(lighten($warning-red, 12%), 0.1);
     border-color: rgba(lighten($warning-red, 12%), 0.5);