Progress

app/javascript/gabsocial/components/status/status.js

@@ -403,7 +403,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={48} />;
+      statusAvatar = <Avatar account={status.get('account')} size={42} />;
     } else {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
@@ -448,21 +448,24 @@ class Status extends ImmutablePureComponent {
             })}
             data-id={status.get('id')}
           >
-            <div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
             <div className='status__info'>
-              <NavLink to={statusUrl} className='status__relative-time'>
-                <RelativeTimestamp timestamp={status.get('created_at')} />
-              </NavLink>
-
-              <NavLink
-                to={`/${status.getIn(['account', 'acct'])}`}
-                title={status.getIn(['account', 'acct'])}
-                className='status__display-name'
-              >
-                <div className='status__avatar'>{statusAvatar}</div>
-
-                <DisplayName account={status.get('account')} />
-              </NavLink>
+              <div className='status__info__actions'>
+                <NavLink className='status__display-name' to={`/${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
+                  <div className='status__avatar'>{statusAvatar}</div>
+                  <DisplayName account={status.get('account')} />
+                </NavLink>
+                <Icon id='ellipsis-h' className='status__info__actions__icon'/>
+              </div>
+              <div className='status__info__attributes'>
+                <NavLink to={statusUrl} className='status__relative-time'>
+                  <RelativeTimestamp timestamp={status.get('created_at')} />
+                </NavLink>
+                <span className='status__info__dot-seperator'>•</span>
+                { /* <Icon id='globe' className='status__info__attributes__item'/> */ }
+                <span className='status__info__attributes__item status__info__attributes__item--link'>Memes Group</span>
+                <span className='status__info__dot-seperator'>•</span>
+                <span className='status__info__attributes__item'>Edited</span>
+              </div>
             </div>
 
             {((!group && status.get('group')) || status.get('revised_at') !== null) && (

app/javascript/gabsocial/components/status/status.scss

@@ -1,9 +1,9 @@
 .status {
-  padding: 8px 10px 8px 68px;
   position: relative;
   min-height: 54px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
+  margin-bottom: 10px;
+  border: 1px solid #171717;
 
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
@@ -88,7 +88,7 @@
 
 @media screen and (min-width:630px) {
   .status {
-    padding: 15px 15px 15px 78px;
+    padding: 12px 15px 15px 78px;
     min-height: 50px;
 
     &__avatar {
@@ -136,24 +136,57 @@
 
 .status__relative-time {
   color: $dark-text-color;
-  float: right;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .status__display-name {
   color: $dark-text-color;
 }
 
-.status__info .status__display-name {
-  display: block;
-  max-width: 100%;
-  padding-right: 25px;
+.status__info {
+  display: flex;
+  flex-direction: column;
+  z-index: 4;
+  position: relative;
+  padding: 10px 10px 8px 62px;
+
+  &__dot-seperator {
+    font-size: 15px;
+    color: $dark-text-color;
+
+    @include horizontal-margin(5px);
+  }
+
+  &__attributes {
+    display: flex;
+    margin-top: 2px;
+    align-items: center;
+
+    &__item {
+      font-size: 12px;
+      color: $dark-text-color;
+
+      &--link {
+        cursor: pointer;
+        color: $primary-text-color;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+
+    &__icon {
+      margin-left: auto;
+      color: $dark-text-color;
+    }
+  }
 }
 
-.status__info {
-  font-size: 15px;
-  z-index: 4;
-}
 
 .status__prepend {
   margin-left: 68px;
@@ -181,18 +214,11 @@
 }
 
 .status__avatar {
-  @include size(48px);
+  overflow: hidden;
+  @include circle(42px);
   @include abs-position(10px, auto, auto, 10px);
 }
 
-.status__expand {
-  cursor: pointer;
-
-  @include size(68px, 100%);
-  @include abs-position(0, auto, auto, 0);
-}
-
-
 .media-spoiler-video {
   cursor: pointer;
   margin-top: 8px;