Refactor how we use icons

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / users / user-notifications.component.scss

diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 0493b10d9330f1bf32fb7a08734aafe3277d0098..315d504c9e6374b51506ddfdb97091466b26f2a7 100644 (file)
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -1,30 +1,51 @@
+@import '_variables';
+@import '_mixins';
+
+.no-notification {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+}
+
 .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);
 
-    &:hover .mark-as-read .glyphicon {
-      display: block;
+    margin-right: 10px;
+  }
+
+  .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;
+  }
 }