UserIndex: display dates on accounts in a more compact way

app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap

@@ -10,16 +10,20 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <bdi>
-      <strong
-        className="display-name__html"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<p>Foo</p>",
+    <span
+      className="display-name__name"
+    >
+      <bdi>
+        <strong
+          className="display-name__html"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<p>Foo</p>",
+            }
           }
-        }
-      />
-    </bdi>
+        />
+      </bdi>
+    </span>
   </span>
   <span
     className="display-name__account"

app/soapbox/components/account.js

@@ -142,7 +142,7 @@ class Account extends ImmutablePureComponent {
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-            <DisplayName account={account} />
+            <DisplayName account={account} withDate={Boolean(withDate && withRelationship)} />
           </Permalink>
 
           {withRelationship ? (<>
@@ -156,8 +156,6 @@ class Account extends ImmutablePureComponent {
             </div>
           </>) : withDate && joinedAt}
         </div>
-
-        {(withDate && withRelationship) && joinedAt}
       </div>
     );
   }

app/soapbox/components/display_name.js

@@ -6,6 +6,8 @@ import VerificationBadge from './verification_badge';
 import { getAcct } from '../utils/accounts';
 import { List as ImmutableList } from 'immutable';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import Icon from './icon';
+import RelativeTimestamp from './relative_timestamp';
 import { displayFqn } from 'soapbox/utils/state';
 
 const mapStateToProps = state => {
@@ -22,31 +24,47 @@ class DisplayName extends React.PureComponent {
     displayFqn: PropTypes.bool,
     others: ImmutablePropTypes.list,
     children: PropTypes.node,
+    withDate: PropTypes.bool,
   };
 
+  static defaultProps = {
+    withDate: false,
+  }
+
   render() {
-    const { account, displayFqn, others, children } = this.props;
+    const { account, displayFqn, others, children, withDate } = this.props;
 
     let displayName, suffix;
     const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
 
+    const createdAt = account.get('created_at');
+
+    const joinedAt = createdAt ? (
+      <div className='account__joined-at'>
+        <Icon id='calendar' />
+        <RelativeTimestamp timestamp={createdAt} />
+      </div>
+    ) : null;
+
     if (others && others.size > 1) {
-      displayName = others.take(2).map(a => [
-        <bdi key={a.get('id')}>
-          <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} />
-        </bdi>,
-        verified && <VerificationBadge />,
-      ]).reduce((prev, cur) => [prev, ', ', cur]);
+      displayName = others.take(2).map(a => (
+        <span className='display-name__name'>
+          <bdi key={a.get('id')}><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>
+          {verified && <VerificationBadge />}
+          {withDate && joinedAt}
+        </span>
+      )).reduce((prev, cur) => [prev, ', ', cur]);
 
       if (others.size - 2 > 0) {
         suffix = `+${others.size - 2}`;
       }
     } else {
       displayName = (
-        <>
+        <span className='display-name__name'>
           <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
           {verified && <VerificationBadge />}
-        </>
+          {withDate && joinedAt}
+        </span>
       );
       suffix = <span className='display-name__account'>@{getAcct(account, displayFqn)}</span>;
     }

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

@@ -29,13 +29,14 @@ class UserPanel extends ImmutablePureComponent {
     const displayNameHtml = { __html: account.get('display_name_html') };
     const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
     const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
+    const header = account.get('header');
 
     return (
       <div className='user-panel'>
         <div className='user-panel__container'>
 
           <div className='user-panel__header'>
-            <StillImage src={account.get('header')} alt='' />
+            {header && <StillImage src={account.get('header')} alt='' />}
           </div>
 
           <div className='user-panel__profile'>

app/styles/accounts.scss

@@ -201,6 +201,10 @@
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
+
+    .display-name__name {
+      display: flex;
+    }
   }
 }
 
@@ -502,6 +506,7 @@ a .account__avatar {
 .relationship-tag {
   color: var(--primary-text-color);
   margin-bottom: 4px;
+  margin-left: 4px;
   display: block;
   vertical-align: top;
   background-color: var(--background-color);
@@ -511,6 +516,7 @@ a .account__avatar {
   padding: 4px;
   border-radius: 4px;
   opacity: 0.7;
+  white-space: nowrap;
 
   &:hover {
     opacity: 1;
@@ -518,18 +524,14 @@ a .account__avatar {
 }
 
 .account__joined-at {
-  padding: 3px 2px 0 5px;
+  padding-left: 3px;
   font-size: 14px;
   display: flex;
   white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--primary-text-color--faint);
 
   i.fa-calendar {
     padding-right: 5px;
   }
 }
-
-.account--with-date.account--with-relationship {
-  .account__joined-at {
-    padding-left: 48px;
-  }
-}

app/styles/components/detailed-status.scss

@@ -114,7 +114,6 @@
 
   strong,
   span {
-    display: inline-block;
     text-overflow: ellipsis;
     overflow: hidden;
   }
@@ -130,7 +129,7 @@
 
   .display-name__account {
     display: block;
-    margin-top: -10px;
+    margin-top: -5px;
   }
 }
 

app/styles/components/display-name.scss

@@ -42,6 +42,10 @@ a.account__display-name {
   text-overflow: ellipsis;
   white-space: nowrap;
   position: relative;
+
+  bdi {
+    min-width: 0;
+  }
 }
 
 .display-name__html {

app/styles/ui.scss

@@ -675,6 +675,7 @@
   position: relative;
   width: 15px;
   height: 15px;
+  flex-shrink: 0;
 
   &::before {
     display: block;