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

Inject them in an angular component so we can easily change their color
---
 .../my-account-notifications.component.html                    | 10 ++++++++--
 .../my-account-notifications.component.scss                    |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'client/src/app/+my-account/my-account-notifications')

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);
   }
 }
 
-- 
cgit v1.2.3