feature: project-profile page

- css added or reviewed
- templates added or reviewed (customer, business provider, team)
- modal added and stylised
- routes reviewed
- navbar reviewed (adapted according to the content of the main section
- admin status added
- new staging added.

src/styles/base/form.scss

@@ -381,74 +381,5 @@
         }
       }
     }
-
-    [widget='hd-project-members'] {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-
-      &>label {
-        display: none;
-      }
-
-      &>div {
-        align-items: center;
-        border: 1px solid $color-43-100-50;
-        border-radius: 3px;
-        display: flex;
-        margin: 0 1.5rem 1.5rem 0;
-        padding: 2.2rem;
-
-        .member-info>div {
-          display: grid;
-          grid-template-areas: "avatar name"
-            "avatar role";
-          grid-column-gap: 15px;
-          margin-right: 15px;
-        }
-
-        &>button {
-          cursor: pointer;
-          background-color: transparent;
-          border: 1px solid $color-43-100-50;
-          border-radius: 50%;
-          color: $color-43-100-50;
-          height: 22px;
-          width: 22px;
-        }
-      }
-
-      &>button {
-        display: none;
-      }
-
-      sib-display-img {
-        grid-area: avatar;
-        align-items: center;
-        background-color: #e3e8ed;
-        border-radius: 50%;
-        display: flex;
-        height: 45px;
-        justify-content: center;
-        overflow: hidden;
-        width: 45px;
-
-        img {
-          height: 100%;
-          object-fit: cover;
-          object-position: center;
-          width: 100%;
-        }
-      }
-
-      sib-display-value:first-of-type {
-        font-weight: 600;
-        grid-area: name;
-      }
-
-      sib-display-value:last-of-type {
-        grid-area: role;
-      }
-    }
   }
 }

src/styles/base/main.scss

@@ -19,37 +19,41 @@ $breakpoints: (phone: 480px,
   body {
     background-color: $color-210-25-95;
     color: $color-213-4-50;
-    display: flex;
-    flex-direction: column;
     font-size: 1.6rem;
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
     overflow-wrap: break-word;
   }
 
   main {
     display: flex;
     flex-direction: row;
-    height: 100%;
     max-width: 100%;
-    overflow: hidden;
   }
 }
 
+
+
+/* Quick fix. Will be removed later */
+#admin-circles {
+  display: contents;
+}
+
+
+
 img {
   max-height: 100%;
   max-width: 100%;
 }
 
 h1,
+.h1-like,
 h2,
+.h2-like,
 h3,
 h4,
 h5,
 h6 {
-  color: $color-216-4-22;
-  font-weight: 600;
-  padding: 0;
+  font-weight: bold;
 
   /*span {
     font-weight: 400;
@@ -61,15 +65,26 @@ h6 {
   }*/
 }
 
-h1 {
-  font-size: 2rem;
+.h2-like {
+  display: block;
+  margin: 14.94px 0;
+  width: 100%;
 }
 
-h2 {
+h1, .h1-like {
+  color: $color-233-18-29;
   font-size: 2rem;
+  text-transform: uppercase;
+}
+
+h2, .h2-like {
+  color: $color-216-4-22;
+  font-size: 1.8rem;
+  text-transform: uppercase;
 }
 
 h3 {
+  color: $color-216-4-22;
   font-size: 1.7rem;
 }
 
@@ -101,7 +116,7 @@ h5 {
     flex: 1;
     font-size: 1.6rem;
     margin: 0 auto;
-    min-height: calc(100vh - 84px);
+    min-height: 100%;
   }
 
   &.with-padding {
@@ -110,21 +125,54 @@ h5 {
 }
 
 .content-box__header {
-  padding: 1.9rem 3rem;
+  border-bottom: 1px solid $color-221-51-90;
+  padding: 3rem;
 
   div {
-    color: $color-233-18-29;
-    display: flex;
-    font-size: 2rem;
 
-    &>* {
-      align-self: center;
+    .h1-aside {
+      font-size: 1.8rem;
+
+      &:not(:empty)::before {
+        color: $color-233-18-29;
+        content: '- ';
+        font-size: 2rem;
+        font-weight: bold;
+        margin-left: 0.60rem;
+      }
+    }
+
+    .description {
+      color: $color-215-6-63;
+
     }
 
     .name {
-      font-size: 2rem;
-      font-weight: bold;
-      margin: 1.1rem 0;
+      color: $color-233-18-29;
+      font-weight: normal;
+    }
+  }
+}
+
+.modal {
+  color: white;
+  margin: 75px;
+  padding: 40px;
+  max-height: 85vh;
+  text-align: center;
+
+  img {
+    max-width: 75%;
+  }
+
+  sib-link {
+    font-size: 2.7rem;
+    position: absolute;
+    right: 32px;
+    top: 32px;
+
+    button {
+      color: $color-233-18-29;
     }
   }
 }
@@ -134,30 +182,6 @@ h5 {
   border: 0;
 }
 
-.content-box__header.with-description {
-  border-bottom: 1px solid $color-221-51-90;
-
-  div {
-
-    .name {
-      text-transform: uppercase;
-    }
-
-    .description {
-      color: $color-215-6-63;
-      font-size: 1.8rem;
-
-      &:not(:empty)::before {
-        color: $color-216-4-22;
-        content: '- ';
-        font-size: 2rem;
-        font-weight: bold;
-        margin-left: 0.60rem;
-      }
-    }
-  }
-}
-
 .backlink {
   @include icon('arrow-left-circle');
   color: $color-233-18-29;
@@ -191,6 +215,10 @@ h5 {
   padding-bottom: 1.4rem;
 }
 
+.position-end {
+  text-align: end;
+}
+
 .section {
   border-bottom: 1px solid $color-221-51-90;
   padding: 4.5rem;
@@ -202,7 +230,6 @@ h5 {
 @import 'form';
 @import 'header';
 @import 'menu-left';
-@import 'user-avatar';
 
 // Button global CSS
 sib-delete,

src/styles/base/menu-left.scss

@@ -3,7 +3,8 @@
   color: $color-0-0-100;
   display: block;
   max-width: 250px;
-  overflow: auto;
+  min-height: calc(100vh - 83px); /* 83px = nav height */
+  flex: 1;
   /*transition: flex-basis 0.5s ease-in-out;*/
 
   &.open {

src/styles/base/user-avatar.scss

@@ -1,29 +0,0 @@
-.project-profile-user-avatar {
-  align-self: center;
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 2;
-  display: inline;
-
-  * {
-    height: 100%;
-    width: 100%;
-  }
-
-  div {
-    background-color: $color-0-0-100;
-    border-radius: 50%;
-    height: 7vh;
-    overflow: hidden;
-    position: relative;
-    width: 7vh;
-
-    img {
-      height: 100%;
-      left: 0;
-      object-fit: cover;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-}