From 1270c7ad1561969d3ca94b37717d12ec8e134074 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 27 May 2021 01:35:32 -0400
Subject: [PATCH] UX: Twitter onebox layout adjustments (#13181)

---
 .../stylesheets/common/base/onebox.scss       | 26 ++++++++++---------
 app/assets/stylesheets/common/d-editor.scss   |  1 +
 lib/onebox/engine/twitter_status_onebox.rb    | 13 ++++++++--
 lib/onebox/templates/twitterstatus.mustache   |  2 +-
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 3b3b6d36d85..41f7aeb52bf 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/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
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 935e0f9169f..651cfdaac2e 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -193,6 +193,7 @@
   padding-bottom: 1.4em;
   &.emoji,
   &.avatar,
+  &.onebox-avatar,
   &.site-icon {
     padding-bottom: 0;
   }
diff --git a/lib/onebox/engine/twitter_status_onebox.rb b/lib/onebox/engine/twitter_status_onebox.rb
index 31fffadeb95..a0f4cb316db 100644
--- a/lib/onebox/engine/twitter_status_onebox.rb
+++ b/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,
diff --git a/lib/onebox/templates/twitterstatus.mustache b/lib/onebox/templates/twitterstatus.mustache
index 67f1b60c4ea..cb80cf71a27 100644
--- a/lib/onebox/templates/twitterstatus.mustache
+++ b/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}}}