feature: left-menu: messages

src/menu-left.pug

@@ -14,7 +14,7 @@ solid-widget(name='hubl-menu-publicprivate')
 
 solid-widget(name='hubl-create')
   template
-    p.create 
+    p.create.segment.margin-left-small
       span(data-trans="menuLeft.emptyCircleProject.notPartOf")
       span  ${value}.
       br
@@ -58,26 +58,32 @@ solid-router#navbar-router(default-route='dashboard')
     solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard')
       div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
+    div.divider
   if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
     solid-route.menu.segment.lg-auto.padding.text-bold(name='members')
       div.menu-icon.icon-people.segment.lg-auto.margin-right-small.float-left
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
+    div.divider
   if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
     solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
       div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-small.float-left
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
+    div.divider
   if endpoints.resources || (endpoints.get && endpoints.get.resources)
     solid-route.menu.segment.lg-auto.padding.text-bold(name='resources')
       div.menu-icon.icon-docs.segment.lg-auto.margin-right-small.float-left
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
+    div.divider
   if endpoints.polls || (endpoints.get && endpoints.get.polls)
     solid-route.menu.segment.lg-auto.padding.text-bold(name='polls')
       div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-small.float-left
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
+    div.divider
   if endpoints.events || (endpoints.get && endpoints.get.events)
     solid-route.menu.segment.lg-auto.padding.text-bold(name='events')
       div.menu-icon.icon-calendar.segment.lg-auto.margin-right-small.float-left
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
+    div.divider
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     div.menu-wrapper
       solid-link.segment.lg-full
@@ -89,7 +95,7 @@ solid-router#navbar-router(default-route='dashboard')
             div.menu-icon.icon-arrow-up
             //- div.menu-icon.icon-arrow-right-circle
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
-      div.sub-menu.menu-notification
+      div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
         div#loader-projects.loader.loader-menu
           div
           div
@@ -118,7 +124,7 @@ solid-router#navbar-router(default-route='dashboard')
             div.menu-icon.icon-arrow-up
             //- div.menu-icon.icon-arrow-right-circle
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
-      div.sub-menu.menu-notification
+      div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
         div#loader-circles.loader.loader-menu
           div
           div
@@ -144,7 +150,7 @@ solid-router#navbar-router(default-route='dashboard')
         div.menu-chevron.segment.lg-auto.float-left
           div.menu-icon.icon-arrow-up
       solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
-      div.sub-menu.menu-notification
+      div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
         div#loader-messages.loader.loader-menu
           div
           div

src/styles/base/main.scss

@@ -66,6 +66,9 @@
   &.margin-left {
     margin-left: 20px;
   }
+  &.margin-left-small {
+    margin-left: 15px;
+  }
   &.margin-right-small {
     margin-right: 15px;
   }

src/styles/base/menu-left.scss

@@ -43,7 +43,6 @@
 
     .menu {
       cursor: pointer;
-      border-bottom: 1px solid #4F5E72;
       display: flex;
       align-items: center;
       /*flex-direction: row-reverse;*/
@@ -53,15 +52,18 @@
       &[active] {
         background-color: var(--color-third);
         color: var(--color-heading);
-        border-bottom: none;
 
         .menu-icon:before {
           background-color: var(--color-heading);
           color: white;
         }
 
-        .menu-notification>solid-display>div:first-child {
+        /*.menu-notification>solid-display>div:first-child {
           background-color: var(--color-menu-badge-background);
+        }*/
+
+        &+.divider {
+          display: none;
         }
       }
 
@@ -164,6 +166,15 @@
       }
 
       /* Ellipsis for message tab */
+      .message-tab>div {
+        width: 100%;
+
+        &>solid-display {
+          display: block;
+          margin-top: 15px;
+          margin-left: 15px;
+        }
+      }
 
       .message-tab>div>solid-display>div>solid-display-div>div {
         box-sizing: border-box;
@@ -179,15 +190,16 @@
         margin-bottom: 10px;
         width: calc(80vw - 71px);
         display: block;
-        background-color: var(--color-secondary);
+        background-color: var(--color-heading);
-        color: var(--color-white);
+        color: white;
-        border: 1px solid var(--color-grey-4);
+        border: 1px solid white;
         border-radius: 3px;
-        padding: 4px;
+        padding-left: 9.5px;
+        height: 27px;
+        opacity: 0.8;
 
         @include breakpoint(lg) {
           margin: auto;
-          margin-bottom: 10px;
           width: auto;
         }
       }
@@ -228,15 +240,15 @@
         }
       }
 
-      >solid-display.nosub>div>solid-display>div {
+      /*>solid-display.nosub>div>solid-display>div {
         padding: 1rem 1rem 1rem 3rem;
-      }
+      }*/
 
       solid-display>div {
 
         .create {
-          color: var(--color-white);
+          /*color: white;*/
-          margin: 1rem 1rem 2.2rem 3.2rem;
+          /*margin: 1rem 1rem 2.2rem 3.2rem;*/
         }
 
         &>solid-display {
@@ -262,8 +274,8 @@
         &>solid-display[active]>div,
         &>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
         &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
-          background-color: var(--color-menu-highlight-primary);
+          background-color: var(--color-third);
-          color: var(--color-menu-text-active);
+          color: var(--color-heading);
           font-weight: bold;
         }
       }
@@ -283,21 +295,21 @@
         }
 
         hubl-counter {
-          height: 20px;
+          /*height: 20px;
-          width: 20px;
+          width: 20px;*/
           margin-right: 1em;
 
           div.counter:not([data-nb-unread="0"]) {
             text-align: center;
             display: block;
-            background-color: var(--sib-notifications-theme, gray);
+            background-color: var(--color-third, gray);
             border-radius: 50%;
             font-size: 12px;
             line-height: 20px;
             width: 20px;
             height: 20px;
             padding-bottom: 0;
-            color: var(--color-secondary);
+            color: var(--color-heading);
           }
         }
       }
@@ -305,7 +317,8 @@
 
     .divider {
       height: 1px;
-      background-color: #4F5E72;
+      background-color: #D7DBE0;
+      opacity: 0.2;
     }
   }
 }