From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 16 Jan 2019 16:05:40 +0100
Subject: [PATCH] Refactor how we use icons

Inject them in an angular component so we can easily change their color
---
 client/package.json                           |   1 -
 .../contact-admin-modal.component.html        |   2 +-
 .../moderation-comment-modal.component.html   |   5 +-
 .../moderation-comment-modal.component.ts     |   4 +-
 .../users/user-list/user-list.component.html  |   2 +-
 .../users/user-list/user-list.component.scss  |   4 +-
 .../my-account-history.component.scss         |   4 +-
 .../my-account-notifications.component.html   |  10 +-
 .../my-account-notifications.component.scss   |   4 +-
 ...my-account-accept-ownership.component.html |   3 +-
 .../my-account-video-channels.component.html  |   2 +-
 .../my-account-video-channels.component.scss  |   2 +-
 .../my-account-videos.component.html          |   6 +-
 .../my-account-videos.component.scss          |  11 +-
 .../video-change-ownership.component.html     |   3 +-
 client/src/app/app.component.html             |   2 +
 client/src/app/core/confirm/index.ts          |   1 -
 client/src/app/core/core.module.ts            |   4 +-
 client/src/app/header/header.component.html   |   2 +-
 client/src/app/header/header.component.scss   |  10 +-
 client/src/app/login/login.component.html     |   3 +-
 .../menu/avatar-notification.component.scss   |   2 +-
 .../app/menu/language-chooser.component.html  |   2 +-
 client/src/app/search/search.component.scss   |   4 +-
 client/src/app/shared/actor/actor.model.ts    |   2 +-
 .../buttons/action-dropdown.component.html    |   2 +-
 .../buttons/action-dropdown.component.scss    |   9 +-
 .../app/shared/buttons/button.component.html  |   2 +-
 .../app/shared/buttons/button.component.scss  |  34 +---
 .../app/shared/buttons/button.component.ts    |   3 +-
 .../buttons/delete-button.component.html      |   2 +-
 .../shared/buttons/edit-button.component.html |   2 +-
 .../confirm/confirm.component.html            |   3 +-
 .../confirm/confirm.component.scss            |   0
 .../confirm/confirm.component.ts              |   2 +-
 .../shared/icons/global-icon.component.html   |   0
 .../shared/icons/global-icon.component.scss   |   4 +
 .../app/shared/icons/global-icon.component.ts |  47 +++++
 .../src/app/shared/misc/help.component.html   |   4 +-
 .../src/app/shared/misc/help.component.scss   |  19 +-
 .../moderation/user-ban-modal.component.html  |   7 +-
 .../moderation/user-ban-modal.component.ts    |   4 +-
 client/src/app/shared/shared.module.ts        |   8 +-
 .../shared/users/user-notification.model.ts   |  37 ++--
 .../shared/users/user-notification.service.ts |   2 -
 .../users/user-notifications.component.html   |  82 ++++++---
 .../users/user-notifications.component.scss   |  46 +++--
 .../users/user-notifications.component.ts     |  14 +-
 .../src/app/shared/video/feed.component.html  |   9 +-
 .../src/app/shared/video/feed.component.scss  |  17 +-
 .../video/video-miniature.component.scss      |   4 +-
 client/src/app/shared/video/video.model.ts    |   4 +-
 .../video-caption-add-modal.component.html    |   2 +-
 .../shared/video-edit.component.html          |   2 +-
 .../shared/video-edit.component.scss          |  17 +-
 .../video-import-torrent.component.html       |   6 +-
 .../video-import-torrent.component.scss       |  53 +-----
 .../video-import-torrent.component.ts         |   3 +-
 .../video-import-url.component.html           |   6 +-
 .../video-import-url.component.ts             |   2 +-
 ...ort-url.component.scss => video-send.scss} |  29 ++-
 .../video-upload.component.html               |   6 +-
 .../video-upload.component.scss               |  44 +----
 .../video-upload.component.ts                 |   3 +-
 .../+video-edit/video-update.component.html   |   2 +-
 .../comment/video-comment.component.scss      |   6 +-
 .../modal/video-blacklist.component.html      |   2 +-
 .../modal/video-download.component.html       |   2 +-
 .../modal/video-report.component.html         |   2 +-
 .../modal/video-share.component.html          |   2 +-
 .../modal/video-support.component.html        |   2 +-
 .../+video-watch/video-watch.component.html   |  24 +--
 .../+video-watch/video-watch.component.scss   |  80 ++------
 .../images/global/{add.svg => add.html}       |   6 +-
 .../{video/alert.svg => global/alert.html}    |   9 +-
 .../src/assets/images/global/circle-tick.html |  12 ++
 .../assets/images/global/cloud-download.html  |  11 ++
 .../src/assets/images/global/cloud-error.html |  11 ++
 client/src/assets/images/global/cog.html      |   9 +
 .../images/global/{cross.svg => cross.html}   |   6 +-
 .../src/assets/images/global/delete-black.svg |  14 --
 .../src/assets/images/global/delete-white.svg |  14 --
 .../global/{delete-grey.svg => delete.html}   |  14 +-
 .../download.html}                            |   9 +-
 client/src/assets/images/global/edit-grey.svg |  15 --
 .../global/{edit-black.svg => edit.html}      |   9 +-
 .../images/global/{help.svg => help.html}     |   8 +-
 .../{im-with-her.svg => im-with-her.html}     |  13 +-
 client/src/assets/images/global/no.html       |  10 +
 client/src/assets/images/global/sparkle.html  |  11 ++
 .../{syndication.svg => syndication.html}     |   4 +-
 .../images/global/{tick.svg => tick.html}     |   6 +-
 client/src/assets/images/global/undo.html     |   9 +
 client/src/assets/images/global/undo.svg      |  11 --
 client/src/assets/images/global/user-add.html |  11 ++
 .../global/{validate.svg => validate.html}    |   6 +-
 client/src/assets/images/video/blacklist.svg  |  15 --
 .../src/assets/images/video/dislike-white.svg |  14 --
 .../video/{dislike-grey.svg => dislike.html}  |   6 +-
 .../src/assets/images/video/download-grey.svg |  16 --
 .../assets/images/video/download-white.svg    |  16 --
 .../images/video/{heart.svg => heart.html}    |   8 +-
 client/src/assets/images/video/like-white.svg |  15 --
 .../images/video/{like-grey.svg => like.html} |   9 +-
 .../images/video/{more.svg => more.html}      |   6 +-
 .../images/video/{share.svg => share.html}    |   9 +-
 .../upload-white.svg => video/upload.html}    |   9 +-
 client/src/assets/images/video/upload.svg     |  16 --
 client/src/sass/application.scss              |   9 +-
 client/src/sass/include/_mixins.scss          |  49 +++--
 client/src/sass/include/_variables.scss       |   9 +-
 client/yarn.lock                              | 173 ------------------
 server/models/account/user-notification.ts    | 158 ++++++++++++----
 shared/models/actors/actor.model.ts           |   2 +-
 .../models/users/user-notification.model.ts   |  30 ++-
 shared/models/videos/video.model.ts           |   4 +-
 116 files changed, 667 insertions(+), 891 deletions(-)
 rename client/src/app/{core => shared}/confirm/confirm.component.html (87%)
 rename client/src/app/{core => shared}/confirm/confirm.component.scss (100%)
 rename client/src/app/{core => shared}/confirm/confirm.component.ts (96%)
 create mode 100644 client/src/app/shared/icons/global-icon.component.html
 create mode 100644 client/src/app/shared/icons/global-icon.component.scss
 create mode 100644 client/src/app/shared/icons/global-icon.component.ts
 rename client/src/app/videos/+video-edit/video-add-components/{video-import-url.component.scss => video-send.scss} (57%)
 rename client/src/assets/images/global/{add.svg => add.html} (72%)
 rename client/src/assets/images/{video/alert.svg => global/alert.html} (71%)
 create mode 100644 client/src/assets/images/global/circle-tick.html
 create mode 100644 client/src/assets/images/global/cloud-download.html
 create mode 100644 client/src/assets/images/global/cloud-error.html
 create mode 100644 client/src/assets/images/global/cog.html
 rename client/src/assets/images/global/{cross.svg => cross.html} (63%)
 delete mode 100644 client/src/assets/images/global/delete-black.svg
 delete mode 100644 client/src/assets/images/global/delete-white.svg
 rename client/src/assets/images/global/{delete-grey.svg => delete.html} (71%)
 rename client/src/assets/images/{video/download-black.svg => global/download.html} (64%)
 delete mode 100644 client/src/assets/images/global/edit-grey.svg
 rename client/src/assets/images/global/{edit-black.svg => edit.html} (62%)
 rename client/src/assets/images/global/{help.svg => help.html} (84%)
 rename client/src/assets/images/global/{im-with-her.svg => im-with-her.html} (70%)
 create mode 100644 client/src/assets/images/global/no.html
 create mode 100644 client/src/assets/images/global/sparkle.html
 rename client/src/assets/images/global/{syndication.svg => syndication.html} (88%)
 rename client/src/assets/images/global/{tick.svg => tick.html} (63%)
 create mode 100644 client/src/assets/images/global/undo.html
 delete mode 100644 client/src/assets/images/global/undo.svg
 create mode 100644 client/src/assets/images/global/user-add.html
 rename client/src/assets/images/global/{validate.svg => validate.html} (69%)
 delete mode 100644 client/src/assets/images/video/blacklist.svg
 delete mode 100644 client/src/assets/images/video/dislike-white.svg
 rename client/src/assets/images/video/{dislike-grey.svg => dislike.html} (77%)
 delete mode 100644 client/src/assets/images/video/download-grey.svg
 delete mode 100644 client/src/assets/images/video/download-white.svg
 rename client/src/assets/images/video/{heart.svg => heart.html} (66%)
 delete mode 100644 client/src/assets/images/video/like-white.svg
 rename client/src/assets/images/video/{like-grey.svg => like.html} (61%)
 rename client/src/assets/images/video/{more.svg => more.html} (76%)
 rename client/src/assets/images/video/{share.svg => share.html} (62%)
 rename client/src/assets/images/{header/upload-white.svg => video/upload.html} (69%)
 delete mode 100644 client/src/assets/images/video/upload.svg

diff --git a/client/package.json b/client/package.json
index 5fe1f3d5f..248c390fc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -154,7 +154,6 @@
     "videojs-contextmenu-ui": "^5.0.0",
     "videojs-dock": "^2.0.2",
     "videojs-hotkeys": "^0.2.21",
-    "webpack": "^4.17.1",
     "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cli": "^3.0.8",
     "webtorrent": "https://github.com/webtorrent/webtorrent#e9b209c7970816fc29e0cc871157a4918d66001d",
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 2b3fb32f3..b2cbd0873 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Contact {{ instanceName }} administrator</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
index 952235c55..303a788d2 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Moderation comment</h4>
-    <span class="close" aria-hidden="true" (click)="hideModerationCommentModal()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
@@ -19,7 +20,7 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hideModerationCommentModal()">Cancel</span>
+        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
 
         <input
           type="submit" i18n-value value="Update this comment" class="action-button-submit"
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
index bebcb4207..f915978ee 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@@ -45,7 +45,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
     })
   }
 
-  hideModerationCommentModal () {
+  hide () {
     this.abuseToComment = undefined
     this.openedModal.close()
     this.form.reset()
@@ -60,7 +60,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
             this.notifier.success(this.i18n('Comment updated.'))
 
             this.commentUpdated.emit(moderationComment)
-            this.hideModerationCommentModal()
+            this.hide()
           },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 8c03a924b..69a4616a3 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -2,7 +2,7 @@
   <div i18n class="form-sub-title">Users list</div>
 
   <a class="add-button" routerLink="/admin/users/create">
-    <span class="icon icon-add"></span>
+    <my-global-icon iconName="add"></my-global-icon>
     <ng-container i18n>Create user</ng-container>
   </a>
 </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index f235769f0..5274be01c 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .add-button {
-  @include create-button('../../../../assets/images/global/add.svg');
+  @include create-button;
 }
 
 tr.banned {
@@ -23,4 +23,4 @@ tr.banned {
   input {
     @include peertube-input-text(250px);
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index 82150cbe3..e7c6863f1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -65,10 +65,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 14px;
-      color: #585858;
+      color: $grey-foreground-color;
 
       &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
       }
     }
   }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index b98a1087e..d518b22ec 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,7 +1,13 @@
 <div class="header">
-  <a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
+  <a routerLink="/my-account/settings" fragment="notifications" i18n>
+    <my-global-icon iconName="cog"></my-global-icon>
+    Notification preferences
+  </a>
 
-  <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+  <button (click)="markAllAsRead()" i18n>
+    <my-global-icon iconName="circle-tick"></my-global-icon>
+    Mark all as read
+  </button>
 </div>
 
 <my-user-notifications #userNotification></my-user-notifications>
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 86ac094c5..43d1f82ab 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -5,16 +5,18 @@
   display: flex;
   justify-content: space-between;
   font-size: 15px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 
   a {
     @include peertube-button-link;
     @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
   }
 
   button {
     @include peertube-button;
     @include grey-button;
+    @include button-with-icon(20px, 3px, -1px);
   }
 }
 
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index fd7d7d23b..674a4e8a2 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal let-close="close" let-dismiss="dismiss">
   <div class="modal-header">
     <h4 i18n class="modal-title">Accept ownership</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
 
   <div class="modal-body" [formGroup]="form">
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index df74b19b6..51db2e75d 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -1,6 +1,6 @@
 <div class="video-channels-header">
   <a class="create-button" routerLink="create">
-    <span class="icon icon-add"></span>
+    <my-global-icon iconName="add"></my-global-icon>
     <ng-container i18n>Create another video channel</ng-container>
   </a>
 </div>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 472cbb723..77fce138b 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .create-button {
-  @include create-button('../../../assets/images/global/add.svg');
+  @include create-button;
 }
 
 /deep/ .action-button {
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index a6911e4bf..69748ef37 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -32,7 +32,7 @@
           </span>
 
           <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
-            <span class="icon icon-delete-white"></span>
+            <my-global-icon iconName="delete"></my-global-icon>
             <ng-container i18n>Delete</ng-container>
           </span>
         </div>
@@ -45,7 +45,7 @@
 
         <my-button i18n-label label="Change ownership"
                    className="action-button-change-ownership"
-                   icon="icon-im-with-her"
+                   icon="im-with-her"
                    (click)="changeOwnership($event, video)"
         ></my-button>
       </div>
@@ -53,4 +53,4 @@
   </div>
 </div>
 
-<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
\ No newline at end of file
+<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index a735562f8..39d0cf2f7 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -23,14 +23,11 @@
     .action-button-delete-selection {
       @include peertube-button;
       @include orange-button;
-    }
-
-    .icon.icon-delete-white {
-      @include icon(21px);
+      @include button-with-icon(21px);
 
-      position: relative;
-      top: -2px;
-      background-image: url('../../../assets/images/global/delete-white.svg');
+      my-global-icon {
+        @include apply-svg-color(#fff);
+      }
     }
   }
 }
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
index 7c0df850d..22f127904 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal let-close="close" let-dismiss="dismiss">
   <div class="modal-header">
     <h4 i18n class="modal-title">Change ownership</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
 
   <div class="modal-body" [formGroup]="form">
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 3a60139e1..dfda556f5 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -37,7 +37,9 @@
 </div>
 
 <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar>
+
 <my-confirm></my-confirm>
+
 <p-toast position="bottom-right">
   <ng-template let-message pTemplate="message">
     <div class="notification-block">
diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts
index 44aabfc13..aca591e1a 100644
--- a/client/src/app/core/confirm/index.ts
+++ b/client/src/app/core/confirm/index.ts
@@ -1,2 +1 @@
-export * from './confirm.component'
 export * from './confirm.service'
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 3bc0e2885..4ef3b1e73 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -8,7 +8,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
 
 import { AuthService } from './auth'
-import { ConfirmComponent, ConfirmService } from './confirm'
+import { ConfirmService } from './confirm'
 import { throwIfAlreadyLoaded } from './module-import-guard'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
 import { ServerService } from './server'
@@ -38,7 +38,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification
   ],
 
   declarations: [
-    ConfirmComponent,
     CheatSheetComponent
   ],
 
@@ -48,7 +47,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification
 
     ToastModule,
 
-    ConfirmComponent,
     CheatSheetComponent
   ],
 
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index c23e0c55d..46a87c79c 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -5,6 +5,6 @@
 <span (click)="doSearch()" class="icon icon-search"></span>
 
 <a class="upload-button" routerLink="/videos/upload">
-  <span class="icon icon-upload"></span>
+  <my-global-icon iconName="upload"></my-global-icon>
   <span i18n class="upload-button-label">Upload</span>
 </a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 2f9820665..cdc457b96 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -40,6 +40,7 @@
 .upload-button {
   @include peertube-button-link;
   @include orange-button;
+  @include button-with-icon(22px, 3px, -1px);
 
   margin-right: 25px;
 
@@ -47,15 +48,6 @@
     margin-right: 0;
   }
 
-  .icon.icon-upload {
-    @include icon(22px);
-
-    background-image: url('../../assets/images/header/upload-white.svg');
-    height: 24px;
-    vertical-align: middle;
-    margin-right: 6px;
-  }
-
   @media screen and (max-width: 600px) {
     margin-right: 10px;
     padding: 0 10px;
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 9b8146624..4efe3fb22 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -55,7 +55,8 @@
 <ng-template #forgotPasswordModal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Forgot your password</h4>
-    <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index 807385022..f6242eeae 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -42,7 +42,7 @@
         justify-content: center;
         font-weight: $font-semibold;
         color: var(--mainForegroundColor);
-        height: 30px;
+        padding: 7px 0;
       }
     }
   }
diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html
index c79609898..a62b33dda 100644
--- a/client/src/app/menu/language-chooser.component.html
+++ b/client/src/app/menu/language-chooser.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Change the language</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
 
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 3e074621b..6de13d276 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -87,10 +87,10 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           font-size: 14px;
-          color: #585858;
+          color: $grey-foreground-color;
 
           &:hover {
-            color: #303030;
+            color: $grey-foreground-hover-color;
           }
         }
       }
diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index 811afb449..adecec1fc 100644
--- a/client/src/app/shared/actor/actor.model.ts
+++ b/client/src/app/shared/actor/actor.model.ts
@@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer {
 
   avatarUrl: string
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
     if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 90651f217..114b1d71f 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -3,7 +3,7 @@
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
     ngbDropdownToggle role="button"
   >
-    <span *ngIf="!label" class="icon icon-action"></span>
+    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
     <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index a4fcceeee..985b2ca88 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -24,14 +24,11 @@
   }
 
   &:hover, &:active, &:focus {
-    background-color: $grey-color;
+    background-color: $grey-background-color;
   }
 
-  .icon-action {
-    @include icon(21px);
-
-    background-image: url('../../../assets/images/video/more.svg');
-    top: -1px;
+  .more-icon {
+    width: 21px;
   }
 
   &.small {
diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
index 87a8daccf..b6df67102 100644
--- a/client/src/app/shared/buttons/button.component.html
+++ b/client/src/app/shared/buttons/button.component.html
@@ -1,4 +1,4 @@
 <span class="action-button" [ngClass]="className" [title]="getTitle()">
-  <span class="icon" [ngClass]="icon"></span>
+  <my-global-icon [iconName]="icon"></my-global-icon>
   <span class="button-label">{{ label }}</span>
 </span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 168102f09..be41669cd 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -3,41 +3,19 @@
 
 .action-button {
   @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
 
   font-size: 15px;
   font-weight: $font-semibold;
-  color: #585858;
-  background-color: #E5E5E5;
+  color: $grey-foreground-color;
+  background-color: $grey-background-color;
 
   &:hover {
-    background-color: #EFEFEF;
+    background-color: $grey-background-hover-color;
   }
 
-  .icon {
-    @include icon(21px);
-
-    position: relative;
-    top: -2px;
-
-    &.icon-edit {
-      background-image: url('../../../assets/images/global/edit-grey.svg');
-    }
-
-    &.icon-delete-grey {
-      background-image: url('../../../assets/images/global/delete-grey.svg');
-    }
-
-    &.icon-im-with-her {
-      background-image: url('../../../assets/images/global/im-with-her.svg');
-    }
-
-    &.icon-tick {
-      background-image: url('../../../assets/images/global/tick.svg');
-    }
-
-    &.icon-cross {
-      background-image: url('../../../assets/images/global/cross.svg');
-    }
+  my-global-icon {
+    @include apply-svg-color($grey-foreground-color);
   }
 }
 
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index 1a1162f09..a91e9c7eb 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/icons/global-icon.component'
 
 @Component({
   selector: 'my-button',
@@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core'
 export class ButtonComponent {
   @Input() label = ''
   @Input() className: string = undefined
-  @Input() icon: string = undefined
+  @Input() icon: GlobalIconName = undefined
   @Input() title: string = undefined
 
   getTitle () {
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index 6c55d8104..4d12a84c0 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,5 +1,5 @@
 <span class="action-button action-button-delete" [title]="getTitle()" role="button">
-  <span class="icon icon-delete-grey"></span>
+  <my-global-icon iconName="delete"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span class="button-label" i18n *ngIf="!label">Delete</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index cecb780f3..da3addbae 100644
--- a/client/src/app/shared/buttons/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,5 +1,5 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
-  <span class="icon icon-edit"></span>
+  <my-global-icon iconName="edit"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span i18n class="button-label" *ngIf="!label">Edit</span>
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
similarity index 87%
rename from client/src/app/core/confirm/confirm.component.html
rename to client/src/app/shared/confirm/confirm.component.html
index 43f0c6190..65df1cd4d 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -2,7 +2,8 @@
 
   <div class="modal-header">
     <h4 class="modal-title">{{ title }}</h4>
-    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
 
   <div class="modal-body" >
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss
similarity index 100%
rename from client/src/app/core/confirm/confirm.component.scss
rename to client/src/app/shared/confirm/confirm.component.scss
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
similarity index 96%
rename from client/src/app/core/confirm/confirm.component.ts
rename to client/src/app/shared/confirm/confirm.component.ts
index 5138b7848..63c163da6 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
-import { ConfirmService } from './confirm.service'
+import { ConfirmService } from '@app/core/confirm/confirm.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss
new file mode 100644
index 000000000..6805fb6f7
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.scss
@@ -0,0 +1,4 @@
+/deep/ svg {
+  width: inherit;
+  height: inherit;
+}
diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts
new file mode 100644
index 000000000..5b9377e3e
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.ts
@@ -0,0 +1,47 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+
+const icons = {
+  'add': require('../../../assets/images/global/add.html'),
+  'syndication': require('../../../assets/images/global/syndication.html'),
+  'help': require('../../../assets/images/global/help.html'),
+  'sparkle': require('../../../assets/images/global/sparkle.html'),
+  'alert': require('../../../assets/images/global/alert.html'),
+  'cloud-error': require('../../../assets/images/global/cloud-error.html'),
+  'user-add': require('../../../assets/images/global/user-add.html'),
+  'no': require('../../../assets/images/global/no.html'),
+  'cloud-download': require('../../../assets/images/global/cloud-download.html'),
+  'undo': require('../../../assets/images/global/undo.html'),
+  'circle-tick': require('../../../assets/images/global/circle-tick.html'),
+  'cog': require('../../../assets/images/global/cog.html'),
+  'download': require('../../../assets/images/global/download.html'),
+  'edit': require('../../../assets/images/global/edit.html'),
+  'im-with-her': require('../../../assets/images/global/im-with-her.html'),
+  'delete': require('../../../assets/images/global/delete.html'),
+  'cross': require('../../../assets/images/global/cross.html'),
+  'validate': require('../../../assets/images/global/validate.html'),
+  'dislike': require('../../../assets/images/video/dislike.html'),
+  'heart': require('../../../assets/images/video/heart.html'),
+  'like': require('../../../assets/images/video/like.html'),
+  'more': require('../../../assets/images/video/more.html'),
+  'share': require('../../../assets/images/video/share.html'),
+  'upload': require('../../../assets/images/video/upload.html')
+}
+
+export type GlobalIconName = keyof typeof icons
+
+@Component({
+  selector: 'my-global-icon',
+  template: '',
+  styleUrls: [ './global-icon.component.scss' ]
+})
+export class GlobalIconComponent implements OnInit {
+  @Input() iconName: GlobalIconName
+
+  constructor (private el: ElementRef) {}
+
+  ngOnInit () {
+    const nativeElement = this.el.nativeElement
+
+    nativeElement.innerHTML = icons[this.iconName]
+  }
+}
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 08a2fc367..444425c9f 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -25,4 +25,6 @@
   [autoClose]="true"
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
-></span>
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 047e53fab..4565d457a 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -2,13 +2,15 @@
 @import '_mixins';
 
 .help-tooltip-button {
-  @include icon(17px);
-
-  position: relative;
-  top: -2px;
-  background-image: url('../../../assets/images/global/help.svg');
+  cursor: pointer;
   border: none;
-  margin: 5px;
+
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+  }
 }
 
 /deep/ {
@@ -24,8 +26,13 @@
       color: #000;
       box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
 
+      p:last-child {
+        margin-bottom: 0;
+      }
+
       ul {
         padding-left: 20px;
+        margin-bottom: 0;
       }
     }
   }
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index fa5cb7404..f38ea543d 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Ban</h4>
-    <span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
@@ -19,7 +20,7 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hideBanUserModal()">Cancel</span>
+        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
 
         <input
           type="submit" i18n-value value="Ban this user" class="action-button-submit"
@@ -29,4 +30,4 @@
     </form>
   </div>
 
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index f755ba0e8..942765301 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -42,7 +42,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
     this.openedModal = this.modalService.open(this.modal)
   }
 
-  hideBanUserModal () {
+  hide () {
     this.usersToBan = undefined
     this.openedModal.close()
   }
@@ -60,7 +60,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
           this.notifier.success(message)
 
           this.userBanned.emit(this.usersToBan)
-          this.hideBanUserModal()
+          this.hide()
         },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 384f5d722..6f8625c7e 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -67,6 +67,8 @@ import { UserNotificationService } from '@app/shared/users/user-notification.ser
 import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
 import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
+import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
+import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
 
 @NgModule({
   imports: [
@@ -110,7 +112,9 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha
     UserBanModalComponent,
     UserModerationDropdownComponent,
     TopMenuDropdownComponent,
-    UserNotificationsComponent
+    UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent
   ],
 
   exports: [
@@ -151,6 +155,8 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha
     UserModerationDropdownComponent,
     TopMenuDropdownComponent,
     UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 5ff816fb8..c5996a8a1 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -1,4 +1,5 @@
-import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
+import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { Actor } from '@app/shared/actor/actor.model'
 
 export class UserNotification implements UserNotificationServer {
   id: number
@@ -6,10 +7,7 @@ export class UserNotification implements UserNotificationServer {
   read: boolean
 
   video?: VideoInfo & {
-    channel: {
-      id: number
-      displayName: string
-    }
+    channel: ActorInfo & { avatarUrl?: string }
   }
 
   videoImport?: {
@@ -23,10 +21,7 @@ export class UserNotification implements UserNotificationServer {
   comment?: {
     id: number
     threadId: number
-    account: {
-      id: number
-      displayName: string
-    }
+    account: ActorInfo & { avatarUrl?: string }
     video: VideoInfo
   }
 
@@ -40,18 +35,11 @@ export class UserNotification implements UserNotificationServer {
     video: VideoInfo
   }
 
-  account?: {
-    id: number
-    displayName: string
-    name: string
-  }
+  account?: ActorInfo & { avatarUrl?: string }
 
   actorFollow?: {
     id: number
-    follower: {
-      name: string
-      displayName: string
-    }
+    follower: ActorInfo & { avatarUrl?: string }
     following: {
       type: 'account' | 'channel'
       name: string
@@ -76,12 +64,22 @@ export class UserNotification implements UserNotificationServer {
     this.read = hash.read
 
     this.video = hash.video
+    if (this.video) this.setAvatarUrl(this.video.channel)
+
     this.videoImport = hash.videoImport
+
     this.comment = hash.comment
+    if (this.comment) this.setAvatarUrl(this.comment.account)
+
     this.videoAbuse = hash.videoAbuse
+
     this.videoBlacklist = hash.videoBlacklist
+
     this.account = hash.account
+    if (this.account) this.setAvatarUrl(this.account)
+
     this.actorFollow = hash.actorFollow
+    if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower)
 
     this.createdAt = hash.createdAt
     this.updatedAt = hash.updatedAt
@@ -150,4 +148,7 @@ export class UserNotification implements UserNotificationServer {
     return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
   }
 
+  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) {
+    actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
+  }
 }
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index 67ed8f74e..f8a30955d 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -15,8 +15,6 @@ export class UserNotificationService {
   static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
   static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
 
-  private socket: SocketIOClient.Socket
-
   constructor (
     private auth: AuthService,
     private authHttp: HttpClient,
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 86379d941..caa518e7f 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -1,61 +1,101 @@
 <div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
 
 <div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
-  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
 
-    <div [ngSwitch]="notification.type">
+    <ng-container [ngSwitch]="notification.type">
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
-        {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+
+        <div class="message">
+          {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        <my-global-icon iconName="undo"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        <my-global-icon iconName="no"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        <my-global-icon iconName="alert"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
-        {{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          {{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        <my-global-icon iconName="sparkle"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        <my-global-icon iconName="cloud-download"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        <my-global-icon iconName="cloud-error"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
-        User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        <my-global-icon iconName="user-add"></my-global-icon>
+
+        <div class="message">
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
 
-        <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">
-          your channel {{ notification.actorFollow.following.displayName }}
-        </ng-container>
-        <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+
+          <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">your channel {{ notification.actorFollow.following.displayName }}</ng-container>
+          <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
-        {{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          {{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        </div>
       </ng-container>
-    </div>
+    </ng-container>
 
-    <div i18n title="Mark as read" class="mark-as-read">
-      <div class="glyphicon glyphicon-ok" (click)="markAsRead(notification)"></div>
-    </div>
+    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
   </div>
 </div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 0ae26ea39..315d504c9 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .no-notification {
   display: flex;
   justify-content: center;
@@ -7,31 +10,42 @@
 
 .notification {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   font-size: inherit;
-  padding: 15px 10px;
+  padding: 15px 5px 15px 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.10);
 
-  .mark-as-read {
-    min-width: 35px;
+  &.unread {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  my-global-icon {
+    width: 24px;
+    margin-right: 11px;
+    margin-left: 3px;
 
-    .glyphicon {
-      display: none;
-      cursor: pointer;
-      color: rgba(20, 20, 20, 0.5)
-    }
+    @include apply-svg-color(#333);
   }
 
-  &.unread {
-    background-color: rgba(0, 0, 0, 0.05);
+  .avatar {
+    @include avatar(30px);
+
+    margin-right: 10px;
+  }
 
-    &:hover .mark-as-read .glyphicon {
-      display: block;
+  .message {
+    flex-grow: 1;
 
-      &:hover {
-        color: rgba(20, 20, 20, 0.8);
-      }
+    a {
+      font-weight: $font-semibold;
     }
   }
+
+  .from-date {
+    font-size: 0.85em;
+    color: $grey-foreground-color;
+    padding-left: 5px;
+    min-width: 70px;
+    text-align: right;
+  }
 }
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
index e3913ba56..b5f9fd399 100644
--- a/client/src/app/shared/users/user-notifications.component.ts
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -20,11 +20,7 @@ export class UserNotificationsComponent implements OnInit {
   // So we can access it in the template
   UserNotificationType = UserNotificationType
 
-  componentPagination: ComponentPagination = {
-    currentPage: 1,
-    itemsPerPage: this.itemsPerPage,
-    totalItems: null
-  }
+  componentPagination: ComponentPagination
 
   constructor (
     private userNotificationService: UserNotificationService,
@@ -32,6 +28,12 @@ export class UserNotificationsComponent implements OnInit {
   ) { }
 
   ngOnInit () {
+    this.componentPagination = {
+      currentPage: 1,
+      itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
+      totalItems: null
+    }
+
     this.loadMoreNotifications()
   }
 
@@ -58,6 +60,8 @@ export class UserNotificationsComponent implements OnInit {
   }
 
   markAsRead (notification: UserNotification) {
+    if (notification.read) return
+
     this.userNotificationService.markAsRead(notification)
         .subscribe(
           () => {
diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html
index 16116ba88..f7624ec01 100644
--- a/client/src/app/shared/video/feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,10 +1,11 @@
 <div class="video-feed">
-  <span
+  <my-global-icon
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
-    class="icon icon-syndication" role="button"
-  ></span>
+    class="icon-syndication" role="button" iconName="syndication"
+  >
+  </my-global-icon>
 
   <ng-template #feedsList>
     <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
   </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index 385764be0..ed1dc17d3 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -1,3 +1,4 @@
+@import '_variables';
 @import '_mixins';
 
 .video-feed {
@@ -6,14 +7,12 @@
     display: block;
   }
 
-  .icon {
-    @include icon(12px);
+  my-global-icon {
+    cursor: pointer;
+    width: 12px;
+    position: relative;
+    top: -2px;
 
-    &.icon-syndication {
-      position: relative;
-      top: -2px;
-      background-color: var(--mainForegroundColor);
-      mask-image: url('../../../assets/images/global/syndication.svg');
-    }
+    @include apply-svg-color(var(--mainForegroundColor))
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 895879adc..f44bdf9a9 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -50,10 +50,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 13px;
-      color: #585858;
+      color: $grey-foreground-color;
 
       &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
       }
     }
   }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index b92c96450..6ea83d13b 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -53,7 +53,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   channel: {
@@ -63,7 +63,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   userHistory?: {
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
index 30aefdbfc..19043eee6 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -3,7 +3,7 @@
 
     <div class="modal-header">
       <h4 i18n class="modal-title">Add caption</h4>
-      <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+      <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
     </div>
 
     <div class="modal-body">
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index bd52d686a..092c0e862 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -143,7 +143,7 @@
 
           <div class="captions-header">
             <a (click)="openAddCaptionModal()" class="create-caption">
-              <span class="icon icon-add"></span>
+              <my-global-icon iconName="add"></my-global-icon>
               <ng-container i18n>Add another caption</ng-container>
             </a>
           </div>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 25db8e8ed..cc32fb254 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -42,7 +42,7 @@ my-peertube-checkbox {
     text-align: right;
 
     .create-caption {
-      @include create-button('../../../../assets/images/global/add.svg');
+      @include create-button;
     }
   }
 
@@ -100,13 +100,14 @@ my-peertube-checkbox {
     display: inline-block;
     margin-right: 25px;
 
-    color: #585858;
+    color: $grey-foreground-color;
     font-size: 15px;
   }
 
   .submit-button {
     @include peertube-button;
     @include orange-button;
+    @include button-with-icon(20px, 1px);
 
     display: inline-block;
 
@@ -119,16 +120,6 @@ my-peertube-checkbox {
       color: inherit;
       font-weight: $font-semibold;
     }
-
-    .icon.icon-validate {
-      @include icon(20px);
-
-      cursor: inherit;
-      position: relative;
-      top: -1px;
-      margin-right: 4px;
-      background-image: url('../../../../assets/images/global/validate.svg');
-    }
   }
 }
 
@@ -202,7 +193,7 @@ p-calendar {
       top: -1px;
       height: auto !important;
       vertical-align: middle !important;
-      fill: #585858 !important;
+      fill: $grey-foreground-color !important;
     }
 
     &:hover {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index 11a81ad66..28eb143c9 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!hasImportedVideo" class="upload-video-container">
-  <div class="import-video-torrent">
-    <div class="icon icon-upload"></div>
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
     <div class="button-file">
       <span i18n>Select the torrent to import</span>
@@ -66,7 +66,7 @@
        (click)="updateSecondStep()"
        [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
     >
-      <span class="icon icon-validate"></span>
+      <my-global-icon iconName="validate"></my-global-icon>
       <input type="button" i18n-value value="Update" />
     </div>
   </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 00626cd7b..6d59ed834 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -1,45 +1,7 @@
 @import 'variables';
 @import 'mixins';
 
-$width-size: 190px;
-
-.peertube-select-container {
-  @include peertube-select-container($width-size);
-}
-
-.alert.alert-danger {
-  text-align: center;
-
-  & > div {
-    font-weight: $font-semibold;
-  }
-}
-
-.import-video-torrent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .icon.icon-upload {
-    @include icon(90px);
-    margin-bottom: 25px;
-    cursor: default;
-
-    background-image: url('../../../../assets/images/video/upload.svg');
-  }
-
-  .button-file {
-    @include peertube-button-file(auto);
-
-    min-width: 190px;
-  }
-
-  .button-file-extension {
-    display: block;
-    font-size: 12px;
-    margin-top: 5px;
-  }
-
+.first-step-block {
   .torrent-or-magnet {
     margin: 10px 0;
   }
@@ -47,19 +9,6 @@ $width-size: 190px;
   .form-group-magnet-uri {
     margin-bottom: 40px;
   }
-
-  input[type=text] {
-    @include peertube-input-text($width-size);
-    display: block;
-  }
-
-  input[type=button] {
-    @include peertube-button;
-    @include orange-button;
-
-    width: $width-size;
-    margin-top: 30px;
-  }
 }
 
 
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 63db06919..307806bb9 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -18,7 +18,8 @@ import { scrollToTop } from '@app/shared/misc/utils'
   templateUrl: './video-import-torrent.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
-    './video-import-torrent.component.scss'
+    './video-import-torrent.component.scss',
+    './video-send.scss'
   ]
 })
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index 533446672..3550c3585 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!hasImportedVideo" class="upload-video-container">
-  <div class="import-video-url">
-    <div class="icon icon-upload"></div>
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
     <div class="form-group">
       <label i18n for="targetUrl">URL</label>
@@ -59,7 +59,7 @@
        (click)="updateSecondStep()"
        [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
     >
-      <span class="icon icon-validate"></span>
+      <my-global-icon iconName="validate"></my-global-icon>
       <input type="button" i18n-value value="Update" />
     </div>
   </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
index a1810b7a0..257c6e5db 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -18,7 +18,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
   templateUrl: './video-import-url.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
-    './video-import-url.component.scss'
+    './video-send.scss'
   ]
 })
 export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
similarity index 57%
rename from client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss
rename to client/src/app/videos/+video-edit/video-add-components/video-send.scss
index e907edc70..8769dd302 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
@@ -3,10 +3,6 @@
 
 $width-size: 190px;
 
-.peertube-select-container {
-  @include peertube-select-container($width-size);
-}
-
 .alert.alert-danger {
   text-align: center;
 
@@ -15,17 +11,20 @@ $width-size: 190px;
   }
 }
 
-.import-video-url {
+.first-step-block {
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  .icon.icon-upload {
-    @include icon(90px);
+  .upload-icon {
+    width: 90px;
     margin-bottom: 25px;
-    cursor: default;
 
-    background-image: url('../../../../assets/images/video/upload.svg');
+    @include apply-svg-color(#C6C6C6);
+  }
+
+  .peertube-select-container {
+    @include peertube-select-container($width-size);
   }
 
   input[type=text] {
@@ -40,6 +39,16 @@ $width-size: 190px;
     width: $width-size;
     margin-top: 30px;
   }
-}
 
+  .button-file {
+    @include peertube-button-file(auto);
 
+    min-width: 190px;
+  }
+
+  .button-file-extension {
+    display: block;
+    font-size: 12px;
+    margin-top: 5px;
+  }
+}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index 826e54d25..b252cd60a 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!isUploadingVideo" class="upload-video-container">
-  <div class="upload-video">
-    <div class="icon icon-upload"></div>
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
     <div class="button-file">
       <span i18n>Select the file to upload</span>
@@ -61,7 +61,7 @@
        (click)="updateSecondStep()"
        [ngClass]="{ disabled: isPublishingButtonDisabled() }"
     >
-      <span class="icon icon-validate"></span>
+      <my-global-icon iconName="validate"></my-global-icon>
       <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" />
     </div>
   </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index 4b2c86ae9..8adf8f169 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,47 +1,9 @@
 @import 'variables';
 @import 'mixins';
 
-.peertube-select-container {
-  @include peertube-select-container(190px);
-}
-
-.alert.alert-danger {
-  text-align: center;
-
-  & > div {
-    font-weight: $font-semibold;
-  }
-}
-
-.upload-video {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .form-group-channel {
-    margin-bottom: 20px;
-    margin-top: 35px;
-  }
-
-  .icon.icon-upload {
-    @include icon(90px);
-    margin-bottom: 25px;
-    cursor: default;
-
-    background-image: url('../../../../assets/images/video/upload.svg');
-  }
-
-  .button-file {
-    @include peertube-button-file(auto);
-
-    min-width: 190px;
-  }
-
-  .button-file-extension {
-    display: block;
-    font-size: 12px;
-    margin-top: 5px;
-  }
+.first-step-block .form-group-channel {
+  margin-bottom: 20px;
+  margin-top: 35px;
 }
 
 .upload-progress-cancel {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
index aa40f8781..e4d54b654 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
@@ -20,7 +20,8 @@ import { scrollToTop } from '@app/shared/misc/utils'
   templateUrl: './video-upload.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
-    './video-upload.component.scss'
+    './video-upload.component.scss',
+    './video-send.scss'
   ]
 })
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 0457778c0..4992bb369 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -13,7 +13,7 @@
 
     <div class="submit-container">
       <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
-        <span class="icon icon-validate"></span>
+        <my-global-icon iconName="validate"></my-global-icon>
         <input type="button" i18n-value value="Update" />
       </div>
     </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 84da5727e..731ecbf8f 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
@@ -41,7 +41,7 @@
       }
 
       .comment-date {
-        color: #585858;
+        color: $grey-foreground-color;
         margin-left: 10px;
       }
     }
@@ -69,7 +69,7 @@
 
       .comment-action-reply,
       .comment-action-delete {
-        color: #585858;
+        color: $grey-foreground-color;
         cursor: pointer;
         margin-right: 10px;
 
@@ -108,4 +108,4 @@
   .root-comment {
     font-size: 14px;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
index 83600fa81..1a87bdcd4 100644
--- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Blacklist video</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html
index f46f92a17..2bb5d6d37 100644
--- a/client/src/app/videos/+video-watch/modal/video-download.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Download video</h4>
-    <span class="close" aria-hidden="true" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html
index 733c01be0..b9434da26 100644
--- a/client/src/app/videos/+video-watch/modal/video-report.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Report video</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 301f67f2d..9f3c37fe8 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Share</h4>
-    <span class="close" aria-hidden="true" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html
index 00c304709..2a05224a8 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Support</h4>
-    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 770785d02..709eb91a8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -53,55 +53,57 @@
                   <div
                     *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
                     class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
+                    i18n-title title="Like this video"
                   >
-                    <span class="icon icon-like" i18n-title title="Like this video" ></span>
+                    <my-global-icon iconName="like"></my-global-icon>
                   </div>
 
                   <div
                     *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
                     class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
+                    i18n-title title="Dislike this video"
                   >
-                    <span class="icon icon-dislike" i18n-title title="Dislike this video"></span>
+                    <my-global-icon iconName="dislike"></my-global-icon>
                   </div>
 
                   <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
-                    <span class="icon icon-support"></span>
+                    <my-global-icon iconName="heart"></my-global-icon>
                     <span class="icon-text" i18n>Support</span>
                   </div>
 
                   <div (click)="showShareModal()" class="action-button action-button-share" role="button">
-                    <span class="icon icon-share"></span>
+                    <my-global-icon iconName="share"></my-global-icon>
                     <span class="icon-text" i18n>Share</span>
                   </div>
 
                   <div class="action-more" ngbDropdown placement="top" role="button">
                     <div class="action-button" ngbDropdownToggle role="button">
-                      <span class="icon icon-more"></span>
+                      <my-global-icon class="more-icon" iconName="more"></my-global-icon>
                     </div>
 
                     <div ngbDropdownMenu>
                       <a class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)">
-                        <span class="icon icon-download"></span> <ng-container i18n>Download</ng-container>
+                        <my-global-icon iconName="download"></my-global-icon> <ng-container i18n>Download</ng-container>
                       </a>
 
                       <a *ngIf="isUserLoggedIn()" class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)">
-                        <span class="icon icon-alert"></span> <ng-container i18n>Report</ng-container>
+                        <my-global-icon iconName="alert"></my-global-icon> <ng-container i18n>Report</ng-container>
                       </a>
 
                       <a *ngIf="isVideoUpdatable()" class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]">
-                        <span class="icon icon-edit"></span> <ng-container i18n>Update</ng-container>
+                        <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Update</ng-container>
                       </a>
 
                       <a *ngIf="isVideoBlacklistable()" class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="showBlacklistModal($event)">
-                        <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container>
+                        <my-global-icon iconName="no"></my-global-icon> <ng-container i18n>Blacklist</ng-container>
                       </a>
 
                       <a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)">
-                        <span class="icon icon-unblacklist"></span> <ng-container i18n>Unblacklist</ng-container>
+                        <my-global-icon iconName="undo"></my-global-icon> <ng-container i18n>Unblacklist</ng-container>
                       </a>
 
                       <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)">
-                        <span class="icon icon-delete"></span> <ng-container i18n>Delete</ng-container>
+                        <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete</ng-container>
                       </a>
                     </div>
                   </div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 2586a2204..b03ed197d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -183,6 +183,8 @@ $other-videos-width: 260px;
           .action-button {
             @include peertube-button;
             @include grey-button;
+            @include button-with-icon(21px, 0, -1px);
+            @include apply-svg-color($grey-foreground-color);
 
             font-size: 15px;
             font-weight: $font-semibold;
@@ -194,53 +196,25 @@ $other-videos-width: 260px;
               display: none;
             }
 
-            .icon {
-              @include icon(21px);
-
-              position: relative;
-              top: -2px;
-
-              &.icon-like {
-                background-image: url('../../../assets/images/video/like-grey.svg');
-              }
-
-              &.icon-dislike {
-                background-image: url('../../../assets/images/video/dislike-grey.svg');
-              }
-
-              &.icon-support {
-                background-image: url('../../../assets/images/video/heart.svg');
-              }
-
-              &.icon-share {
-                background-image: url('../../../assets/images/video/share.svg');
-              }
-
-              &.icon-more {
-                background-image: url('../../../assets/images/video/more.svg');
-                top: -1px;
-              }
-            }
-
-            .icon-text {
-              margin-left: 3px;
-            }
-
             &.action-button-like.activated {
               background-color: $green;
 
-              .icon-like {
-                background-image: url('../../../assets/images/video/like-white.svg');
+              my-global-icon {
+                @include apply-svg-color(#fff);
               }
             }
 
             &.action-button-dislike.activated {
               background-color: $red;
 
-              .icon-dislike {
-                background-image: url('../../../assets/images/video/dislike-white.svg');
+              my-global-icon {
+                @include apply-svg-color(#fff);
               }
             }
+
+            .icon-text {
+              margin-left: 3px;
+            }
           }
 
           .action-more {
@@ -249,36 +223,12 @@ $other-videos-width: 260px;
             .dropdown-menu .dropdown-item {
               padding: 6px 24px;
 
-              .icon {
-                @include icon(24px);
+              my-global-icon {
+                width: 24px;
 
                 margin-right: 10px;
                 position: relative;
-                top: -1px;
-
-                &.icon-download {
-                  background-image: url('../../../assets/images/video/download-black.svg');
-                }
-
-                &.icon-edit {
-                  background-image: url('../../../assets/images/global/edit-black.svg');
-                }
-
-                &.icon-alert {
-                  background-image: url('../../../assets/images/video/alert.svg');
-                }
-
-                &.icon-blacklist {
-                  background-image: url('../../../assets/images/video/blacklist.svg');
-                }
-
-                &.icon-unblacklist {
-                  background-image: url('../../../assets/images/global/undo.svg');
-                }
-
-                &.icon-delete {
-                  background-image: url('../../../assets/images/global/delete-black.svg');
-                }
+                top: -2px;
               }
             }
           }
@@ -320,7 +270,7 @@ $other-videos-width: 260px;
       .video-info-description-more {
         cursor: pointer;
         font-weight: $font-semibold;
-        color: #585858;
+        color: $grey-foreground-color;
         font-size: 14px;
 
         .glyphicon {
@@ -339,7 +289,7 @@ $other-videos-width: 260px;
         min-width: 91px;
         padding-right: 5px;
         display: inline-block;
-        color: #585858;
+        color: $grey-foreground-color;
         font-weight: $font-bold;
       }
 
diff --git a/client/src/assets/images/global/add.svg b/client/src/assets/images/global/add.html
similarity index 72%
rename from client/src/assets/images/global/add.svg
rename to client/src/assets/images/global/add.html
index 42b269c43..bfb0a52bc 100644
--- a/client/src/assets/images/global/add.svg
+++ b/client/src/assets/images/global/add.html
@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-92.000000, -115.000000)">
             <g id="2" transform="translate(92.000000, 115.000000)">
                 <circle id="Oval-1" stroke="#ffffff" stroke-width="2" cx="12" cy="12" r="10"></circle>
                 <rect id="Rectangle-1" fill="#ffffff" x="11" y="7" width="2" height="10" rx="1"></rect>
diff --git a/client/src/assets/images/video/alert.svg b/client/src/assets/images/global/alert.html
similarity index 71%
rename from client/src/assets/images/video/alert.svg
rename to client/src/assets/images/global/alert.html
index 5b43534ad..7c8c02074 100644
--- a/client/src/assets/images/video/alert.svg
+++ b/client/src/assets/images/global/alert.html
@@ -1,11 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>alert</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-48.000000, -467.000000)">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -467.000000)">
             <g id="161" transform="translate(48.000000, 467.000000)">
                 <path d="M12.8715755,3.50973876 L12,1.96027114 L11.1284245,3.50973876 L2.12842446,19.5097388 L1.29015252,21 L3,21 L21,21 L22.7098475,21 L21.8715755,19.5097388 L12.8715755,3.50973876 Z" id="Triangle-2" stroke="#000000" stroke-width="2" stroke-linejoin="round"></path>
                 <path d="M12,17.75 C12.6903559,17.75 13.25,17.1903559 13.25,16.5 C13.25,15.8096441 12.6903559,15.25 12,15.25 C11.3096441,15.25 10.75,15.8096441 10.75,16.5 C10.75,17.1903559 11.3096441,17.75 12,17.75 Z" id="Oval-8" fill="#000000"></path>
diff --git a/client/src/assets/images/global/circle-tick.html b/client/src/assets/images/global/circle-tick.html
new file mode 100644
index 000000000..2327de6be
--- /dev/null
+++ b/client/src/assets/images/global/circle-tick.html
@@ -0,0 +1,12 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-400.000000, -1134.000000)" stroke="#000000" stroke-width="2">
+      <g id="Extras" transform="translate(48.000000, 1046.000000)">
+        <g id="yes" transform="translate(352.000000, 88.000000)">
+          <circle id="Oval-1" cx="12" cy="12" r="10"/>
+          <polyline id="Path-288" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/cloud-download.html b/client/src/assets/images/global/cloud-download.html
new file mode 100644
index 000000000..b2634fd1f
--- /dev/null
+++ b/client/src/assets/images/global/cloud-download.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-356.000000, -775.000000)" stroke="#000000" stroke-width="2">
+            <g id="308" transform="translate(356.000000, 775.000000)">
+                <path d="M8,17 L5,17 L5,17 C2.790861,17 1,15.209139 1,13 C1,10.790861 2.790861,9 5,9 C5.35840468,9 5.70579988,9.04713713 6.03632437,9.13555013 C6.01233106,8.92702603 6,8.71495305 6,8.5 C6,5.46243388 8.46243388,3 11.5,3 C14.0673313,3 16.2238156,4.7590449 16.8299648,7.1376465 C17.2052921,7.04765874 17.5970804,7 18,7 C20.7614237,7 23,9.23857625 23,12 C23,14.7614237 20.7614237,17 18,17 L16,17" id="Combined-Shape" stroke-linejoin="round"></path>
+                <path d="M12,13 L12,21" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" points="15 20 12 23 9 20"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/cloud-error.html b/client/src/assets/images/global/cloud-error.html
new file mode 100644
index 000000000..1a3483805
--- /dev/null
+++ b/client/src/assets/images/global/cloud-error.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-400.000000, -775.000000)" stroke="#000000" stroke-width="2">
+            <g id="309" transform="translate(400.000000, 775.000000)">
+                <path d="M7,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L17,18" id="Combined-Shape"></path>
+                <path d="M9,21 L15,15" id="Path-238"></path>
+                <path d="M9,21 L15,15" id="Path-238" transform="translate(12.000000, 18.000000) scale(-1, 1) translate(-12.000000, -18.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/cog.html b/client/src/assets/images/global/cog.html
new file mode 100644
index 000000000..b74a180e7
--- /dev/null
+++ b/client/src/assets/images/global/cog.html
@@ -0,0 +1,9 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+    <g transform="translate(-796.000000, -159.000000)" stroke="#000000" stroke-width="2">
+      <g id="38" transform="translate(796.000000, 159.000000)">
+        <path d="M7.20852293,4.3800958 C8.05442158,3.84706631 8.99528987,3.45099725 10,3.22301642 L10,1.99980749 C10,1.44762906 10.4433532,1 11.0093689,1 L12.9906311,1 C13.5480902,1 14,1.44371665 14,1.99980749 L14,3.22301642 C15.0047101,3.45099725 15.9455784,3.84706631 16.7914771,4.3800958 L17.6569904,3.5145825 C18.0474395,3.12413339 18.6774591,3.12110988 19.0776926,3.52134344 L20.4786566,4.92230738 C20.8728396,5.31649045 20.8786331,5.94979402 20.4854175,6.34300963 L19.6199042,7.20852293 C20.1529337,8.05442158 20.5490027,8.99528987 20.7769836,10 L22.0001925,10 C22.5523709,10 23,10.4433532 23,11.0093689 L23,12.9906311 C23,13.5480902 22.5562834,14 22.0001925,14 L20.7769836,14 C20.5490027,15.0047101 20.1529337,15.9455784 19.6199042,16.7914771 L20.4854175,17.6569904 C20.8758666,18.0474395 20.8788901,18.6774591 20.4786566,19.0776926 L19.0776926,20.4786566 C18.6835095,20.8728396 18.050206,20.8786331 17.6569904,20.4854175 L16.7914771,19.6199042 C15.9455784,20.1529337 15.0047101,20.5490027 14,20.7769836 L14,22.0001925 C14,22.5523709 13.5566468,23 12.9906311,23 L11.0093689,23 C10.4519098,23 10,22.5562834 10,22.0001925 L10,20.7769836 C8.99528987,20.5490027 8.05442158,20.1529337 7.20852293,19.6199042 L6.34300963,20.4854175 C5.95256051,20.8758666 5.32254093,20.8788901 4.92230738,20.4786566 L3.52134344,19.0776926 C3.12716036,18.6835095 3.12136689,18.050206 3.5145825,17.6569904 L4.3800958,16.7914771 C3.84706631,15.9455784 3.45099725,15.0047101 3.22301642,14 L1.99980749,14 C1.44762906,14 1,13.5566468 1,12.9906311 L1,11.0093689 C1,10.4519098 1.44371665,10 1.99980749,10 L3.22301642,10 C3.45099725,8.99528987 3.84706631,8.05442158 4.3800958,7.20852293 L3.5145825,6.34300963 C3.12413339,5.95256051 3.12110988,5.32254093 3.52134344,4.92230738 L4.92230738,3.52134344 C5.31649045,3.12716036 5.94979402,3.12136689 6.34300963,3.5145825 L7.20852293,4.3800958 Z M12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 Z" id="Combined-Shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/cross.svg b/client/src/assets/images/global/cross.html
similarity index 63%
rename from client/src/assets/images/global/cross.svg
rename to client/src/assets/images/global/cross.html
index d47a75996..962578487 100644
--- a/client/src/assets/images/global/cross.svg
+++ b/client/src/assets/images/global/cross.html
@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-312.000000, -115.000000)" stroke="#585858" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-312.000000, -115.000000)" stroke="#000000" stroke-width="2">
             <g id="7" transform="translate(312.000000, 115.000000)">
                 <path d="M19,5 L5,19" id="Path-14"></path>
                 <path d="M19,5 L5,19" id="Path-14" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
diff --git a/client/src/assets/images/global/delete-black.svg b/client/src/assets/images/global/delete-black.svg
deleted file mode 100644
index 04ddc23aa..000000000
--- a/client/src/assets/images/global/delete-black.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
-            <g id="25" transform="translate(224.000000, 159.000000)">
-                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#000" stroke-width="2"></path>
-                <rect id="Rectangle-424" fill="#000" x="2" y="4" width="20" height="2" rx="1"></rect>
-                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#000"></path>
-                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#000" stroke-width="2" stroke-linejoin="round"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/global/delete-white.svg b/client/src/assets/images/global/delete-white.svg
deleted file mode 100644
index 9c52de557..000000000
--- a/client/src/assets/images/global/delete-white.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
-            <g id="25" transform="translate(224.000000, 159.000000)">
-                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#ffffff" stroke-width="2"></path>
-                <rect id="Rectangle-424" fill="#ffffff" x="2" y="4" width="20" height="2" rx="1"></rect>
-                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#ffffff"></path>
-                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/global/delete-grey.svg b/client/src/assets/images/global/delete.html
similarity index 71%
rename from client/src/assets/images/global/delete-grey.svg
rename to client/src/assets/images/global/delete.html
index 67e9e2ce7..a0d9a0cac 100644
--- a/client/src/assets/images/global/delete-grey.svg
+++ b/client/src/assets/images/global/delete.html
@@ -1,13 +1,11 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-224.000000, -159.000000)">
             <g id="25" transform="translate(224.000000, 159.000000)">
-                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#585858" stroke-width="2"></path>
-                <rect id="Rectangle-424" fill="#585858" x="2" y="4" width="20" height="2" rx="1"></rect>
-                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#585858"></path>
-                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#000000" stroke-width="2"></path>
+                <rect id="Rectangle-424" fill="#000000" x="2" y="4" width="20" height="2" rx="1"></rect>
+                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#000000"></path>
+                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#000000" stroke-width="2" stroke-linejoin="round"></path>
             </g>
         </g>
     </g>
diff --git a/client/src/assets/images/video/download-black.svg b/client/src/assets/images/global/download.html
similarity index 64%
rename from client/src/assets/images/video/download-black.svg
rename to client/src/assets/images/global/download.html
index 501836746..259506f31 100644
--- a/client/src/assets/images/video/download-black.svg
+++ b/client/src/assets/images/global/download.html
@@ -1,11 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>download</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#000000" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-180.000000, -291.000000)" stroke="#000000" stroke-width="2">
             <g id="84" transform="translate(180.000000, 291.000000)">
                 <path d="M12,3 L12,15" id="Path-58"></path>
                 <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
diff --git a/client/src/assets/images/global/edit-grey.svg b/client/src/assets/images/global/edit-grey.svg
deleted file mode 100644
index 23ece68f1..000000000
--- a/client/src/assets/images/global/edit-grey.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>edit</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#585858" stroke-width="2">
-            <g id="41" transform="translate(48.000000, 203.000000)">
-                <path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Path-74" stroke-linecap="round" stroke-linejoin="round"></path>
-                <path d="M14.5,5.5 L18.5,9.5" id="Path-75"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/global/edit-black.svg b/client/src/assets/images/global/edit.html
similarity index 62%
rename from client/src/assets/images/global/edit-black.svg
rename to client/src/assets/images/global/edit.html
index 0176b0f37..f04183c2d 100644
--- a/client/src/assets/images/global/edit-black.svg
+++ b/client/src/assets/images/global/edit.html
@@ -1,11 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>edit</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#000000" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -203.000000)" stroke="#000000" stroke-width="2">
             <g id="41" transform="translate(48.000000, 203.000000)">
                 <path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Path-74" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M14.5,5.5 L18.5,9.5" id="Path-75"></path>
diff --git a/client/src/assets/images/global/help.svg b/client/src/assets/images/global/help.html
similarity index 84%
rename from client/src/assets/images/global/help.svg
rename to client/src/assets/images/global/help.html
index 48252febe..27e9bee6f 100644
--- a/client/src/assets/images/global/help.svg
+++ b/client/src/assets/images/global/help.html
@@ -1,12 +1,10 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-400.000000, -247.000000)">
             <g id="69" transform="translate(400.000000, 247.000000)">
                 <circle id="Oval-7" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
                 <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#333333"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/client/src/assets/images/global/im-with-her.svg b/client/src/assets/images/global/im-with-her.html
similarity index 70%
rename from client/src/assets/images/global/im-with-her.svg
rename to client/src/assets/images/global/im-with-her.html
index 31d4754fd..de2c62e96 100644
--- a/client/src/assets/images/global/im-with-her.svg
+++ b/client/src/assets/images/global/im-with-her.html
@@ -1,15 +1,10 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>im-with-her</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-708.000000, -467.000000)">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-708.000000, -467.000000)">
             <g id="176" transform="translate(708.000000, 467.000000)">
-                <path d="M8,9 L8,3.99339768 C8,3.44494629 7.55641359,3 7.00922203,3 L2.99077797,3 C2.45097518,3 2,3.44475929 2,3.99339768 L2,20.0066023 C2,20.5550537 2.44358641,21 2.99077797,21 L7.00922203,21 C7.54902482,21 8,20.5552407 8,20.0066023 L8,15 L14,15 L14,20.0066023 C14,20.5550537 14.4435864,21 14.990778,21 L19.009222,21 C19.5490248,21 20,20.5564587 20,20.0093228 L20,15.0006104 L23,12 L20,8.99267578 L20,4.00303919 C20,3.45042467 19.5564136,3 19.009222,3 L14.990778,3 C14.4509752,3 14,3.44475929 14,3.99339768 L14,9 L8,9 Z" id="Combined-Shape" fill="#333333" opacity="0.5"></path>
+                <path d="M8,9 L8,3.99339768 C8,3.44494629 7.55641359,3 7.00922203,3 L2.99077797,3 C2.45097518,3 2,3.44475929 2,3.99339768 L2,20.0066023 C2,20.5550537 2.44358641,21 2.99077797,21 L7.00922203,21 C7.54902482,21 8,20.5552407 8,20.0066023 L8,15 L14,15 L14,20.0066023 C14,20.5550537 14.4435864,21 14.990778,21 L19.009222,21 C19.5490248,21 20,20.5564587 20,20.0093228 L20,15.0006104 L23,12 L20,8.99267578 L20,4.00303919 C20,3.45042467 19.5564136,3 19.009222,3 L14.990778,3 C14.4509752,3 14,3.44475929 14,3.99339768 L14,9 L8,9 Z" id="Combined-Shape" fill="#000000" opacity="0.5"></path>
                 <path d="M2,9 L14,9 L14,3.99077797 C14,3.44358641 14.3203148,3.32031476 14.7062149,3.7062149 L23,12 L14.7062149,20.2937851 C14.3161832,20.6838168 14,20.5490248 14,20.009222 L14,15 L2,15 L2,9 Z" id="Rectangle-121" fill-opacity="0.5" fill="#000000"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/client/src/assets/images/global/no.html b/client/src/assets/images/global/no.html
new file mode 100644
index 000000000..bb7b28514
--- /dev/null
+++ b/client/src/assets/images/global/no.html
@@ -0,0 +1,10 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-312.000000, -863.000000)" stroke="#000000" stroke-width="2">
+            <g id="347" transform="translate(312.000000, 863.000000)">
+                <circle id="Oval-196" cx="12" cy="12" r="9"></circle>
+                <path d="M18,18 L6,6" id="Path-275"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/sparkle.html b/client/src/assets/images/global/sparkle.html
new file mode 100644
index 000000000..3b29fefb9
--- /dev/null
+++ b/client/src/assets/images/global/sparkle.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-488.000000, -731.000000)" stroke="#000000" stroke-width="2">
+            <g id="291" transform="translate(488.000000, 731.000000)">
+                <path d="M10,9 C8.5,7.5 8,3 8,3 C8,3 7.5,7.5 6,9 C4.5,10.5 2,11 2,11 C2,11 4.5,11.5 6,13 C7.5,14.5 8,19 8,19 C8,19 8.5,14.5 10,13 C11.5,11.5 14,11 14,11 C14,11 11.5,10.5 10,9 Z" id="Combined-Shape"></path>
+                <path d="M19.6666667,4.75 C18.7916667,3.8125 18.5,1 18.5,1 C18.5,1 18.2083333,3.8125 17.3333333,4.75 C16.4583333,5.6875 15,6 15,6 C15,6 16.4583333,6.3125 17.3333333,7.25 C18.2083333,8.1875 18.5,11 18.5,11 C18.5,11 18.7916667,8.1875 19.6666667,7.25 C20.5416667,6.3125 22,6 22,6 C22,6 20.5416667,5.6875 19.6666667,4.75 Z" id="Combined-Shape"></path>
+                <path d="M17,17 C16.25,16.25 16,14 16,14 C16,14 15.75,16.25 15,17 C14.25,17.75 13,18 13,18 C13,18 14.25,18.25 15,19 C15.75,19.75 16,22 16,22 C16,22 16.25,19.75 17,19 C17.75,18.25 19,18 19,18 C19,18 17.75,17.75 17,17 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/syndication.svg b/client/src/assets/images/global/syndication.html
similarity index 88%
rename from client/src/assets/images/global/syndication.svg
rename to client/src/assets/images/global/syndication.html
index cb74cf81b..e6c88a4db 100644
--- a/client/src/assets/images/global/syndication.svg
+++ b/client/src/assets/images/global/syndication.html
@@ -1,10 +1,8 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 559.372 559.372" style="enable-background:new 0 0 559.372 559.372;" xml:space="preserve">
 <g>
 	<g>
-		<path style="fill:#010002;" d="M53.244,0.002c46.512,0,91.29,6.018,134.334,18.054s83.334,29.07,120.869,51.102
+		<path fill="#000000" d="M53.244,0.002c46.512,0,91.29,6.018,134.334,18.054s83.334,29.07,120.869,51.102
 			c37.537,22.032,71.707,48.45,102.514,79.254c30.803,30.804,57.221,64.974,79.254,102.51
 			c22.029,37.539,39.063,77.828,51.102,120.873c12.037,43.043,18.055,87.818,18.055,134.334c0,14.688-5.201,27.23-15.605,37.637
 			c-10.404,10.407-22.949,15.604-37.637,15.604c-14.689,0-27.234-5.199-37.641-15.604c-10.402-10.404-15.604-22.949-15.604-37.637
diff --git a/client/src/assets/images/global/tick.svg b/client/src/assets/images/global/tick.html
similarity index 63%
rename from client/src/assets/images/global/tick.svg
rename to client/src/assets/images/global/tick.html
index 230caa111..4784b4807 100644
--- a/client/src/assets/images/global/tick.svg
+++ b/client/src/assets/images/global/tick.html
@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-356.000000, -115.000000)" stroke="#585858" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-356.000000, -115.000000)" stroke="#000000" stroke-width="2">
             <g id="8" transform="translate(356.000000, 115.000000)">
                 <path d="M21,6 L9,18" id="Path-14"></path>
                 <path d="M9,13 L4,18" id="Path-14" transform="translate(6.500000, 15.500000) scale(-1, 1) translate(-6.500000, -15.500000) "></path>
diff --git a/client/src/assets/images/global/undo.html b/client/src/assets/images/global/undo.html
new file mode 100644
index 000000000..228245c86
--- /dev/null
+++ b/client/src/assets/images/global/undo.html
@@ -0,0 +1,9 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-180.000000, -115.000000)" fill="#000000">
+      <g id="4" transform="translate(180.000000, 115.000000)">
+        <path d="M10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 C9.99404288,21 9.98809793,20.9999479 9.98216558,20.9998442 C5.01980239,20.990358 1,16.9646166 1,12 C1,7.02943725 5.02943725,3 10,3 C14.9705627,3 19,7.02943725 19,12 L17,12 C17,8.13400675 13.8659932,5 10,5 C6.13400675,5 3,8.13400675 3,12 C3,15.8659932 6.13400675,19 10,19 Z M14,12 L22,12 L18,16 L14,12 Z" id="Combined-Shape" transform="translate(11.500000, 12.000000) scale(-1, 1) translate(-11.500000, -12.000000) "/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/undo.svg b/client/src/assets/images/global/undo.svg
deleted file mode 100644
index f1cca03f7..000000000
--- a/client/src/assets/images/global/undo.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-180.000000, -115.000000)" fill="#000">
-            <g id="4" transform="translate(180.000000, 115.000000)">
-                <path d="M10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 C9.99404288,21 9.98809793,20.9999479 9.98216558,20.9998442 C5.01980239,20.990358 1,16.9646166 1,12 C1,7.02943725 5.02943725,3 10,3 C14.9705627,3 19,7.02943725 19,12 L17,12 C17,8.13400675 13.8659932,5 10,5 C6.13400675,5 3,8.13400675 3,12 C3,15.8659932 6.13400675,19 10,19 Z M14,12 L22,12 L18,16 L14,12 Z" id="Combined-Shape" transform="translate(11.500000, 12.000000) scale(-1, 1) translate(-11.500000, -12.000000) "></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/global/user-add.html b/client/src/assets/images/global/user-add.html
new file mode 100644
index 000000000..57df23c74
--- /dev/null
+++ b/client/src/assets/images/global/user-add.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-136.000000, -863.000000)">
+            <g id="343" transform="translate(136.000000, 863.000000)">
+                <path d="M14.2571621,15 L7,15 C4.20063223,15 2.390348,16.1679253 1.5255785,18.0896353 C1.07423388,19.0926234 0.949016905,20.1108713 0.995546634,20.9698816 C0.998604759,21.0263393 1.0014872,21.0632937 1.00496281,21.0995037 C1.0599172,21.6490476 1.54995985,22.0499916 2.09950372,21.9950372 C2.64904758,21.9400828 3.04999158,21.4500401 2.99503719,20.9004963 C2.99555422,20.9071205 2.99399879,20.8871791 2.99261905,20.8617069 C2.96185588,20.2937714 3.05021139,19.575276 3.34942151,18.9103647 C3.890902,17.7070747 4.98686778,17 7,17 L12.0070975,17 L13.2070325,17 C13.4170071,16.2576107 13.7789623,15.5790321 14.2571621,15 Z" id="Path-41" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M19,18 L19,16.4976988 C19,16.2228273 18.7680664,16 18.5,16 C18.2238576,16 18,16.2148438 18,16.4976988 L18,18 L16.4976988,18 C16.2148438,18 16,18.2238576 16,18.5 C16,18.7680664 16.2228273,19 16.4976988,19 L18,19 L18,20.5023012 C18,20.7771727 18.2319336,21 18.5,21 C18.7761424,21 19,20.7851562 19,20.5023012 L19,19 L20.5023012,19 C20.7851562,19 21,18.7761424 21,18.5 C21,18.2319336 20.7771727,18 20.5023012,18 L19,18 Z M18.5,23 C16.0147186,23 14,20.9852814 14,18.5 C14,16.0147186 16.0147186,14 18.5,14 C20.9852814,14 23,16.0147186 23,18.5 C23,20.9852814 20.9852814,23 18.5,23 Z" id="Combined-Shape" fill="#000000"></path>
+                <circle id="Oval-40" stroke="#000000" stroke-width="2" cx="12" cy="8" r="5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/validate.svg b/client/src/assets/images/global/validate.html
similarity index 69%
rename from client/src/assets/images/global/validate.svg
rename to client/src/assets/images/global/validate.html
index 5c7ee9d14..520624ff6 100644
--- a/client/src/assets/images/global/validate.svg
+++ b/client/src/assets/images/global/validate.html
@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#ffffff" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-400.000000, -1134.000000)" stroke="#000000" stroke-width="2">
             <g id="Extras" transform="translate(48.000000, 1046.000000)">
                 <g id="yes" transform="translate(352.000000, 88.000000)">
                     <circle id="Oval-1" cx="12" cy="12" r="10"></circle>
diff --git a/client/src/assets/images/video/blacklist.svg b/client/src/assets/images/video/blacklist.svg
deleted file mode 100644
index 431c73816..000000000
--- a/client/src/assets/images/video/blacklist.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>no</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-312.000000, -863.000000)" stroke="#000000" stroke-width="2">
-            <g id="347" transform="translate(312.000000, 863.000000)">
-                <circle id="Oval-196" cx="12" cy="12" r="9"></circle>
-                <path d="M18,18 L6,6" id="Path-275"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/video/dislike-white.svg b/client/src/assets/images/video/dislike-white.svg
deleted file mode 100644
index cfc6eaa1f..000000000
--- a/client/src/assets/images/video/dislike-white.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#ffffff" stroke-width="2">
-            <g id="Extras" transform="translate(48.000000, 1046.000000)">
-                <g id="thumbs-down" transform="translate(704.000000, 44.000000)">
-                    <path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Path-188" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
-                    <path d="M4,4.5 C4,4.5 3,7 3,10 C3,13 4,15.5 4,15.5" id="Path-189" transform="translate(3.500000, 10.000000) scale(1, -1) translate(-3.500000, -10.000000) "></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/video/dislike-grey.svg b/client/src/assets/images/video/dislike.html
similarity index 77%
rename from client/src/assets/images/video/dislike-grey.svg
rename to client/src/assets/images/video/dislike.html
index 56a7908fb..acde951e2 100644
--- a/client/src/assets/images/video/dislike-grey.svg
+++ b/client/src/assets/images/video/dislike.html
@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#585858" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-752.000000, -1090.000000)" stroke="#000000" stroke-width="2">
             <g id="Extras" transform="translate(48.000000, 1046.000000)">
                 <g id="thumbs-down" transform="translate(704.000000, 44.000000)">
                     <path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Path-188" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
diff --git a/client/src/assets/images/video/download-grey.svg b/client/src/assets/images/video/download-grey.svg
deleted file mode 100644
index 5b0cca5ef..000000000
--- a/client/src/assets/images/video/download-grey.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>download</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#585858" stroke-width="2">
-            <g id="84" transform="translate(180.000000, 291.000000)">
-                <path d="M12,3 L12,15" id="Path-58"></path>
-                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
-                <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/video/download-white.svg b/client/src/assets/images/video/download-white.svg
deleted file mode 100644
index 0e66e06e8..000000000
--- a/client/src/assets/images/video/download-white.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>download</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#ffffff" stroke-width="2">
-            <g id="84" transform="translate(180.000000, 291.000000)">
-                <path d="M12,3 L12,15" id="Path-58"></path>
-                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
-                <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/video/heart.svg b/client/src/assets/images/video/heart.html
similarity index 66%
rename from client/src/assets/images/video/heart.svg
rename to client/src/assets/images/video/heart.html
index 5d64aee0f..618f64f10 100644
--- a/client/src/assets/images/video/heart.svg
+++ b/client/src/assets/images/video/heart.html
@@ -1,9 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-48.000000, -1046.000000)" fill-rule="nonzero" fill="#585858">
-            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-48.000000, -1046.000000)" fill-rule="nonzero" fill="#000000">
+            <g transform="translate(48.000000, 1046.000000)">
                 <g id="heart">
                     <path d="M12.0174466,21 L20.9041801,11.3556763 C22.6291961,9.13778099 22.2795957,5.90145416 20.1233257,4.12713796 C17.9670557,2.35282175 14.8206518,2.71241362 13.0956358,4.93030888 L12.0174465,6.5 L10.9043642,4.93030888 C9.17934824,2.71241362 6.0329443,2.35282175 3.87667432,4.12713796 C1.72040435,5.90145416 1.37080391,9.13778099 3.09581989,11.3556763 L12.0174466,21 Z"></path>
                 </g>
diff --git a/client/src/assets/images/video/like-white.svg b/client/src/assets/images/video/like-white.svg
deleted file mode 100644
index 88e5f6a9a..000000000
--- a/client/src/assets/images/video/like-white.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>thumbs-up</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-708.000000, -643.000000)" stroke="#ffffff" stroke-width="2">
-            <g id="256" transform="translate(708.000000, 643.000000)">
-                <path d="M6,14 C6,16.5 6.5,19 8,19 L16.9938335,19 C17.5495239,19 18.1819788,18.5956028 18.4072817,18.0949295 L20.8562951,12.6526776 C21.7640882,10.6353595 20.7154925,9 18.5092545,9 L15.5,9 C15.5,9 18.5,3 15,3 C12.5,3 11.5,9 8,9 C6.5,9 6,11.5 6,14 Z" id="Path-188" stroke-linejoin="round"></path>
-                <path d="M4,8.5 C4,8.5 3,11 3,14 C3,17 4,19.5 4,19.5" id="Path-189"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/video/like-grey.svg b/client/src/assets/images/video/like.html
similarity index 61%
rename from client/src/assets/images/video/like-grey.svg
rename to client/src/assets/images/video/like.html
index 5ef6c7b31..d0e71763b 100644
--- a/client/src/assets/images/video/like-grey.svg
+++ b/client/src/assets/images/video/like.html
@@ -1,11 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>thumbs-up</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-708.000000, -643.000000)" stroke="#585858" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-708.000000, -643.000000)" stroke="#000000" stroke-width="2">
             <g id="256" transform="translate(708.000000, 643.000000)">
                 <path d="M6,14 C6,16.5 6.5,19 8,19 L16.9938335,19 C17.5495239,19 18.1819788,18.5956028 18.4072817,18.0949295 L20.8562951,12.6526776 C21.7640882,10.6353595 20.7154925,9 18.5092545,9 L15.5,9 C15.5,9 18.5,3 15,3 C12.5,3 11.5,9 8,9 C6.5,9 6,11.5 6,14 Z" id="Path-188" stroke-linejoin="round"></path>
                 <path d="M4,8.5 C4,8.5 3,11 3,14 C3,17 4,19.5 4,19.5" id="Path-189"></path>
diff --git a/client/src/assets/images/video/more.svg b/client/src/assets/images/video/more.html
similarity index 76%
rename from client/src/assets/images/video/more.svg
rename to client/src/assets/images/video/more.html
index dea392136..39dcad10e 100644
--- a/client/src/assets/images/video/more.svg
+++ b/client/src/assets/images/video/more.html
@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-444.000000, -115.000000)" fill="#585858">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-444.000000, -115.000000)" fill="#000000">
             <g id="10" transform="translate(444.000000, 115.000000)">
                 <path d="M10,12 C10,10.8954305 10.8877296,10 12,10 C13.1045695,10 14,10.8877296 14,12 C14,13.1045695 13.1122704,14 12,14 C10.8954305,14 10,13.1122704 10,12 Z M17,12 C17,10.8954305 17.8877296,10 19,10 C20.1045695,10 21,10.8877296 21,12 C21,13.1045695 20.1122704,14 19,14 C17.8954305,14 17,13.1122704 17,12 Z M3,12 C3,10.8954305 3.88772964,10 5,10 C6.1045695,10 7,10.8877296 7,12 C7,13.1045695 6.11227036,14 5,14 C3.8954305,14 3,13.1122704 3,12 Z" id="Combined-Shape"></path>
             </g>
diff --git a/client/src/assets/images/video/share.svg b/client/src/assets/images/video/share.html
similarity index 62%
rename from client/src/assets/images/video/share.svg
rename to client/src/assets/images/video/share.html
index da0f43e81..7759b37af 100644
--- a/client/src/assets/images/video/share.svg
+++ b/client/src/assets/images/video/share.html
@@ -1,11 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>share</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-312.000000, -203.000000)" stroke="#585858" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-312.000000, -203.000000)" stroke="#000000" stroke-width="2">
             <g id="47" transform="translate(312.000000, 203.000000)">
                 <path d="M20,15 L20,18.0026083 C20,19.1057373 19.1073772,20 18.0049107,20 L5.99508929,20 C4.8932319,20 4,19.1073772 4,18.0049107 L4,5.99508929 C4,4.8932319 4.89585781,4 5.9973917,4 L9,4" id="Rectangle-460"></path>
                 <polyline id="Path-93" stroke-linejoin="round" points="13 4 20.0207973 4 20.0207973 11.0191059"></polyline>
diff --git a/client/src/assets/images/header/upload-white.svg b/client/src/assets/images/video/upload.html
similarity index 69%
rename from client/src/assets/images/header/upload-white.svg
rename to client/src/assets/images/video/upload.html
index 2b07caf76..3bc0d3a8a 100644
--- a/client/src/assets/images/header/upload-white.svg
+++ b/client/src/assets/images/video/upload.html
@@ -1,11 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>cloud-upload</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#fff" stroke-width="2">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g transform="translate(-312.000000, -775.000000)" stroke="#000000" stroke-width="2">
             <g id="307" transform="translate(312.000000, 775.000000)">
                 <path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Combined-Shape" stroke-linejoin="round"></path>
                 <path d="M12,13 L12,21" id="Path-58"></path>
diff --git a/client/src/assets/images/video/upload.svg b/client/src/assets/images/video/upload.svg
deleted file mode 100644
index c5b7cb443..000000000
--- a/client/src/assets/images/video/upload.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>cloud-upload</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#C6C6C6" stroke-width="2">
-            <g id="307" transform="translate(312.000000, 775.000000)">
-                <path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Combined-Shape" stroke-linejoin="round"></path>
-                <path d="M12,13 L12,21" id="Path-58"></path>
-                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) " points="15 11 12 14 9 11"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2356f9837..37837bfc0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -23,7 +23,7 @@ body {
   // now beware node-sass requires interpolation
   // for css custom properties #{$var}
   --mainColor: #{$orange-color};
-  --mainHoverColor: #{$orange-hoover-color};
+  --mainHoverColor: #{$orange-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
   --menuBackgroundColor: #{$menu-background};
@@ -229,13 +229,12 @@ label {
       font-weight: $font-semibold;
     }
 
-    .close {
+    my-global-icon {
       @include icon(24px);
 
       position: relative;
       top: 3px;
       float: right;
-      background-image: url('../assets/images/global/cross.svg');
 
       margin: 0;
       padding: 0;
@@ -324,7 +323,7 @@ ngb-tabset.bootstrap {
 table {
   .action-button-edit, .action-button-delete {
     &:hover, &:active, &:focus, &[disabled], &.disabled {
-      background-color: $grey-color !important;
+      background-color: $grey-background-color !important;
     }
   }
 }
@@ -389,4 +388,4 @@ table {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d6f391a45..1da240db8 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -55,6 +55,18 @@
   hyphens: auto;
 }
 
+@mixin apply-svg-color ($color) {
+  /deep/ svg {
+    path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"] {
+      fill: $color;
+    }
+
+    path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"] {
+      stroke: $color;
+    }
+  }
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;
@@ -110,22 +122,30 @@
     color: #fff;
     background-color: #C6C6C6;
   }
+
+  my-global-icon {
+    @include apply-svg-color(#fff)
+  }
 }
 
 @mixin grey-button {
   &, &:active, &:focus {
-    background-color: $grey-color;
-    color: #585858;
+    background-color: $grey-background-color;
+    color: $grey-foreground-color;
   }
 
   &:hover, &:active, &:focus, &[disabled], &.disabled {
-    color: #585858;
-    background-color: $grey-hoover-color;
+    color: $grey-foreground-color;
+    background-color: $grey-background-hover-color;
   }
 
   &[disabled], &.disabled {
     cursor: default;
   }
+
+  my-global-icon {
+    @include apply-svg-color($grey-foreground-color)
+  }
 }
 
 @mixin peertube-button {
@@ -148,6 +168,15 @@
   @include peertube-button;
 }
 
+@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
+  my-global-icon {
+    position: relative;
+    width: $width;
+    margin-right: $margin-right;
+    top: $top;
+  }
+}
+
 @mixin peertube-button-file ($width) {
   position: relative;
   overflow: hidden;
@@ -455,18 +484,10 @@
   }
 }
 
-@mixin create-button ($imageUrl) {
+@mixin create-button {
   @include peertube-button-link;
   @include orange-button;
-
-  .icon.icon-add {
-    @include icon(20px);
-
-    position: relative;
-    top: -1px;
-    margin-right: 5px;
-    background-image: url($imageUrl);
-  }
+  @include button-with-icon(20px, 5px, -1px);
 }
 
 @mixin row-blocks {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fdf33b12a..3780b7501 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -6,10 +6,13 @@ $font-regular: 400;
 $font-semibold: 600;
 $font-bold: 700;
 
-$grey-color: #E5E5E5;
-$grey-hoover-color: #EFEFEF;;
+$grey-background-color: #E5E5E5;
+$grey-background-hover-color: #EFEFEF;
+$grey-foreground-color: #585858;
+$grey-foreground-hover-color: #303030;
+
 $orange-color: #F1680D;
-$orange-hoover-color: #F97D46;
+$orange-hover-color: #F97D46;
 
 $bg-color: #fff;
 $fg-color: #000;
diff --git a/client/yarn.lock b/client/yarn.lock
index 5ed43117a..dee67c414 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -552,45 +552,21 @@
     "@webassemblyjs/helper-wasm-bytecode" "1.7.10"
     "@webassemblyjs/wast-parser" "1.7.10"
 
-"@webassemblyjs/ast@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
-  integrity sha512-ZEzy4vjvTzScC+SH8RBssQUawpaInUdMTYwYYLh54/s8TuT0gBLuyUnppKsVyZEi876VmmStKsUs28UxPgdvrA==
-  dependencies:
-    "@webassemblyjs/helper-module-context" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/wast-parser" "1.7.11"
-
 "@webassemblyjs/floating-point-hex-parser@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.10.tgz#ee63d729c6311a85863e369a473f9983f984e4d9"
   integrity sha512-gMsGbI6I3p/P1xL2UxqhNh1ga2HCsx5VBB2i5VvJFAaqAjd2PBTRULc3BpTydabUQEGlaZCzEUQhLoLG7TvEYQ==
 
-"@webassemblyjs/floating-point-hex-parser@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.11.tgz#a69f0af6502eb9a3c045555b1a6129d3d3f2e313"
-  integrity sha512-zY8dSNyYcgzNRNT666/zOoAyImshm3ycKdoLsyDw/Bwo6+/uktb7p4xyApuef1dwEBo/U/SYQzbGBvV+nru2Xg==
-
 "@webassemblyjs/helper-api-error@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.10.tgz#bfcb3bbe59775357475790a2ad7b289f09b2f198"
   integrity sha512-DoYRlPWtuw3yd5BOr9XhtrmB6X1enYF0/54yNvQWGXZEPDF5PJVNI7zQ7gkcKfTESzp8bIBWailaFXEK/jjCsw==
 
-"@webassemblyjs/helper-api-error@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.11.tgz#c7b6bb8105f84039511a2b39ce494f193818a32a"
-  integrity sha512-7r1qXLmiglC+wPNkGuXCvkmalyEstKVwcueZRP2GNC2PAvxbLYwLLPr14rcdJaE4UtHxQKfFkuDFuv91ipqvXg==
-
 "@webassemblyjs/helper-buffer@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.10.tgz#0a8c624c67ad0b214d2e003859921a1988cb151b"
   integrity sha512-+RMU3dt/dPh4EpVX4u5jxsOlw22tp3zjqE0m3ftU2tsYxnPULb4cyHlgaNd2KoWuwasCQqn8Mhr+TTdbtj3LlA==
 
-"@webassemblyjs/helper-buffer@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.11.tgz#3122d48dcc6c9456ed982debe16c8f37101df39b"
-  integrity sha512-MynuervdylPPh3ix+mKZloTcL06P8tenNH3sx6s0qE8SLR6DdwnfgA7Hc9NSYeob2jrW5Vql6GVlsQzKQCa13w==
-
 "@webassemblyjs/helper-code-frame@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.10.tgz#0ab7e22fad0241a173178c73976fc0edf50832ce"
@@ -598,43 +574,21 @@
   dependencies:
     "@webassemblyjs/wast-printer" "1.7.10"
 
-"@webassemblyjs/helper-code-frame@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.11.tgz#cf8f106e746662a0da29bdef635fcd3d1248364b"
-  integrity sha512-T8ESC9KMXFTXA5urJcyor5cn6qWeZ4/zLPyWeEXZ03hj/x9weSokGNkVCdnhSabKGYWxElSdgJ+sFa9G/RdHNw==
-  dependencies:
-    "@webassemblyjs/wast-printer" "1.7.11"
-
 "@webassemblyjs/helper-fsm@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.10.tgz#0915e7713fbbb735620a9d3e4fa3d7951f97ac64"
   integrity sha512-w2vDtUK9xeSRtt5+RnnlRCI7wHEvLjF0XdnxJpgx+LJOvklTZPqWkuy/NhwHSLP19sm9H8dWxKeReMR7sCkGZA==
 
-"@webassemblyjs/helper-fsm@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.11.tgz#df38882a624080d03f7503f93e3f17ac5ac01181"
-  integrity sha512-nsAQWNP1+8Z6tkzdYlXT0kxfa2Z1tRTARd8wYnc/e3Zv3VydVVnaeePgqUzFrpkGUyhUUxOl5ML7f1NuT+gC0A==
-
 "@webassemblyjs/helper-module-context@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.10.tgz#9beb83f72740f5ac8075313b5cac5e796510f755"
   integrity sha512-yE5x/LzZ3XdPdREmJijxzfrf+BDRewvO0zl8kvORgSWmxpRrkqY39KZSq6TSgIWBxkK4SrzlS3BsMCv2s1FpsQ==
 
-"@webassemblyjs/helper-module-context@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.11.tgz#d874d722e51e62ac202476935d649c802fa0e209"
-  integrity sha512-JxfD5DX8Ygq4PvXDucq0M+sbUFA7BJAv/GGl9ITovqE+idGX+J3QSzJYz+LwQmL7fC3Rs+utvWoJxDb6pmC0qg==
-
 "@webassemblyjs/helper-wasm-bytecode@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.10.tgz#797b1e734bbcfdea8399669cdc58308ef1c7ffc0"
   integrity sha512-u5qy4SJ/OrxKxZqJ9N3qH4ZQgHaAzsopsYwLvoWJY6Q33r8PhT3VPyNMaJ7ZFoqzBnZlCcS/0f4Sp8WBxylXfg==
 
-"@webassemblyjs/helper-wasm-bytecode@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.11.tgz#dd9a1e817f1c2eb105b4cf1013093cb9f3c9cb06"
-  integrity sha512-cMXeVS9rhoXsI9LLL4tJxBgVD/KMOKXuFqYb5oCJ/opScWpkCMEz9EJtkonaNcnLv2R3K5jIeS4TRj/drde1JQ==
-
 "@webassemblyjs/helper-wasm-section@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.10.tgz#c0ea3703c615d7bc3e3507c3b7991c8767b2f20e"
@@ -645,16 +599,6 @@
     "@webassemblyjs/helper-wasm-bytecode" "1.7.10"
     "@webassemblyjs/wasm-gen" "1.7.10"
 
-"@webassemblyjs/helper-wasm-section@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.11.tgz#9c9ac41ecf9fbcfffc96f6d2675e2de33811e68a"
-  integrity sha512-8ZRY5iZbZdtNFE5UFunB8mmBEAbSI3guwbrsCl4fWdfRiAcvqQpeqd5KHhSWLL5wuxo53zcaGZDBU64qgn4I4Q==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-buffer" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/wasm-gen" "1.7.11"
-
 "@webassemblyjs/ieee754@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.10.tgz#62c1728b7ef0f66ef8221e2966a0afd75db430df"
@@ -662,13 +606,6 @@
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/ieee754@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.11.tgz#c95839eb63757a31880aaec7b6512d4191ac640b"
-  integrity sha512-Mmqx/cS68K1tSrvRLtaV/Lp3NZWzXtOHUW2IvDvl2sihAwJh4ACE0eL6A8FvMyDG9abes3saB6dMimLOs+HMoQ==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
 "@webassemblyjs/leb128@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.10.tgz#167e0bb4b06d7701585772a73fba9f4df85439f6"
@@ -676,23 +613,11 @@
   dependencies:
     "@xtuc/long" "4.2.1"
 
-"@webassemblyjs/leb128@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.11.tgz#d7267a1ee9c4594fd3f7e37298818ec65687db63"
-  integrity sha512-vuGmgZjjp3zjcerQg+JA+tGOncOnJLWVkt8Aze5eWQLwTQGNgVLcyOTqgSCxWTR4J42ijHbBxnuRaL1Rv7XMdw==
-  dependencies:
-    "@xtuc/long" "4.2.1"
-
 "@webassemblyjs/utf8@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.10.tgz#b6728f5b6f50364abc155be029f9670e6685605a"
   integrity sha512-Ng6Pxv6siyZp635xCSnH3mKmIFgqWPCcGdoo0GBYgyGdxu7cUj4agV7Uu1a8REP66UYUFXJLudeGgd4RvuJAnQ==
 
-"@webassemblyjs/utf8@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.11.tgz#06d7218ea9fdc94a6793aa92208160db3d26ee82"
-  integrity sha512-C6GFkc7aErQIAH+BMrIdVSmW+6HSe20wg57HEC1uqJP8E/xpMjXqQUxkQw07MhNDSDcGpxI9G5JSNOQCqJk4sA==
-
 "@webassemblyjs/wasm-edit@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.10.tgz#83fe3140f5a58f5a30b914702be9f0e59a399092"
@@ -707,20 +632,6 @@
     "@webassemblyjs/wasm-parser" "1.7.10"
     "@webassemblyjs/wast-printer" "1.7.10"
 
-"@webassemblyjs/wasm-edit@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.11.tgz#8c74ca474d4f951d01dbae9bd70814ee22a82005"
-  integrity sha512-FUd97guNGsCZQgeTPKdgxJhBXkUbMTY6hFPf2Y4OedXd48H97J+sOY2Ltaq6WGVpIH8o/TGOVNiVz/SbpEMJGg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-buffer" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/helper-wasm-section" "1.7.11"
-    "@webassemblyjs/wasm-gen" "1.7.11"
-    "@webassemblyjs/wasm-opt" "1.7.11"
-    "@webassemblyjs/wasm-parser" "1.7.11"
-    "@webassemblyjs/wast-printer" "1.7.11"
-
 "@webassemblyjs/wasm-gen@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.10.tgz#4de003806ae29c97ab3707782469b53299570174"
@@ -732,17 +643,6 @@
     "@webassemblyjs/leb128" "1.7.10"
     "@webassemblyjs/utf8" "1.7.10"
 
-"@webassemblyjs/wasm-gen@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.11.tgz#9bbba942f22375686a6fb759afcd7ac9c45da1a8"
-  integrity sha512-U/KDYp7fgAZX5KPfq4NOupK/BmhDc5Kjy2GIqstMhvvdJRcER/kUsMThpWeRP8BMn4LXaKhSTggIJPOeYHwISA==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/ieee754" "1.7.11"
-    "@webassemblyjs/leb128" "1.7.11"
-    "@webassemblyjs/utf8" "1.7.11"
-
 "@webassemblyjs/wasm-opt@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.10.tgz#d151e31611934a556c82789fdeec41a814993c2a"
@@ -753,16 +653,6 @@
     "@webassemblyjs/wasm-gen" "1.7.10"
     "@webassemblyjs/wasm-parser" "1.7.10"
 
-"@webassemblyjs/wasm-opt@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.11.tgz#b331e8e7cef8f8e2f007d42c3a36a0580a7d6ca7"
-  integrity sha512-XynkOwQyiRidh0GLua7SkeHvAPXQV/RxsUeERILmAInZegApOUAIJfRuPYe2F7RcjOC9tW3Cb9juPvAC/sCqvg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-buffer" "1.7.11"
-    "@webassemblyjs/wasm-gen" "1.7.11"
-    "@webassemblyjs/wasm-parser" "1.7.11"
-
 "@webassemblyjs/wasm-parser@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.10.tgz#0367be7bf8f09e3e6abc95f8e483b9206487ec65"
@@ -775,18 +665,6 @@
     "@webassemblyjs/leb128" "1.7.10"
     "@webassemblyjs/utf8" "1.7.10"
 
-"@webassemblyjs/wasm-parser@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.11.tgz#6e3d20fa6a3519f6b084ef9391ad58211efb0a1a"
-  integrity sha512-6lmXRTrrZjYD8Ng8xRyvyXQJYUQKYSXhJqXOBLw24rdiXsHAOlvw5PhesjdcaMadU/pyPQOJ5dHreMjBxwnQKg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-api-error" "1.7.11"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
-    "@webassemblyjs/ieee754" "1.7.11"
-    "@webassemblyjs/leb128" "1.7.11"
-    "@webassemblyjs/utf8" "1.7.11"
-
 "@webassemblyjs/wast-parser@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.10.tgz#058f598b52f730b23fc874d4775b6286b6247264"
@@ -799,18 +677,6 @@
     "@webassemblyjs/helper-fsm" "1.7.10"
     "@xtuc/long" "4.2.1"
 
-"@webassemblyjs/wast-parser@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.11.tgz#25bd117562ca8c002720ff8116ef9072d9ca869c"
-  integrity sha512-lEyVCg2np15tS+dm7+JJTNhNWq9yTZvi3qEhAIIOaofcYlUp0UR5/tVqOwa/gXYr3gjwSZqw+/lS9dscyLelbQ==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/floating-point-hex-parser" "1.7.11"
-    "@webassemblyjs/helper-api-error" "1.7.11"
-    "@webassemblyjs/helper-code-frame" "1.7.11"
-    "@webassemblyjs/helper-fsm" "1.7.11"
-    "@xtuc/long" "4.2.1"
-
 "@webassemblyjs/wast-printer@1.7.10":
   version "1.7.10"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.10.tgz#d817909d2450ae96c66b7607624d98a33b84223b"
@@ -820,15 +686,6 @@
     "@webassemblyjs/wast-parser" "1.7.10"
     "@xtuc/long" "4.2.1"
 
-"@webassemblyjs/wast-printer@1.7.11":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.11.tgz#c4245b6de242cb50a2cc950174fdbf65c78d7813"
-  integrity sha512-m5vkAsuJ32QpkdkDOUPGSltrg8Cuk3KBx4YrmAGQwCZPRdUHXxG4phIOuuycLemHFr74sWL9Wthqss4fzdzSwg==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/wast-parser" "1.7.11"
-    "@xtuc/long" "4.2.1"
-
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -10524,36 +10381,6 @@ webpack@4.23.1:
     watchpack "^1.5.0"
     webpack-sources "^1.3.0"
 
-webpack@^4.17.1:
-  version "4.26.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.26.1.tgz#ff3a9283d363c07b3494dfa702d08f4f2ef6cb39"
-  integrity sha512-i2oOvEvuvLLSuSCkdVrknaxAhtUZ9g+nLSoHCWV0gDzqGX2DXaCrMmMUpbRsTSSLrUqAI56PoEiyMUZIZ1msug==
-  dependencies:
-    "@webassemblyjs/ast" "1.7.11"
-    "@webassemblyjs/helper-module-context" "1.7.11"
-    "@webassemblyjs/wasm-edit" "1.7.11"
-    "@webassemblyjs/wasm-parser" "1.7.11"
-    acorn "^5.6.2"
-    acorn-dynamic-import "^3.0.0"
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-    chrome-trace-event "^1.0.0"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.0"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.3.0"
-    loader-utils "^1.1.0"
-    memory-fs "~0.4.1"
-    micromatch "^3.1.8"
-    mkdirp "~0.5.0"
-    neo-async "^2.5.0"
-    node-libs-browser "^2.0.0"
-    schema-utils "^0.4.4"
-    tapable "^1.1.0"
-    terser-webpack-plugin "^1.1.0"
-    watchpack "^1.5.0"
-    webpack-sources "^1.3.0"
-
 websocket-driver@>=0.5.1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
diff --git a/server/models/account/user-notification.ts b/server/models/account/user-notification.ts
index 9e4f982a3..1094eec78 100644
--- a/server/models/account/user-notification.ts
+++ b/server/models/account/user-notification.ts
@@ -27,11 +27,27 @@ import { VideoBlacklistModel } from '../video/video-blacklist'
 import { VideoImportModel } from '../video/video-import'
 import { ActorModel } from '../activitypub/actor'
 import { ActorFollowModel } from '../activitypub/actor-follow'
+import { AvatarModel } from '../avatar/avatar'
 
 enum ScopeNames {
   WITH_ALL = 'WITH_ALL'
 }
 
+function buildActorWithAvatarInclude () {
+  return {
+    attributes: [ 'preferredUsername' ],
+    model: () => ActorModel.unscoped(),
+    required: true,
+    include: [
+      {
+        attributes: [ 'filename' ],
+        model: () => AvatarModel.unscoped(),
+        required: false
+      }
+    ]
+  }
+}
+
 function buildVideoInclude (required: boolean) {
   return {
     attributes: [ 'id', 'uuid', 'name' ],
@@ -40,19 +56,21 @@ function buildVideoInclude (required: boolean) {
   }
 }
 
-function buildChannelInclude (required: boolean) {
+function buildChannelInclude (required: boolean, withActor = false) {
   return {
     required,
     attributes: [ 'id', 'name' ],
-    model: () => VideoChannelModel.unscoped()
+    model: () => VideoChannelModel.unscoped(),
+    include: withActor === true ? [ buildActorWithAvatarInclude() ] : []
   }
 }
 
-function buildAccountInclude (required: boolean) {
+function buildAccountInclude (required: boolean, withActor = false) {
   return {
     required,
     attributes: [ 'id', 'name' ],
-    model: () => AccountModel.unscoped()
+    model: () => AccountModel.unscoped(),
+    include: withActor === true ? [ buildActorWithAvatarInclude() ] : []
   }
 }
 
@@ -60,47 +78,40 @@ function buildAccountInclude (required: boolean) {
   [ScopeNames.WITH_ALL]: {
     include: [
       Object.assign(buildVideoInclude(false), {
-        include: [ buildChannelInclude(true) ]
+        include: [ buildChannelInclude(true, true) ]
       }),
+
       {
         attributes: [ 'id', 'originCommentId' ],
         model: () => VideoCommentModel.unscoped(),
         required: false,
         include: [
-          buildAccountInclude(true),
+          buildAccountInclude(true, true),
           buildVideoInclude(true)
         ]
       },
+
       {
         attributes: [ 'id' ],
         model: () => VideoAbuseModel.unscoped(),
         required: false,
         include: [ buildVideoInclude(true) ]
       },
+
       {
         attributes: [ 'id' ],
         model: () => VideoBlacklistModel.unscoped(),
         required: false,
         include: [ buildVideoInclude(true) ]
       },
+
       {
         attributes: [ 'id', 'magnetUri', 'targetUrl', 'torrentName' ],
         model: () => VideoImportModel.unscoped(),
         required: false,
         include: [ buildVideoInclude(false) ]
       },
-      {
-        attributes: [ 'id', 'name' ],
-        model: () => AccountModel.unscoped(),
-        required: false,
-        include: [
-          {
-            attributes: [ 'id', 'preferredUsername' ],
-            model: () => ActorModel.unscoped(),
-            required: true
-          }
-        ]
-      },
+
       {
         attributes: [ 'id' ],
         model: () => ActorFollowModel.unscoped(),
@@ -111,7 +122,18 @@ function buildAccountInclude (required: boolean) {
             model: () => ActorModel.unscoped(),
             required: true,
             as: 'ActorFollower',
-            include: [ buildAccountInclude(true) ]
+            include: [
+              {
+                attributes: [ 'id', 'name' ],
+                model: () => AccountModel.unscoped(),
+                required: true
+              },
+              {
+                attributes: [ 'filename' ],
+                model: () => AvatarModel.unscoped(),
+                required: false
+              }
+            ]
           },
           {
             attributes: [ 'preferredUsername' ],
@@ -124,7 +146,9 @@ function buildAccountInclude (required: boolean) {
             ]
           }
         ]
-      }
+      },
+
+      buildAccountInclude(false, true)
     ]
   }
 })
@@ -132,10 +156,63 @@ function buildAccountInclude (required: boolean) {
   tableName: 'userNotification',
   indexes: [
     {
-      fields: [ 'videoId' ]
+      fields: [ 'userId' ]
     },
     {
-      fields: [ 'commentId' ]
+      fields: [ 'videoId' ],
+      where: {
+        videoId: {
+          [Op.ne]: null
+        }
+      }
+    },
+    {
+      fields: [ 'commentId' ],
+      where: {
+        commentId: {
+          [Op.ne]: null
+        }
+      }
+    },
+    {
+      fields: [ 'videoAbuseId' ],
+      where: {
+        videoAbuseId: {
+          [Op.ne]: null
+        }
+      }
+    },
+    {
+      fields: [ 'videoBlacklistId' ],
+      where: {
+        videoBlacklistId: {
+          [Op.ne]: null
+        }
+      }
+    },
+    {
+      fields: [ 'videoImportId' ],
+      where: {
+        videoImportId: {
+          [Op.ne]: null
+        }
+      }
+    },
+    {
+      fields: [ 'accountId' ],
+      where: {
+        accountId: {
+          [Op.ne]: null
+        }
+      }
+    },
+    {
+      fields: [ 'actorFollowId' ],
+      where: {
+        actorFollowId: {
+          [Op.ne]: null
+        }
+      }
     }
   ]
 })
@@ -297,12 +374,9 @@ export class UserNotificationModel extends Model<UserNotificationModel> {
   }
 
   toFormattedJSON (): UserNotification {
-    const video = this.Video ? Object.assign(this.formatVideo(this.Video), {
-      channel: {
-        id: this.Video.VideoChannel.id,
-        displayName: this.Video.VideoChannel.getDisplayName()
-      }
-    }) : undefined
+    const video = this.Video
+      ? Object.assign(this.formatVideo(this.Video),{ channel: this.formatActor(this.Video.VideoChannel) })
+      : undefined
 
     const videoImport = this.VideoImport ? {
       id: this.VideoImport.id,
@@ -315,10 +389,7 @@ export class UserNotificationModel extends Model<UserNotificationModel> {
     const comment = this.Comment ? {
       id: this.Comment.id,
       threadId: this.Comment.getThreadId(),
-      account: {
-        id: this.Comment.Account.id,
-        displayName: this.Comment.Account.getDisplayName()
-      },
+      account: this.formatActor(this.Comment.Account),
       video: this.formatVideo(this.Comment.Video)
     } : undefined
 
@@ -332,17 +403,15 @@ export class UserNotificationModel extends Model<UserNotificationModel> {
       video: this.formatVideo(this.VideoBlacklist.Video)
     } : undefined
 
-    const account = this.Account ? {
-      id: this.Account.id,
-      displayName: this.Account.getDisplayName(),
-      name: this.Account.Actor.preferredUsername
-    } : undefined
+    const account = this.Account ? this.formatActor(this.Account) : undefined
 
     const actorFollow = this.ActorFollow ? {
       id: this.ActorFollow.id,
       follower: {
+        id: this.ActorFollow.ActorFollower.Account.id,
         displayName: this.ActorFollow.ActorFollower.Account.getDisplayName(),
-        name: this.ActorFollow.ActorFollower.preferredUsername
+        name: this.ActorFollow.ActorFollower.preferredUsername,
+        avatar: this.ActorFollow.ActorFollower.Avatar ? { path: this.ActorFollow.ActorFollower.Avatar.getWebserverPath() } : undefined
       },
       following: {
         type: this.ActorFollow.ActorFollowing.VideoChannel ? 'channel' as 'channel' : 'account' as 'account',
@@ -374,4 +443,17 @@ export class UserNotificationModel extends Model<UserNotificationModel> {
       name: video.name
     }
   }
+
+  private formatActor (accountOrChannel: AccountModel | VideoChannelModel) {
+    const avatar = accountOrChannel.Actor.Avatar
+      ? { path: accountOrChannel.Actor.Avatar.getWebserverPath() }
+      : undefined
+
+    return {
+      id: accountOrChannel.id,
+      displayName: accountOrChannel.getDisplayName(),
+      name: accountOrChannel.Actor.preferredUsername,
+      avatar
+    }
+  }
 }
diff --git a/shared/models/actors/actor.model.ts b/shared/models/actors/actor.model.ts
index 6b3b1b47c..a3953874d 100644
--- a/shared/models/actors/actor.model.ts
+++ b/shared/models/actors/actor.model.ts
@@ -10,5 +10,5 @@ export interface Actor {
   followersCount: number
   createdAt: Date | string
   updatedAt: Date | string
-  avatar: Avatar
+  avatar?: Avatar
 }
diff --git a/shared/models/users/user-notification.model.ts b/shared/models/users/user-notification.model.ts
index f41b6f534..eaeb422df 100644
--- a/shared/models/users/user-notification.model.ts
+++ b/shared/models/users/user-notification.model.ts
@@ -22,16 +22,22 @@ export interface VideoInfo {
   name: string
 }
 
+export interface ActorInfo {
+  id: number
+  displayName: string
+  name: string
+  avatar?: {
+    path: string
+  }
+}
+
 export interface UserNotification {
   id: number
   type: UserNotificationType
   read: boolean
 
   video?: VideoInfo & {
-    channel: {
-      id: number
-      displayName: string
-    }
+    channel: ActorInfo
   }
 
   videoImport?: {
@@ -45,10 +51,7 @@ export interface UserNotification {
   comment?: {
     id: number
     threadId: number
-    account: {
-      id: number
-      displayName: string
-    }
+    account: ActorInfo
     video: VideoInfo
   }
 
@@ -62,18 +65,11 @@ export interface UserNotification {
     video: VideoInfo
   }
 
-  account?: {
-    id: number
-    displayName: string
-    name: string
-  }
+  account?: ActorInfo
 
   actorFollow?: {
     id: number
-    follower: {
-      name: string
-      displayName: string
-    }
+    follower: ActorInfo
     following: {
       type: 'account' | 'channel'
       name: string
diff --git a/shared/models/videos/video.model.ts b/shared/models/videos/video.model.ts
index 4a9fa58b1..022876a0b 100644
--- a/shared/models/videos/video.model.ts
+++ b/shared/models/videos/video.model.ts
@@ -24,7 +24,7 @@ export interface VideoChannelAttribute {
   displayName: string
   url: string
   host: string
-  avatar: Avatar
+  avatar?: Avatar
 }
 
 export interface AccountAttribute {
@@ -34,7 +34,7 @@ export interface AccountAttribute {
   displayName: string
   url: string
   host: string
-  avatar: Avatar
+  avatar?: Avatar
 }
 
 export interface Video {
-- 
2.41.0