feature: new page to display info about a circle and add members

- New styles for "add users" drodown
- New custom widget to display members
- Use of the permission system

src/styles/layout/circle-profile/circle-profile.scss

@@ -1,79 +1,134 @@
 #circle-profile {
 
-  .block-group > div {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
+  .content-box__info {
+    @extend %padding-block;
+  }
 
-    sib-display > div {
-      align-items: center;
-      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-      display: grid;
-      font-size: 1.6rem;
-      grid-template-columns: repeat(4, 1fr);
-      grid-template-rows: repeat(3, 1fr);
-      height: auto;
-      justify-items: center;
-      margin: 1rem 0.5rem 1rem 0;
-      position: relative;
-      padding-right: 1rem;
-      padding-top: 1rem;
-      text-align: center;
-      width: 14em;
+  .block {
 
-      &:hover {
-        cursor: pointer;
-	      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
-	      top: -2px;
-      }
+    >form { /* peut-être à mettre dans main.scss */
+      margin-bottom: 2.6rem;
 
-      > sib-set-default[name='teammate-img'] {
-        background-color: $color-215-9-73;
-        border-radius: 50%;
-        grid-column: 1 / span 2;
-        grid-row: 1 / span 2;
-        height: 6vh;
-        overflow: hidden;
-        width: 6vh;
+      .form-label.is-dark>label {
+        margin-top: 0;
 
-        img {
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          top: 0;
-          width: 100%;
+        >div:first-child {
+          @extend h3;
+          font-weight: bold;
+          margin: 0 0 1.4rem;
+          text-transform: uppercase;
         }
       }
+    }
 
-      sib-set-default[name='teammate-name'] {
-        grid-column: 3 / span 2;
-        grid-row: 1 / span 1;
+    >div { /* peut-être à mettre dans main.scss */
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 2.6rem;
+      position: relative;
+
+      >[name^='label'] {
+        @extend h3;
+        font-weight: bold;
+        margin: 0 0 1.4rem;
+        text-transform: uppercase;
       }
 
-      > sib-set-default[name='teammate-pseudonym'] {
-        align-self: start;
-        font-size: 1.2rem;
-        grid-column: 3 / span 2;
-        grid-row: 2 / span 1;
+      >[name='description'] {
+        max-width: 80%;
       }
 
-      > sib-display-value[name='teammate-profile'] {
-        color: $color-216-4-22;
-        display: block;
-        font-size: 1.2rem;
-        grid-column: 1 / span 2;
-        grid-row: 3 / span 1;
-      }
+      >[name='entitled'] {
+        align-self: flex-end;
+        position: absolute;
 
-      > sib-display-value[name='teammate-contact'] {
-        color: $color-244-73-62;
-        font-size: 1.2rem;
-        justify-self: stretch;
-        grid-column: 3 / span 2;
-        grid-row: 3 / span 1;
+        >*:first-child {
+          margin-right: 0.8rem;
+        }
+      }
+      
+      >sib-multiple {
+
+        label {
+          display: none;
+        }
+
+        >div>team-template[name='team']>sib-display>div {
+          display: grid;
+          grid-column-gap: 1.6rem;
+          grid-template-columns: 7vh auto;
+          grid-template-rows: repeat(2, 5.2vh);
+
+          >[name='account.picture'] {
+            align-items: center;
+            align-self: center;
+            background-color: $color-213-20-91;
+            border-radius: 50%;
+            display: flex;
+            grid-column: 1 / span 1;
+            grid-row: 1 / span 2;
+            height: 7vh;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+            width: 7vh;
+
+            img {
+              background-color: white;
+              height: 100%;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
+
+          >[name='sup'] {
+            align-self: end;
+            display: flex;
+            grid-column: 2 / span 1;
+            grid-row: 1 / span 1;
+            margin-bottom: 0.50rem;
+
+            [name='name'] {
+              font-weight: 600;
+            }
+
+            sib-multiple {
+              display: flex;
+              margin-left: 1rem;
+
+              [name='groups'] {
+                @extend %user-role;
+              }
+            }
+          }
+
+          >[name='sub'] {
+            align-self: start;
+            grid-column: 2 / span 1;
+            grid-row: 2 / span 1;
+            margin-top: 0.50rem;
+
+            >[name$='profile.city']:not(:empty) {
+              @include mdi('atom');
+              align-items: center;
+              display: flex;
+
+              &::before {
+                color: $color-43-100-50;
+                margin-right: 0.50rem;
+              }
+            }
+          }
+        }
       }
     }
   }
-}
+}

src/styles/layout/project-profile/project-profile.scss

@@ -6,7 +6,7 @@
     [name^='label-'] {
       display: block;
       font-weight: bold;
-      margin-bottom: 1.4rem;
+      margin: 1.4rem 0;
       text-transform: uppercase;
       @extend h2;
     }