From 7de6afdf542da6968d3f412df9c3318ba19ad229 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 26 Apr 2018 10:22:48 +0200
Subject: Add username near the display name for account pages

---
 .../my-account-settings.component.html                |  5 ++++-
 .../my-account-settings.component.scss                | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

(limited to 'client/src/app/my-account/my-account-settings')

diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.html b/client/src/app/my-account/my-account-settings/my-account-settings.component.html
index e655b9d96..0fcc7782e 100644
--- a/client/src/app/my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.html
@@ -2,7 +2,10 @@
   <img [src]="user.accountAvatarUrl" alt="Avatar" />
 
   <div class="user-info">
-    <div class="user-info-username">{{ user.username }}</div>
+    <div class="user-info-names">
+      <div class="user-info-display-name">{{ user.account.displayName }}</div>
+      <div class="user-info-username">{{ user.username }}</div>
+    </div>
     <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
   </div>
 </div>
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
index 85079d620..ec0d40b93 100644
--- a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
@@ -11,9 +11,22 @@
   }
 
   .user-info {
-    .user-info-username {
-      font-size: 20px;
-      font-weight: $font-bold;
+    .user-info-names {
+      display: flex;
+      align-items: center;
+
+      .user-info-display-name {
+        font-size: 20px;
+        font-weight: $font-bold;
+      }
+
+      .user-info-username {
+        margin-left: 7px;
+        position: relative;
+        top: 2px;
+        font-size: 14px;
+        color: #777272;
+      }
     }
 
     .user-info-followers {
-- 
cgit v1.2.3