comment name emphasis for video author

2 files changed, 23 insertions, 4 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
index df996533d..f53852385 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html
@@ -19,7 +19,10 @@
         <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
 
         <div class="comment-account-date">
-          <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a>
+          <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer"
+             class="comment-account"
+             [ngClass]="{ 'video-author': video.account.id === comment.account.id }"
+          >{{ comment.by }}</a>
           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
         </div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 8d5348af4..0f95078c2 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -25,8 +25,6 @@
 
   .comment-avatar {
     @include avatar(36px);
-
-    margin-top: 5px;
   }
 
   .comment {
@@ -49,17 +47,35 @@
       display: flex;
       margin-bottom: 4px;
 
+      .video-author {
+        height: 20px;
+        background-color: #888888;
+        border-radius: 12px;
+        margin-bottom: 2px;
+        max-width: 100%;
+        box-sizing: border-box;
+        flex-direction: row;
+        align-items: center;
+        display: inline-flex;
+        padding-right: 6px;
+        padding-left: 6px;
+        color: white !important;
+      }
+
       .comment-account {
         @include disable-default-a-behaviour;
 
         word-break: break-all;
         color: var(--mainForegroundColor);
         font-weight: $font-bold;
+        font-size: 90%;
       }
 
       .comment-date {
+        font-size: 90%;
         color: $grey-foreground-color;
-        margin-left: 10px;
+        margin-left: 5px;
+        text-decoration: none;
       }
     }