Add username near the display name for account pages

5 files changed, 43 insertions, 9 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 549676e5a..c20a7e93e 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -5,7 +5,10 @@
       <img [src]="account.avatarUrl" alt="Avatar" />
 
       <div class="actor-info">
-        <div class="actor-display-name">{{ account.displayName }}</div>
+        <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>
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 098e1eed4..6f14e62a1 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/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-display-name">{{ videoChannel.displayName }}</div>
+        <div class="actor-names">
+          <div class="actor-display-name">{{ videoChannel.displayName }}</div>
+        </div>
         <div class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
       </div>
     </div>
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 {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index c43bd9803..675cccfeb 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -344,9 +344,22 @@
       flex-direction: column;
       justify-content: center;
 
-      .actor-display-name {
-        font-size: 23px;
-        font-weight: $font-bold;
+      .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 {