From a67c96438c0184339963f5a7add97cd8e1e68571 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 28 Apr 2023 09:50:49 -0400
Subject: [PATCH] UX: Fix user onebox layout (#21284)

---
 app/assets/stylesheets/common/base/onebox.scss      | 10 ++++++++++
 lib/onebox/templates/discourse_user_onebox.mustache |  4 ++--
 lib/oneboxer.rb                                     |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index eb7b0ecd1b6..6661c4bb093 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -268,6 +268,16 @@ aside.onebox {
       .location {
         margin-right: 10px;
       }
+      .user-onebox--joined {
+        color: var(--primary-medium);
+        margin-top: 10px;
+      }
+      .aspect-image {
+        width: 80px;
+        height: 80px;
+        float: left;
+        margin-right: 1em;
+      }
     }
 
     // instagram + reddit fixes
diff --git a/lib/onebox/templates/discourse_user_onebox.mustache b/lib/onebox/templates/discourse_user_onebox.mustache
index 022c357fa48..e7b7cdd2fec 100644
--- a/lib/onebox/templates/discourse_user_onebox.mustache
+++ b/lib/onebox/templates/discourse_user_onebox.mustache
@@ -1,7 +1,7 @@
 <aside class="onebox">
   <article class="onebox-body user-onebox">
     {{{avatar}}}
-    <h3><a href="{{original_url}}">{{{username}}}</a></h3>
+    <h3><a href="{{original_url}}">@{{{username}}}</a></h3>
     <div>
       {{#name}}
         <span class="full-name">{{name}}</span>
@@ -26,7 +26,7 @@
     {{#bio}}
       <p>{{{bio}}}</p>
     {{/bio}}
-    <span>{{joined}}</span>
+    <div class="user-onebox--joined">{{joined}}</div>
   </article>
   <div class="clearfix"></div>
 </aside>
diff --git a/lib/oneboxer.rb b/lib/oneboxer.rb
index f07aa63e121..9bee58b6a34 100644
--- a/lib/oneboxer.rb
+++ b/lib/oneboxer.rb
@@ -455,7 +455,7 @@ module Oneboxer
       args = {
         user_id: user.id,
         username: user.username,
-        avatar: PrettyText.avatar_img(user.avatar_template, "extra_large"),
+        avatar: PrettyText.avatar_img(user.avatar_template, "huge"),
         name: name,
         bio: user.user_profile.bio_excerpt(230),
         location: Onebox::Helpers.sanitize(user.user_profile.location),