Add username near the display name for account pages

2 files changed, 20 insertions, 4 deletions

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 {