From 70b430b39d4d41492e7a5f9afc8e22de626e2524 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 26 Jun 2020 11:17:44 +0200
Subject: [PATCH] feature: notifications__item stylized

---
 src/styles/abstracts/_variables.scss |  4 +++-
 src/styles/base/header.scss          | 35 +++++++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index ae485e0..5bfd85a 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -33,7 +33,6 @@
   --color-main-text: var(--color-grey-4);
   --color-highlight-primary: var(--color-primary);
   --color-user-panel: var(--color-black);
-  --color-bell: var(--color-secondary);
   --color-avatar-background: var(--color-grey-10);
   --color-title: var(--color-secondary);
   --color-h1: var(--color-secondary);
@@ -42,6 +41,9 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-secondary);
+  --color-notification-summary: var(--color-grey-4);
+  --solid-notifications-theme: var(--color-primary);
+  --color-notification-item-border: var(--color-grey-12);
   --color-user-panel-header-text: var(--color-secondary);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 9e9a011..8ad1c6c 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -122,7 +122,40 @@ solid-notifications {
         left: auto;
         right: 0;
         top: 5.6rem;
-        width: 300px;
+        width: 347px;
+      }
+
+      .solid-notifications__item {
+        border-bottom: 2px solid var(--color-notification-item-border);
+
+        .solid-notification {
+
+
+          .solid-notification__avatar {
+            margin-left: 1.6rem;
+            margin-right: 1.4rem;
+          }
+
+          .solid-notification__content {
+
+            .solid-notification__summary {
+              color: var(--color-notification-summary);
+              font-size: 1.2rem;
+              line-height: 1.7rem;
+              margin: 1.1rem 0 1.1rem;
+            }
+
+            .solid-notification__date {
+              display: none;
+            }
+          }
+
+          .solid-notification__read {
+            read-badge[data-unread='unread'] {
+              
+            }
+          }
+        }
       }
     }
   }