members block OK + delete-circle button added

src/page-circle-edit.pug

@@ -2,32 +2,21 @@
 
   include templates/hd-user-avatar.pug
 
-  sib-widget(name='circle-team-template')
-    template
   sib-widget(name='hd-user-groups')
     template ${await value.name}
 
+  sib-widget(name='team-template')
+    template
       sib-display(
-        data-src='${await value}'
+        data-src='${await value.user}'
         fields='account.picture, sup(name, groups), sub(profile.city)'
 
         widget-account.picture='hd-user-avatar'
-        widget-groups='hd-user-groups'
 
         multiple-groups=''
+        widget-groups='hd-user-groups'
       )
 
-      //-div(name='team')
-        div(name='user.thumb')
-          span ${await value.name}
-          sib-display(
-          data-src="${await value.groups}",
-          fields='name'
-        )
-        span ${await value.profile.city}
-
-  sib-widget(name='circle-delete-template')
-    template
       sib-delete(
         data-src="${await value['@id']}"
         data-label='Delete from circle'
@@ -50,21 +39,26 @@
 
     widget-owner='sib-form-auto-completion'
     widget-description='sib-form-textarea'
+
+    submit-button='Register'
   )
 
-  h3 List of members
+  sib-delete(
+    bind-resources
+    data-label='Delete circle'
+    resourceDeleted=''
+  )
+  
+  h2 List of members
 
   div.table-header
-    div.cell.un Name
-    div.cell.deux Status
+    div.cell Name
+    div.cell Access
     
   sib-display.table-body(
     bind-resources
-    fields='team, members'
+    fields='members'
 
-    multiple-team=''
     multiple-members=''
-
-    widget-team='circle-team-template'
-    widget-members='circle-delete-template'
+    widget-members='team-template'
   )

src/styles/base/form.scss

@@ -151,15 +151,19 @@
 
     sib-form-auto-completion.member-select {
       align-self: flex-end;
-      font-weight: normal;
+
+      >label:first-of-type>div {
+        font-weight: 600;
+      }
 
       .ss-single-selected {
         background-color: $color-222-57-95;
         border: none;
         border-radius: 0px;
         display: flex;
+        font-weight: normal;
         margin-top: 0.8rem;
-        min-height: 3.9rem;
+        min-height: 4.4rem;
         padding-left: 1rem;
         text-transform: none;
 
@@ -170,6 +174,7 @@
       }
 
       .ss-content .ss-list .ss-option {
+        font-weight: normal;
         text-transform: none;
       }
     }

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

@@ -1,3 +1,9 @@
+h2 {
+  font-size: 1.7rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
 .table-header {
   background: $color-228-25-79;
   color: white;
@@ -19,64 +25,59 @@
   }
 }
 
-.table-body>div {
+.table-body div team-template {
   display: flex;
   justify-content: space-between;
 
   >* {
     flex: 1;
     width: 50%;
+    border-bottom: 1px solid $color-228-25-79;
   }
   
-  /*>*:nth-child(even) {
-    display: flex;
-  }*/
-
-  /*>*:nth-child(odd) {
-    border-left: 1px solid $color-228-25-79;
-  }*/
-
-  circle-team-template {
-    display: block;
-    border-bottom: 1px solid $color-228-25-79;
-    border-left: 1px solid $color-228-25-79;
-  }
-
-  circle-delete-template {
-    display: block;
-    border-bottom: 1px solid $color-228-25-79;
+  >*:nth-child(odd) {
     border-left: 1px solid $color-228-25-79;
     border-right: 1px solid $color-228-25-79;
+    padding: 0 2.2rem;
+  }
+  
+  >*:nth-child(even) {
+    display: flex;
+    border-right: 1px solid $color-228-25-79;
+    justify-content: flex-end;
+    padding: 2.5rem 2.2rem;
   }
 }
 
 
-sib-multiple {
+sib-multiple[widget='team-template'] {
 
   label {
     display: none;
   }
 
-  >team-template[name='members'] {
+  >div>team-template>sib-display>div {
     display: grid;
     grid-column-gap: 1.6rem;
     grid-template-columns: 7vh auto;
     grid-template-rows: repeat(2, 5.2vh);
 
-    >sib-display:first-child {
+    >[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;
-
-      div {
-        background-color: $color-0-0-100;
-        border-radius: 50%;
       height: 7vh;
+      justify-content: center;
       overflow: hidden;
       position: relative;
       width: 7vh;
 
       img {
+        background-color: white;
         height: 100%;
         left: 0;
         object-fit: cover;
@@ -84,37 +85,50 @@ sib-multiple {
         top: 0;
         width: 100%;
       }
+
+      object {
+        height: 45%;
+        width: 45%;
       }
     }
 
-    >div:nth-child(2) {
+    >[name='sup'] {
       align-self: end;
       display: flex;
       grid-column: 2 / span 1;
       grid-row: 1 / span 1;
+      margin-bottom: 0.50rem;
 
-      span {
-        align-self: center;
+      [name='name'] {
         font-weight: 600;
       }
 
-      span~sib-display {
-
-        >div {
+      sib-multiple {
         display: flex;
         margin-left: 1rem;
 
-          sib-multiple [name='name'] {
+        [name='groups'] {
           @extend %user-role;
         }
       }
     }
-    }
 
-    >span:nth-child(3) {
+    >[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;
+        }
+      }
     }
   }
 }