From e0aba64a64257e00b3afdecfa76e6a42246e78a4 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 1 Apr 2023 09:27:23 +0200
Subject: [PATCH] [Glitch] Fix regressions from change in account row design in
 web UI

Port 46483ae849bc06ee74f4745f4564b213e742c51c

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 20 +++++++++++--------
 .../glitch/components/server_banner.jsx       |  2 +-
 .../flavours/glitch/features/about/index.jsx  |  2 +-
 .../glitch/styles/components/accounts.scss    | 12 +++++++++++
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 77c7a71945..d94d51067d 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -9,6 +9,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import Icon from 'flavours/glitch/components/icon';
+import classNames from 'classnames';
 
 import { me } from '../initial_state';
 
@@ -61,6 +62,7 @@ class Account extends ImmutablePureComponent {
     onMuteNotifications: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     hidden: PropTypes.bool,
+    minimal: PropTypes.bool,
     actionIcon: PropTypes.string,
     actionTitle: PropTypes.string,
     defaultAction: PropTypes.string,
@@ -96,14 +98,14 @@ class Account extends ImmutablePureComponent {
   };
 
   render () {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props;
+    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
       return (
-        <div className='account'>
+        <div className={classNames('account', { 'account--minimal': minimal })}>
           <div className='account__wrapper'>
             <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
+              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
 
               <div>
                 <DisplayName />
@@ -177,7 +179,7 @@ class Account extends ImmutablePureComponent {
     }
 
     return (
-      <div className='account'>
+      <div className={classNames('account', { 'account--minimal': minimal })}>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
             <div className='account__avatar-wrapper'>
@@ -186,13 +188,15 @@ class Account extends ImmutablePureComponent {
 
             <div>
               <DisplayName account={account} />
-              <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+              {!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
             </div>
           </Permalink>
 
-          <div className='account__relationship'>
-            {buttons}
-          </div>
+          {!minimal && (
+            <div className='account__relationship'>
+              {buttons}
+            </div>
+          )}
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/components/server_banner.jsx b/app/javascript/flavours/glitch/components/server_banner.jsx
index 677e13706b..1b449ff1a8 100644
--- a/app/javascript/flavours/glitch/components/server_banner.jsx
+++ b/app/javascript/flavours/glitch/components/server_banner.jsx
@@ -63,7 +63,7 @@ class ServerBanner extends PureComponent {
           <div className='server-banner__meta__column'>
             <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
+            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
           </div>
 
           <div className='server-banner__meta__column'>
diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx
index 79b5f8114e..0b78385562 100644
--- a/app/javascript/flavours/glitch/features/about/index.jsx
+++ b/app/javascript/flavours/glitch/features/about/index.jsx
@@ -128,7 +128,7 @@ class About extends PureComponent {
             <div className='about__meta__column'>
               <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
+              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
             </div>
 
             <hr className='about__meta__divider' />
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index f84158b384..1330b412e7 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -21,6 +21,18 @@
     }
   }
 
+  &--minimal {
+    .account__display-name {
+      .display-name {
+        margin-bottom: 0;
+      }
+
+      .display-name strong {
+        display: block;
+      }
+    }
+  }
+
   &__note {
     overflow: hidden;
     text-overflow: ellipsis;