Change design of account rows in web UI (mastodon#24247)

Signed-off-by: Claire <[email protected]>

app/javascript/flavours/glitch/components/account.jsx

@@ -6,6 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 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 { me } from '../initial_state';
 
@@ -27,6 +30,26 @@ const messages = defineMessages({
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
 });
 
+class VerifiedBadge extends React.PureComponent {
+
+  static propTypes = {
+    link: PropTypes.string.isRequired,
+    verifiedAt: PropTypes.string.isRequired,
+  };
+
+  render () {
+    const { link } = this.props;
+
+    return (
+      <span className='verified-badge'>
+        <Icon id='check' className='verified-badge__mark' />
+        <span dangerouslySetInnerHTML={{ __html: link }} />
+      </span>
+    );
+  }
+
+}
+
 class Account extends ImmutablePureComponent {
 
   static propTypes = {
@@ -81,7 +104,11 @@ class Account extends ImmutablePureComponent {
           <div className='account__wrapper'>
             <div className='account__display-name'>
               <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
-              <DisplayName />
+
+              <div>
+                <DisplayName />
+                <Skeleton width='7ch' />
+              </div>
             </div>
           </div>
         </div>
@@ -135,24 +162,38 @@ class Account extends ImmutablePureComponent {
       }
     }
 
-    let mute_expires_at;
+    let muteTimeRemaining;
+
     if (account.get('mute_expires_at')) {
-      mute_expires_at =  <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>;
+      muteTimeRemaining = <>· <RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></>;
+    }
+
+    let verification;
+
+    const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
+
+    if (firstVerifiedField) {
+      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} verifiedAt={firstVerifiedField.get('verified_at')} /></>;
     }
 
     return (
       <div className='account'>
         <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'>
+              <Avatar account={account} size={size} />
+            </div>
             <div className='account__avatar-wrapper'><Avatar account={account} size={size} /></div>
-            {mute_expires_at}
-            <DisplayName account={account} />
-          </Permalink>
-          {buttons ?
-            <div className='account__relationship'>
-              {buttons}
+
+            <div>
+              <DisplayName account={account} />
+              <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
             </div>
-            : null}
+          </Permalink>
+
+          <div className='account__relationship'>
+            {buttons}
+          </div>
         </div>
       </div>
     );

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -12,10 +12,12 @@
     text-decoration: none;
     font-size: 14px;
 
-    &--with-note {
-      strong {
-        display: inline;
-      }
+    .display-name {
+      margin-bottom: 4px;
+    }
+
+    .display-name strong {
+      display: inline;
     }
   }
 
@@ -749,6 +751,19 @@
   }
 }
 
+.verified-badge {
+  display: inline-flex;
+  align-items: center;
+  color: $valid-value-color;
+  gap: 4px;
+
+  a {
+    color: inherit;
+    font-weight: 500;
+    text-decoration: none;
+  }
+}
+
 .moved-account-banner,
 .follow-request-banner,
 .account-memorial-banner {

app/javascript/flavours/glitch/styles/components/status.scss

@@ -626,7 +626,7 @@
 
 .status__display-name,
 .account__display-name {
-  strong {
+  .display-name strong {
     color: $primary-text-color;
   }
 }
@@ -641,12 +641,12 @@ a.status__display-name,
 .reply-indicator__display-name,
 .detailed-status__display-name,
 .account__display-name {
-  &:hover strong {
+  &:hover .display-name strong {
     text-decoration: underline;
   }
 }
 
-.account__display-name strong {
+.account__display-name .display-name strong {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;