From 179f72216c7d97a8606617b355e98dad53be0a7c Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 25 Jun 2020 23:20:17 +0200
Subject: [PATCH 01/21] notification on local

---
 src/styles/base/header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 1288dff..4634d8d 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -67,7 +67,7 @@ details {
 }
 /* End */
 
-sib-notifications {
+solid-notifications {
   color: var(--color-bell);
 
   @include breakpoint(sm) {

From cd63ab965652ba9487698eed57f4d7929ca3c9a8 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 26 Jun 2020 09:19:21 +0200
Subject: [PATCH 02/21] fix: old css replaced

---
 src/dependencies.pug        | 2 +-
 src/header.pug              | 2 +-
 src/styles/base/header.scss | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index f5c7451..2f74b10 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -11,7 +11,7 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer)
 script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer)
     //- script(type="module" src="/lib/solid-router/src/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.4" defer)
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5.0-beta.2" defer)
     //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 if endpoints.events || (endpoints.get && endpoints.get.events)
diff --git a/src/header.pug b/src/header.pug
index 75a2806..33df8cc 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -2,7 +2,7 @@
   solid-link(next='dashboard')
     img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
 
-sib-notifications.notLoggedIn(
+solid-notifications.notLoggedIn(
   nested-field="inbox"
   bind-user
 )
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 4634d8d..9e9a011 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -74,10 +74,10 @@ solid-notifications {
     padding: 0;
   }
 
-  .sib-notifications__container {
+  .solid-notifications__container {
     position: relative;
   
-    .sib-notifications__button {
+    .solid-notifications__button {
       @include icon('bell');
         font-size: 2.5rem;
 
@@ -93,7 +93,7 @@ solid-notifications {
         display: none;
       }
   
-      .sib-notifications__counter {
+      .solid-notifications__counter {
         left: 2rem;
         position: absolute;
         top: 1px;
@@ -105,7 +105,7 @@ solid-notifications {
       }
     }
   
-    .sib-notifications__list {
+    .solid-notifications__list {
       overflow-x: hidden;
       position: fixed;
       left: 0;

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 03/21] 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'] {
+              
+            }
+          }
+        }
       }
     }
   }

From f8c43b74f34aee0205b4d3e236423dc758059a00 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 26 Jun 2020 14:10:51 +0200
Subject: [PATCH 04/21] feature: notifications__item styling scrollbar

---
 src/styles/abstracts/_variables.scss |  2 ++
 src/styles/base/header.scss          | 25 ++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 5bfd85a..136c6d7 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -44,6 +44,8 @@
   --color-notification-summary: var(--color-grey-4);
   --solid-notifications-theme: var(--color-primary);
   --color-notification-item-border: var(--color-grey-12);
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: var(--color-grey-8);
   --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 8ad1c6c..9d9af2e 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -106,12 +106,35 @@ solid-notifications {
     }
   
     .solid-notifications__list {
-      overflow-x: hidden;
+    
       position: fixed;
       left: 0;
       top: 4.5rem;
       width: 100vw;
 
+
+      overflow: auto;
+      height: 60px;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none;
+
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background);
+
+      &::-webkit-scrollbar-track {
+        background: var(--color-notification-scrollbar-background);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-notification-scrollbar-track);
+        border-radius: 6px;
+        border: 3px solid var(--color-notification-scrollbar-background);
+      }
+
+      &::-webkit-scrollbar {
+        width: 11px;
+      }
+
       @include breakpoint(md) {
         border: 0;
         border-radius: 0;

From f41970dadc1950bef866bf78f266ca0f605bbeff Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 26 Jun 2020 15:09:41 +0200
Subject: [PATCH 05/21] feature: styling scrollbar end

---
 src/styles/base/header.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 9d9af2e..a15b03c 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -106,15 +106,13 @@ solid-notifications {
     }
   
     .solid-notifications__list {
-    
       position: fixed;
       left: 0;
       top: 4.5rem;
       width: 100vw;
 
-
+      /* Custom scrollbar */
       overflow: auto;
-      height: 60px;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: none;
 
@@ -128,12 +126,12 @@ solid-notifications {
       &::-webkit-scrollbar-thumb {
         background-color: var(--color-notification-scrollbar-track);
         border-radius: 6px;
-        border: 3px solid var(--color-notification-scrollbar-background);
       }
 
       &::-webkit-scrollbar {
-        width: 11px;
+        width: 6px;
       }
+      /* End of custom scrollbar */
 
       @include breakpoint(md) {
         border: 0;

From a797804bdfa884d6775a649d4e76ad08bb104bae Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 26 Jun 2020 15:44:02 +0200
Subject: [PATCH 06/21] feature: box-shadow added + new margins and paddongs

---
 src/styles/base/header.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index a15b03c..494b8ce 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -106,6 +106,9 @@ solid-notifications {
     }
   
     .solid-notifications__list {
+      border: none;
+      border-radius: 0;
+      box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
       position: fixed;
       left: 0;
       top: 4.5rem;
@@ -142,17 +145,19 @@ solid-notifications {
         position: absolute;
         left: auto;
         right: 0;
-        top: 5.6rem;
+        top: 5.7rem;
         width: 347px;
       }
 
       .solid-notifications__item {
-        border-bottom: 2px solid var(--color-notification-item-border);
+        border-bottom: 1px solid var(--color-notification-item-border);
 
         .solid-notification {
-
+          padding: 1.2rem 0 1.5rem;
 
           .solid-notification__avatar {
+            height: 35px;
+            width: 35px;
             margin-left: 1.6rem;
             margin-right: 1.4rem;
           }
@@ -163,7 +168,7 @@ solid-notifications {
               color: var(--color-notification-summary);
               font-size: 1.2rem;
               line-height: 1.7rem;
-              margin: 1.1rem 0 1.1rem;
+              margin: 1.1rem 0 0;
             }
 
             .solid-notification__date {

From 9cb7977d3bc2515b22bf0b1d26e715cdccabe96b Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sat, 27 Jun 2020 17:23:08 +0200
Subject: [PATCH 07/21] feature: color for counter number

---
 src/styles/abstracts/_variables.scss |  1 +
 src/styles/base/header.scss          | 10 ++++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 136c6d7..03b17c9 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -41,6 +41,7 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-secondary);
+  --color-notification-counter-number: var(--color-white);
   --color-notification-summary: var(--color-grey-4);
   --solid-notifications-theme: var(--color-primary);
   --color-notification-item-border: var(--color-grey-12);
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 494b8ce..726a564 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -102,6 +102,10 @@ solid-notifications {
           left: 2.1rem;
           top: -3px;
         }
+
+        span {
+          color: var(--color-notification-counter-number);
+        }
       }
     }
   
@@ -175,12 +179,6 @@ solid-notifications {
               display: none;
             }
           }
-
-          .solid-notification__read {
-            read-badge[data-unread='unread'] {
-              
-            }
-          }
         }
       }
     }

From 1ce47b03dd6685ab1b566604d5e65084a716d78f Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 29 Jun 2020 11:15:31 +0200
Subject: [PATCH 08/21] feature: notification responsive

---
 src/styles/base/header.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 726a564..79991f0 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -122,7 +122,6 @@ solid-notifications {
       overflow: auto;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: none;
-
       scrollbar-width: thin;
       scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background);
 
@@ -173,12 +172,24 @@ solid-notifications {
               font-size: 1.2rem;
               line-height: 1.7rem;
               margin: 1.1rem 0 0;
+
+              @include breakpoint(320px, 388px) {
+                max-width: 226px;
+              }
+
+              @include breakpoint(lg) {
+                max-width: 256px;
+              }
             }
 
             .solid-notification__date {
               display: none;
             }
           }
+
+          .solid-notification__read {
+            display: none;
+          }
         }
       }
     }

From b878ced4c85ce2cc8d99e689b62269f61e1b8a44 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 29 Jun 2020 14:30:42 +0200
Subject: [PATCH 09/21] feature: notification full height

---
 client.sample.happy-dev.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css
index f75cb0a..2ce6bdc 100644
--- a/client.sample.happy-dev.css
+++ b/client.sample.happy-dev.css
@@ -27,6 +27,12 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-complementary-darken);
+  --color-notification-counter-number: black;
+  --color-notification-summary: #7A7F85;
+  --solid-notifications-theme: var(--color-primary);
+  --color-notification-item-border: #E4E8ED;
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: #BDC2D7;
   --color-user-panel-header-text: var(--color-complementary-darken);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);

From c322b1109f20c9dc2be070b6a06877f76680ecae Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 29 Jun 2020 14:33:02 +0200
Subject: [PATCH 10/21] feature: notification full height

---
 src/styles/base/header.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 79991f0..8ba3366 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -113,6 +113,7 @@ solid-notifications {
       border: none;
       border-radius: 0;
       box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
+      max-height: calc(100vh - 84px);
       position: fixed;
       left: 0;
       top: 4.5rem;

From 7cfea37b1e490791b1df09aa87825fc4270b3682 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 2 Jul 2020 12:23:02 +0200
Subject: [PATCH 11/21] feature: notification - typo

---
 src/styles/base/header.scss |   6 ++
 src/styles/base/main.scss   | 115 ++++++++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 8ba3366..8365842 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -167,6 +167,12 @@ solid-notifications {
           }
 
           .solid-notification__content {
+            font-family: Open Sans, sans-serif;
+
+            .solid-notification__title {
+              font-size: 1.3rem;
+              font-weight: 600;
+            }
 
             .solid-notification__summary {
               color: var(--color-notification-summary);
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 23a12a6..c5b5ff9 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -279,6 +279,121 @@ h5 {
   width: 15vw;
 }
 
+.project-edit-logo {
+  display: flex;
+  height: 8.5vh;
+  margin-top: 20px;
+  margin-bottom: 30px;
+
+  form {
+    display: flex;
+  }
+
+  hubl-user-avatar {
+    width: 104px;
+  }
+
+  input[type='submit'] {
+    @extend .button,
+    .text-bold,
+    .text-uppercase,
+    .button-primary,
+    .bordered;
+    align-self: center;
+  }
+}
+
+.form-picture {
+
+  form {
+    display: block;
+    text-align: center;
+    margin-bottom: 2.6rem;
+    padding-top: 1.8rem;
+
+    @include breakpoint(lg) {
+      display: flex;
+      width: 100%;
+    }
+
+    hubl-user-avatar {
+      display: inline-block;
+      max-width: 100%;
+      max-height: 16.5vh;
+
+      @include breakpoint(lg) {
+        margin-left: 20px;
+        max-height: 8.5vh;
+        max-width: none;
+        width: calc(35vw - 20px);
+      }
+
+      >object,
+      >img {
+        display: block;
+        max-height: 16.5vh !important;
+
+        @include breakpoint(lg) {
+          max-height: 8.5vh !important;
+        }
+      }
+    }
+
+    input {
+      @extend .button,
+      .text-bold,
+      .text-uppercase,
+      .button-primary,
+      .bordered;
+      margin: 10px 0;
+      width: 100%;
+
+      @include breakpoint(lg) {
+        margin: auto 0 auto 2.2rem;
+        width: auto;
+      }
+    }
+  }
+}
+
+
+.p_relative {
+  position: relative;
+}
+
+.is-inline-1200 {
+
+  @include breakpoint(lg) {
+    flex-direction: row;
+  }
+}
+
+.flex_vertical-center {
+  align-items: center;
+}
+
+.flex_column {
+  flex-direction: column;
+}
+
+.pull-left-1200 {
+
+  @include breakpoint(lg) {
+    float: left;
+  }
+}
+
+.profile-avatar {
+  height: 243px;
+  width: 243px;
+  margin-left: 2rem;
+}
+
+solid-picture {
+  
+}
+
+
 .content-box {
   @include window-style-modal();
   flex-direction: column;

From 897dc336c256f95132da22c56845586b916f7c76 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 9 Jul 2020 12:30:23 +0200
Subject: [PATCH 12/21] feature: notification - top triangle ok on desktop

---
 src/dependencies.pug        |  2 +-
 src/styles/base/header.scss | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 2f74b10..61dc886 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -11,7 +11,7 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer)
 script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer)
     //- script(type="module" src="/lib/solid-router/src/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5.0-beta.2" defer)
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5.0-beta.3" defer)
     //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 if endpoints.events || (endpoints.get && endpoints.get.events)
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 8365842..cee96ef 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -108,6 +108,39 @@ solid-notifications {
         }
       }
     }
+
+    .solid-notifications__triangle-back {
+      display: none;
+    }
+
+    .solid-notifications__triangle-shadow {
+      position: absolute;
+      left: auto;
+      right: -2.1em;
+      top: 5em;
+      height: 1rem;
+      background: white;
+
+      width: 0;
+      transform: initial;
+      
+      z-index: 4;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        margin-left: -5em;
+        top: 0px;
+        left: 50%;
+        border: 1em solid black;
+        border-color: #fff #fff transparent transparent;
+        transform-origin: 0 0;
+        transform: rotate(-45deg);
+        box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+      }
+    }
   
     .solid-notifications__list {
       border: none;
@@ -115,8 +148,8 @@ solid-notifications {
       box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
       max-height: calc(100vh - 84px);
       position: fixed;
-      left: 0;
-      top: 4.5rem;
+      right: -30px !important;
+      top: 3.99em !important;
       width: 100vw;
 
       /* Custom scrollbar */

From f83b4582407028ea3679ba791e1a98912fff64a0 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 9 Jul 2020 14:31:14 +0200
Subject: [PATCH 13/21] feature: notification - ok on mobile

---
 src/styles/base/header.scss | 74 ++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index cee96ef..f1d2daf 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -114,31 +114,33 @@ solid-notifications {
     }
 
     .solid-notifications__triangle-shadow {
-      position: absolute;
-      left: auto;
-      right: -2.1em;
-      top: 5em;
-      height: 1rem;
-      background: white;
+      display: none;
 
-      width: 0;
-      transform: initial;
-      
-      z-index: 4;
-
-      &::after {
-        content: "";
+      @include breakpoint(lg) {
+        background: white;
+        display: block;
         position: absolute;
+        left: auto;
+        right: -2.1em;
+        top: 5em;
+        transform: initial;
         width: 0;
-        height: 0;
-        margin-left: -5em;
-        top: 0px;
-        left: 50%;
-        border: 1em solid black;
-        border-color: #fff #fff transparent transparent;
-        transform-origin: 0 0;
-        transform: rotate(-45deg);
-        box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+        z-index: 4;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin-left: -5em;
+          top: 0px;
+          left: 50%;
+          border: 1em solid black;
+          border-color: #fff #fff transparent transparent;
+          transform-origin: 0 0;
+          transform: rotate(-45deg);
+          box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+        }
       }
     }
   
@@ -146,11 +148,20 @@ solid-notifications {
       border: none;
       border-radius: 0;
       box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
-      max-height: calc(100vh - 84px);
+      max-height: calc(100vh - 50px);
       position: fixed;
-      right: -30px !important;
-      top: 3.99em !important;
+      left: 0;
+      top: 2.5em;
       width: 100vw;
+      
+      @include breakpoint(lg) {
+        max-height: calc(100vh - 93px);
+        position: absolute;
+        left: auto;
+        right: -2.3em;
+        top: 3.99em;
+        width: 347px;
+      }
 
       /* Custom scrollbar */
       overflow: auto;
@@ -173,19 +184,6 @@ solid-notifications {
       }
       /* End of custom scrollbar */
 
-      @include breakpoint(md) {
-        border: 0;
-        border-radius: 0;
-      }
-
-      @include breakpoint(lg) {
-        position: absolute;
-        left: auto;
-        right: 0;
-        top: 5.7rem;
-        width: 347px;
-      }
-
       .solid-notifications__item {
         border-bottom: 1px solid var(--color-notification-item-border);
 

From 218e74955bdc60726e92d0c7ef698aff6ca031e9 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 9 Jul 2020 15:49:56 +0200
Subject: [PATCH 14/21] feature: notification - templates for circle and
 private notification added

---
 src/header.pug                                |   4 +
 src/styles/base/header.scss                   |   8 +-
 src/styles/base/main.scss                     | 115 ------------------
 .../circle/page-circle-notifications.pug      |   8 ++
 src/views/user/page-user-notifications.pug    |   8 ++
 5 files changed, 24 insertions(+), 119 deletions(-)
 create mode 100644 src/views/circle/page-circle-notifications.pug
 create mode 100644 src/views/user/page-user-notifications.pug

diff --git a/src/header.pug b/src/header.pug
index 33df8cc..1320e54 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -7,6 +7,10 @@ solid-notifications.notLoggedIn(
   bind-user
 )
 
+//- Templates for notifications from circles and from other users
+include views/circle/page-circle-notifications.pug
+include views/user/page-user-notifications.pug
+
 include templates/hubl-user-avatar.pug
 
 details#user-controls.notLoggedIn
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index f1d2daf..cfc8b82 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -203,6 +203,10 @@ solid-notifications {
             .solid-notification__title {
               font-size: 1.3rem;
               font-weight: 600;
+
+              .solid-notification__title__side {
+                font-weight: normal;
+              }
             }
 
             .solid-notification__summary {
@@ -219,10 +223,6 @@ solid-notifications {
                 max-width: 256px;
               }
             }
-
-            .solid-notification__date {
-              display: none;
-            }
           }
 
           .solid-notification__read {
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c5b5ff9..23a12a6 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -279,121 +279,6 @@ h5 {
   width: 15vw;
 }
 
-.project-edit-logo {
-  display: flex;
-  height: 8.5vh;
-  margin-top: 20px;
-  margin-bottom: 30px;
-
-  form {
-    display: flex;
-  }
-
-  hubl-user-avatar {
-    width: 104px;
-  }
-
-  input[type='submit'] {
-    @extend .button,
-    .text-bold,
-    .text-uppercase,
-    .button-primary,
-    .bordered;
-    align-self: center;
-  }
-}
-
-.form-picture {
-
-  form {
-    display: block;
-    text-align: center;
-    margin-bottom: 2.6rem;
-    padding-top: 1.8rem;
-
-    @include breakpoint(lg) {
-      display: flex;
-      width: 100%;
-    }
-
-    hubl-user-avatar {
-      display: inline-block;
-      max-width: 100%;
-      max-height: 16.5vh;
-
-      @include breakpoint(lg) {
-        margin-left: 20px;
-        max-height: 8.5vh;
-        max-width: none;
-        width: calc(35vw - 20px);
-      }
-
-      >object,
-      >img {
-        display: block;
-        max-height: 16.5vh !important;
-
-        @include breakpoint(lg) {
-          max-height: 8.5vh !important;
-        }
-      }
-    }
-
-    input {
-      @extend .button,
-      .text-bold,
-      .text-uppercase,
-      .button-primary,
-      .bordered;
-      margin: 10px 0;
-      width: 100%;
-
-      @include breakpoint(lg) {
-        margin: auto 0 auto 2.2rem;
-        width: auto;
-      }
-    }
-  }
-}
-
-
-.p_relative {
-  position: relative;
-}
-
-.is-inline-1200 {
-
-  @include breakpoint(lg) {
-    flex-direction: row;
-  }
-}
-
-.flex_vertical-center {
-  align-items: center;
-}
-
-.flex_column {
-  flex-direction: column;
-}
-
-.pull-left-1200 {
-
-  @include breakpoint(lg) {
-    float: left;
-  }
-}
-
-.profile-avatar {
-  height: 243px;
-  width: 243px;
-  margin-left: 2rem;
-}
-
-solid-picture {
-  
-}
-
-
 .content-box {
   @include window-style-modal();
   flex-direction: column;
diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
new file mode 100644
index 0000000..25bf825
--- /dev/null
+++ b/src/views/circle/page-circle-notifications.pug
@@ -0,0 +1,8 @@
+solid-notifications-template(data-rdf-type='hd:circle')
+  template
+    .solid-notification__avatar
+      img(src="${await author['account.foaf:depiction']}")
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side dans #${await object.name}
+      p.solid-notification__summary ${summary}
diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
new file mode 100644
index 0000000..fd4aef3
--- /dev/null
+++ b/src/views/user/page-user-notifications.pug
@@ -0,0 +1,8 @@
+solid-notifications-template(data-rdf-type='foaf:user')
+  template
+    .solid-notification__avatar
+      img(src="${await author['account.foaf:depiction']}")
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side en privé
+      p.solid-notification__summary ${summary}
\ No newline at end of file

From da4c1cf69c77705691cd92c13488473c99478167 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 10 Jul 2020 11:43:21 +0200
Subject: [PATCH 15/21] feature: notification - dynamic icons added

---
 src/styles/base/header.scss                    | 4 ++++
 src/views/circle/page-circle-notifications.pug | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index cfc8b82..4b3b692 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -207,6 +207,10 @@ solid-notifications {
               .solid-notification__title__side {
                 font-weight: normal;
               }
+
+              .solid-notification__title__icon {
+                font-family: simple-line-icons;
+              }
             }
 
             .solid-notification__summary {
diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
index 25bf825..90b2e86 100644
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@@ -4,5 +4,7 @@ solid-notifications-template(data-rdf-type='hd:circle')
       img(src="${await author['account.foaf:depiction']}")
     .solid-notification__content
       .solid-notification__title ${await author.name} 
-        span.solid-notification__title__side dans #${await object.name}
+        span.solid-notification__title__side dans 
+          span.solid-notification__title__icon ${(await object.status) == 'Public' ? '#' : ''} 
+          | ${await object.name}
       p.solid-notification__summary ${summary}

From 4b52f0a49e67c5644e96a71127b8c0bc69eb790b Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 10 Jul 2020 16:38:55 +0200
Subject: [PATCH 16/21] feature: notification - default avatar + styles added

---
 src/styles/base/header.scss                    | 5 +++++
 src/views/circle/page-circle-notifications.pug | 2 +-
 src/views/user/page-user-notifications.pug     | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 4b3b692..883cd94 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -191,10 +191,15 @@ solid-notifications {
           padding: 1.2rem 0 1.5rem;
 
           .solid-notification__avatar {
+            background: var(--color-avatar-background);
+            display: flex;
+            align-items: center;
+            justify-content: center;
             height: 35px;
             width: 35px;
             margin-left: 1.6rem;
             margin-right: 1.4rem;
+            overflow: hidden;
           }
 
           .solid-notification__content {
diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
index 90b2e86..19a3ebb 100644
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='hd:circle')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction']}")
+      img(src="${await author['account.foaf:depiction']} || /../../images/alien.svg" style=`max-height:${clientLogoHeight || '18px'}`)
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side dans 
diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
index fd4aef3..5b31006 100644
--- a/src/views/user/page-user-notifications.pug
+++ b/src/views/user/page-user-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='foaf:user')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction']}")
+      img(src="${await author['account.foaf:depiction']} || /../../images/alien.svg" style=`max-height:${clientLogoHeight || '18px'}`)
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side en privé

From 2fbd5095ae9fafb056e94be0434dfdc65d546552 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 15 Jul 2020 14:13:32 +0000
Subject: [PATCH 17/21] Update dependencies.pug

---
 src/dependencies.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index c0c460c..0d9e144 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -11,7 +11,7 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer)
 script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer)
     //- script(type="module" src="/lib/solid-router/src/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5.0-beta.3" defer)
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5" defer)
     //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 if endpoints.events || (endpoints.get && endpoints.get.events)

From 729b15dc04d9af076fdd3dcc60e090a9d1a3734c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 15 Jul 2020 14:49:57 +0000
Subject: [PATCH 18/21] Update page-circle-notifications.pug

---
 src/views/circle/page-circle-notifications.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
index 19a3ebb..39590a7 100644
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='hd:circle')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction']} || /../../images/alien.svg" style=`max-height:${clientLogoHeight || '18px'}`)
+      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style=`max-height:${clientLogoHeight || '18px'}`)
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side dans 

From e56e2880d7f3a371d2f1ca892c8740b00cc77f1a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 15 Jul 2020 14:50:02 +0000
Subject: [PATCH 19/21] Update page-user-notifications.pug

---
 src/views/user/page-user-notifications.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
index 5b31006..7ae707b 100644
--- a/src/views/user/page-user-notifications.pug
+++ b/src/views/user/page-user-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='foaf:user')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction']} || /../../images/alien.svg" style=`max-height:${clientLogoHeight || '18px'}`)
+      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style=`max-height:${clientLogoHeight || '18px'}`)
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side en privé

From 014cfaa5c874ce9e736cfc811c53adc0f1417982 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 15 Jul 2020 19:21:49 +0200
Subject: [PATCH 20/21] feature: notification - default avatar + styles added
 (bis)

---
 src/views/circle/page-circle-notifications.pug | 2 +-
 src/views/user/page-user-notifications.pug     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
index 39590a7..2ebc1ea 100644
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='hd:circle')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style=`max-height:${clientLogoHeight || '18px'}`)
+      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style="${await author['account.foaf:depiction'] ? 'max-height:100%' : 'max-height:18px'}")
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side dans 
diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
index 7ae707b..56fdd8f 100644
--- a/src/views/user/page-user-notifications.pug
+++ b/src/views/user/page-user-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='foaf:user')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style=`max-height:${clientLogoHeight || '18px'}`)
+      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style="${await author['account.foaf:depiction'] ? 'max-height:100%' : 'max-height:18px'}")
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side en privé

From 8ff7994089aaf9ba42f8594f5ef0c461a756b289 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 16 Jul 2020 13:51:52 +0200
Subject: [PATCH 21/21] feature: notification - default avatar + styles added
 (ter)

---
 src/styles/base/header.scss                   | 21 ++++++++++++++++---
 .../circle/page-circle-notifications.pug      |  2 +-
 src/views/user/page-user-notifications.pug    |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 883cd94..7966a19 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -191,15 +191,30 @@ solid-notifications {
           padding: 1.2rem 0 1.5rem;
 
           .solid-notification__avatar {
+            align-items: center;
             background: var(--color-avatar-background);
             display: flex;
-            align-items: center;
-            justify-content: center;
             height: 35px;
-            width: 35px;
+            justify-content: center;
             margin-left: 1.6rem;
             margin-right: 1.4rem;
             overflow: hidden;
+            position: relative;
+            vertical-align: middle;
+            width: 35px;
+
+            img {
+              background-color: var(--color-grey-10);
+              height: 100%;
+              object-fit: cover;
+              object-position: center center;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
           }
 
           .solid-notification__content {
diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
index 2ebc1ea..239c674 100644
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='hd:circle')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style="${await author['account.foaf:depiction'] ? 'max-height:100%' : 'max-height:18px'}")
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side dans 
diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
index 56fdd8f..ee785d9 100644
--- a/src/views/user/page-user-notifications.pug
+++ b/src/views/user/page-user-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='foaf:user')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style="${await author['account.foaf:depiction'] ? 'max-height:100%' : 'max-height:18px'}")
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side en privé