From 416310d302bb0ce9a9067b2b10daca4f19b09b23 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 19 Oct 2021 14:30:14 -0500
Subject: [PATCH] AccountHeader: make avatar transition less dramatic

---
 app/soapbox/features/account/components/header.js | 8 ++++++--
 app/styles/components/account-header.scss         | 8 ++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 7c1e26954..ba8828809 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -397,7 +397,6 @@ class Header extends ImmutablePureComponent {
     const avatarSize = isSmallScreen ? 90 : 200;
     const deactivated = !account.getIn(['pleroma', 'is_active'], true);
 
-    const lockedIcon = account.get('locked') ? (<Icon id='lock' title={intl.formatMessage(messages.account_locked)} />) : '';
     const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
     const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
 
@@ -430,7 +429,12 @@ class Header extends ImmutablePureComponent {
                   <span dangerouslySetInnerHTML={displayNameHtml} className={classNames('profile-info-panel__name-content', { 'with-badge': verified })} />
                   {verified && <VerificationBadge />}
                   {account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
-                  { <small>@{getAcct(account, displayFqn)} {lockedIcon}</small> }
+                  <small>
+                    @{getAcct(account, displayFqn)}
+                    {account.get('locked') && (
+                      <Icon src={require('@tabler/icons/icons/lock.svg')} title={intl.formatMessage(messages.account_locked)} />
+                    )}
+                  </small>
                 </div>
               </div>
             </div>
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index db6efa887..731f0c19b 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -143,7 +143,7 @@
 
     &.is-locked {
       .account__header__avatar {
-        top: -130px;
+        top: -20px;
         opacity: 0;
         animation: 0.3s fadeOut;
         animation-fill-mode: forwards;
@@ -221,7 +221,7 @@
     width: 265px;
     height: 74px;
     position: absolute;
-    top: 220px;
+    top: 100px;
     opacity: 0;
     animation: 0.3s fadeOut;
     animation-fill-mode: forwards;
@@ -247,9 +247,9 @@
       }
 
       small {
-        display: block;
+        display: flex;
         font-size: 14px;
-        line-height: 1.5;
+        color: var(--primary-text-color--faint);
         font-weight: 400;
         overflow: hidden;
         text-overflow: ellipsis;