From 3885ecfe83d8f360849a963668fd23b42921c650 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Sat, 4 Dec 2021 14:16:54 -0800
Subject: [PATCH] Added user profile image, added user @ handle

---
 resources/cider-ui-tests/index.html | 13 +++++++++----
 resources/cider-ui-tests/style.css  | 18 +++++++++++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 7599361f..61899b09 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -165,12 +165,17 @@
                 <div class="app-sidebar-footer">
                     <input type="range" class="display--small">
                     <button class="app-sidebar-button" style="width:100%" @click="chrome.menuOpened = !chrome.menuOpened">
-                        <div class="sidebar-user-icon">
+                        <template v-if="chrome.userinfo.attributes">
+                            <div class="sidebar-user-icon"
+                                 :style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
 
-                        </div>
-                        <div class="sidebar-user-text" id="userName">
+                            </div>
+                        </template>
+
+                        <div class="sidebar-user-text">
                             <template v-if="chrome.userinfo.attributes">
-                                {{ chrome.userinfo.attributes.name }}
+                                <div class="fullname">{{ chrome.userinfo.attributes.name }}</div>
+                                <div class="handle-text">@{{ chrome.userinfo.attributes.handle }}</div>
                             </template>
                             <template v-else>
                                 Sign in
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index cb9c1e88..cb29aa85 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -283,12 +283,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-sidebar-button > .sidebar-user-icon {
-    width: 22px;
-    height: 22px;
+    width: 26px;
+    height: 26px;
     border-radius: 100%;
-    background: var(--keyColor);
+    background-image: var(--artwork);
     margin: 2px;
     flex: 0 0 auto;
+    box-shadow: var(--mediaItemShadow);
 }
 
 .app-sidebar-button > .sidebar-user-text {
@@ -296,6 +297,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     display: flex;
     font-size: 16px;
     margin: 6px 12px;
+    flex-direction: column;
+}
+
+.app-sidebar-button > .sidebar-user-text .fullname {
+    text-align: left;
+}
+
+.app-sidebar-button > .sidebar-user-text .handle-text {
+    font-size: 12px;
+    opacity: 0.7;
+    text-align: left;
 }
 
 .app-sidebar-content {