3 files changed, 21 insertions, 2 deletions

diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index be5d41f3b..4475178c7 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -62,7 +62,11 @@
       </td>
 
       <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
-      <td i18n>{{ videoChangeOwnership.status }}</td>
+
+      <td>
+        <span class="badge" [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
+      </td>
+
       <td class="action-cell">
         <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
           <my-button i18n-label label="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
index c04e26374..7cac9c9f3 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
@@ -5,6 +5,10 @@
   @include chip;
 }
 
+.badge {
+  @include table-badge;
+}
+
 .video-table-video {
   display: inline-flex;
 
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index 98360dfb3..7473470aa 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -2,7 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
 import { VideoOwnershipService, Actor, Video, Account } from '@app/shared/shared-main'
-import { VideoChangeOwnership } from '@shared/models'
+import { VideoChangeOwnership, VideoChangeOwnershipStatus } from '@shared/models'
 import { MyAccountAcceptOwnershipComponent } from './my-account-accept-ownership/my-account-accept-ownership.component'
 import { getAbsoluteAPIUrl } from '@app/helpers'
 
@@ -34,6 +34,17 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
     return 'MyAccountOwnershipComponent'
   }
 
+  getStatusClass (status: VideoChangeOwnershipStatus) {
+    switch (status) {
+      case VideoChangeOwnershipStatus.ACCEPTED:
+        return 'badge-green'
+      case VideoChangeOwnershipStatus.REFUSED:
+        return 'badge-red'
+      default:
+        return 'badge-yellow'
+    }
+  }
+
   switchToDefaultAvatar ($event: Event) {
     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }