Add username near the display name for account pages

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 549676e5a5fefa1384c44b0ace91d0f790cb462f..c20a7e93ef0292c370f4fa1e22ff9690ca20a523 100644 (file)
--- 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 098e1eed4be7c05c1d68882973b234a2b75c6574..6f14e62a1f700b026d5075b5f65b6a9aef12cf95 100644 (file)
--- 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 e655b9d96a235da8a0ac699829e6f0fe30764288..0fcc7782eabba17f90c94057ac4b1947da6ceb1e 100644 (file)
--- 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 85079d6208be8eec50315061daf52db816f27f11..ec0d40b93d925cb51c241dff0e916fb6c7e525b4 100644 (file)
--- 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 c43bd9803b49cb451ce3d839d5854bf2619a5968..675cccfebea5960d802f1b6a8033e82ee13d70d5 100644 (file)
--- 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 {