UX: Twitter onebox layout adjustments (#13181)

app/assets/stylesheets/common/base/onebox.scss

@@ -549,21 +549,25 @@ aside.onebox.twitterstatus .onebox-body {
 
 // thumbnail, oddly, ONLY applies to twitter avatar
 .onebox.twitterstatus {
-  .thumbnail {
-    width: 48px;
-    height: 48px;
+  .thumbnail,
+  .thumbnail.onebox-avatar {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+  }
+  .twitter-screen-name {
+    font-size: var(--font-down-1);
   }
   p,
   .tweet {
-    white-space: pre-line;
-    padding-top: 3px;
-    margin-left: 70px;
+    clear: left;
+    padding: 1em 0;
 
     .quoted {
       border: 1px solid var(--primary-low);
-      padding: 0px 14px 0px 12px;
+      padding: 0.5em 1em;
+      margin-top: 1em;
       white-space: normal;
-      margin-top: 15px;
 
       .quoted-link {
         color: inherit;
@@ -571,7 +575,8 @@ aside.onebox.twitterstatus .onebox-body {
 
       .quoted-title {
         font-weight: bold;
-        margin: 5px 2px;
+        margin: 0.5em 0;
+        padding: 0;
 
         span {
           font-weight: lighter;
@@ -584,9 +589,6 @@ aside.onebox.twitterstatus .onebox-body {
       }
     }
   }
-  .date {
-    clear: left;
-  }
 }
 
 // Onebox - Imgur/Flickr - Album

app/assets/stylesheets/common/d-editor.scss

@@ -193,6 +193,7 @@
   padding-bottom: 1.4em;
   &.emoji,
   &.avatar,
+  &.onebox-avatar,
   &.site-icon {
     padding-bottom: 0;
   }

lib/onebox/engine/twitter_status_onebox.rb

@@ -82,9 +82,17 @@ module Onebox
 
       def title
         if twitter_api_credentials_present?
-          "#{access(:user, :name)} (#{access(:user, :screen_name)})"
+          access(:user, :name)
         else
-          "#{attr_at_css('.tweet.permalink-tweet', 'data-name')} (#{attr_at_css('.tweet.permalink-tweet', 'data-screen-name')})"
+          attr_at_css('.tweet.permalink-tweet', 'data-name')
+        end
+      end
+
+      def screen_name
+        if twitter_api_credentials_present?
+          access(:user, :screen_name)
+        else
+          attr_at_css('.tweet.permalink-tweet', 'data-screen-name')
         end
       end
 
@@ -158,6 +166,7 @@ module Onebox
           tweet: tweet,
           timestamp: timestamp,
           title: title,
+          screen_name: screen_name,
           avatar: avatar,
           likes: likes,
           retweets: retweets,

lib/onebox/templates/twitterstatus.mustache

@@ -1,6 +1,6 @@
 {{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar">{{/avatar}}
-
 <h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
+<div class="twitter-screen-name"><a href="{{link}}" target="_blank" rel="noopener">@{{screen_name}}</a></div>
 
 <div class="tweet">
   {{{tweet}}}