circle-info buttons styled + form buttons refactored

src/page-circle-profile.pug

@@ -6,7 +6,7 @@ sib-router(default-route='circle-profile')
   include templates/hd-circle-team.pug
   .content-box__info
     sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources)
-      sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members
+      sib-link(class="button blue-button", next="circle-edit", bind-resources) Edit and add Members
 
     sib-display.block(
       bind-resources
@@ -43,44 +43,46 @@ sib-router(default-route='circle-profile')
       widget-team='circle-team-template'
     )
 
-    sib-ac-checker(permission='acl:Delete', bind-resources)
+    div.box-button
-      sib-delete(
+      sib-ac-checker(permission='acl:Delete', bind-resources)
+        sib-delete(
+          bind-resources
+          data-label='Delete Circle'
+          class='button reversed-btn right-btn'
+        )
+
+      sib-widget(name='join-leave-circle-button')
+        template
+          sib-ac-checker(
+            permission="acl:Delete"
+            data-src="${value['@id']}"
+          )
+            sib-delete(
+              data-src="${value['@id']}"
+              data-label='Leave circle'
+              class='btn-margin-left'
+            )
+
+      sib-display(
         bind-resources
-        data-label='Delete Circle'
+        fields='members'
-        class='right-btn reversed-btn'
+
+        multiple-members=''
+        widget-members='join-leave-circle-button'
       )
 
-    sib-widget(name='join-leave-circle-button')
+      sib-form.btn-margin-left(
-      template
+        bind-resources 
-        sib-ac-checker(
+        nested-field='members'
-          permission="acl:Delete"
+        fields='user'
-          data-src="${value['@id']}"
+        label-user=''
-        )
+        range-user=`${endpoints.users}`
-          sib-delete(
+        widget-user='sib-form-dropdown'
-            data-src="${value['@id']}"
-            data-label='Leave circle'
-          )
 
-    sib-display(
+        set-user-id-select="user"
-      bind-resources
-      fields='members'
 
-      multiple-members=''
+        submit-button='Join Circle'
-      widget-members='join-leave-circle-button'
+      )
-    )
-
-    sib-form.block.team-form(
-      bind-resources 
-      nested-field='members'
-      fields='user'
-      label-user=''
-      range-user=`${endpoints.users}`
-      widget-user='sib-form-dropdown'
-
-      set-user-id-select="user"
-
-      submit-button='Join Circle'
-    )
     
 
 #circle-edit(hidden)

src/styles/base/form.scss

@@ -2,10 +2,6 @@
 
   &.with-form {
 
-    sib-form {
-      padding-bottom: 2.55rem;
-    }
-
     h1 {
       color: $color-233-18-29;
       font-weight: bold;
@@ -86,20 +82,30 @@
       }
     }
 
-    input[type='submit'], .right-btn, sib-delete.right-btn button {
+    .button,
-      background-color: $color-233-18-29;
+    input[type='submit'],
-      border: none;
+    sib-delete button {
       border-radius: 100em;
-      color: $color-0-0-100;
       cursor: pointer;
       font-size: 1.4rem;
       font-weight: bold;
-      margin-left: auto;
-      margin-top: 3.2rem;
       padding: 0.55rem 2.5rem;
       text-transform: uppercase;
     }
 
+    input[type='submit'] {
+      background-color: $color-233-18-29;
+      border: none;
+      color: $color-0-0-100;
+      margin-left: auto;
+      margin-top: 3.2rem;
+    }
+
+    .blue-button {
+      background: $color-244-73-62;
+      color: white;
+    }
+
     .reversed-btn, sib-delete.reversed-btn button {
       background-color: transparent;
       border: 1px solid #6157e5;
@@ -113,6 +119,10 @@
       padding: 0;
     }
 
+    .btn-margin-left {
+      margin-left: 2.2rem;
+    }
+
     sib-form[set-user-id-select] {
 
       input[type="submit"] {
@@ -163,9 +173,8 @@
 
       >input[type='submit'] {
         background-color: transparent;
-        border: 1px solid #6157e5;
+        border: 1px solid $color-244-73-62;
-        color: #6157e5;
+        color: $color-244-73-62;
-        font-size: 1.4rem;
         align-self: flex-end;
         margin-bottom: 0.6rem;
         margin-left: 4.2rem;

src/styles/base/main.scss

@@ -107,13 +107,13 @@ sib-delete {
     @include icon('close');
     background-color: $color-233-18-29;
     border: none;
-    border-radius: 100em;
+    /*border-radius: 100em;*/
     color: $color-0-0-100;
-    cursor: pointer;
+    /*cursor: pointer;*/
-    font-size: 1.4rem;
+    /*font-size: 1.4rem;*/
-    font-weight: bold;
+    /*font-weight: bold;*/
-    padding: 0.55rem 2.5rem;
+    /*padding: 0.55rem 2.5rem;*/
-    text-transform: uppercase;
+    /*text-transform: uppercase;*/
 
     &::before {
       font-size: 1.6rem;

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

@@ -19,13 +19,14 @@
     .circle-edit-button {
       align-self: flex-end;
       position: absolute;
-
-      >sib-link {
-        background: $color-244-73-62;
-      }
     }
   }
 
+  .box-button {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .block {
 
     >form { /* peut-être à mettre dans main.scss */