UX: Fix user onebox layout (#21284)

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

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>

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),