Add username near the display name for account pages

client/src/app/+accounts/accounts.component.html

@@ -5,7 +5,10 @@
       <img [src]="account.avatarUrl" alt="Avatar" />
 
       <div class="actor-info">
+        <div class="actor-names">
           <div class="actor-display-name">{{ account.displayName }}</div>
+          <div class="actor-name">{{ account.name }}</div>
+        </div>
         <div class="actor-followers">{{ account.followersCount }} subscribers</div>
       </div>
     </div>

client/src/app/+video-channels/video-channels.component.html

@@ -5,7 +5,9 @@
       <img [src]="videoChannel.avatarUrl" alt="Avatar" />
 
       <div class="actor-info">
+        <div class="actor-names">
           <div class="actor-display-name">{{ videoChannel.displayName }}</div>
+        </div>
         <div class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
       </div>
     </div>

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

client/src/app/my-account/my-account-settings/my-account-settings.component.scss

@@ -11,11 +11,24 @@
   }
 
   .user-info {
-    .user-info-username {
+    .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 {
       font-size: 15px;
     }

client/src/sass/include/_mixins.scss

@@ -344,11 +344,24 @@
       flex-direction: column;
       justify-content: center;
 
+      .actor-names {
+        display: flex;
+        align-items: center;
+
         .actor-display-name {
           font-size: 23px;
           font-weight: $font-bold;
         }
 
+        .actor-name {
+          margin-left: 7px;
+          position: relative;
+          top: 3px;
+          font-size: 14px;
+          color: #777272;
+        }
+      }
+
       .actor-followers {
         font-size: 15px;
       }