buttons 'join, leave, delete circle' ok + button to add member ok

src/page-circle-profile.pug

@@ -46,9 +46,9 @@ sib-router(default-route='circle-profile')
     div.box-button
       sib-ac-checker(permission='acl:Delete', bind-resources)
         sib-delete(
+          class='button text-bold text-uppercase button-blue bordered with-icon icon-trash'
           bind-resources
           data-label='Delete Circle'
-          class='button reversed-btn right-btn'
         )
 
       sib-widget(name='join-leave-circle-button')
@@ -58,9 +58,9 @@ sib-router(default-route='circle-profile')
             data-src="${value['@id']}"
           )
             sib-delete(
+              class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
               data-src="${value['@id']}"
               data-label='Leave circle'
-              class='btn-margin-left'
             )
 
       sib-display(
@@ -71,18 +71,19 @@ sib-router(default-route='circle-profile')
         widget-members='join-leave-circle-button'
       )
 
-      sib-form.btn-margin-left(
-        bind-resources 
-        nested-field='members'
-        fields='user'
-        label-user=''
-        range-user=`${endpoints.users}`
-        widget-user='sib-form-dropdown'
+      button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-close.test
+        sib-form(
+          bind-resources 
+          nested-field='members'
+          fields='user'
+          label-user=''
+          range-user=`${endpoints.users}`
+          widget-user='sib-form-dropdown'
 
-        set-user-id-select="user"
+          set-user-id-select="user"
 
-        submit-button='Join Circle'
-      )
+          submit-button='Join Circle'
+        )
     
 
 #circle-edit(hidden)

src/styles/base/form.scss

@@ -82,52 +82,6 @@
       }
     }
 
-    .button,
-    input[type='submit'],
-    sib-delete button {
-      border-radius: 100em;
-      cursor: pointer;
-      font-size: 1.4rem;
-      font-weight: bold;
-      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;
-    }
-
-    .yellow-button {
-      background: $color-43-100-50;
-      color: white;
-    }
-
-    .reversed-btn, sib-delete.reversed-btn button {
-      background-color: transparent;
-      border: 1px solid #6157e5;
-      color: #6157e5;
-    }
-    
-    sib-delete.right-btn {
-      border: none;
-      border-radius: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    .btn-margin-left {
-      margin-left: 2.2rem;
-    }
-
     sib-form[set-user-id-select] {
 
       input[type="submit"] {
@@ -177,13 +131,24 @@
       }
 
       >input[type='submit'] {
-        background-color: transparent;
+        @extend
+          .button,
+          .btn-margin-left,
+          .text-bold,
+          .text-uppercase,
+          .button-blue,
+          .bordered;
+        margin-top: auto;
+        margin-bottom: auto;
+
+
+        /*background-color: transparent;
         border: 1px solid $color-244-73-62;
         color: $color-244-73-62;
         align-self: flex-end;
         margin-bottom: 0.6rem;
         margin-left: 4.2rem;
-        margin-top: 0;
+        margin-top: 0;*/
       }
     }
 

src/styles/base/main.scss

@@ -231,6 +231,10 @@ a,
       font-size: 1.4rem;
     }
 
+    &.btn-margin-left {
+      margin-left: 2.2rem;
+    }
+
     &.small {
 
       *,
@@ -277,8 +281,8 @@ a,
       font-size: 1.6rem;
       margin-right: 1rem;
 
-      &.icon-plus {
-        @include icon('plus');
+      &.icon-arrow-right {
+        @include icon('trash');
       }
 
       &.icon-close {
@@ -288,6 +292,14 @@ a,
       &.icon-edit {
         @include icon('pencil');
       }
+
+      &.icon-plus {
+        @include icon('plus');
+      }
+
+      &.icon-trash {
+        @include icon('trash');
+      }
     }
 
     &.button-yellow {
@@ -348,6 +360,10 @@ a,
       }
     }
 
+    &.test {
+      display: flex;
+    }
+
     &.reversed {
       &.button-yellow {
         background-color: hsl(43, 100%, 50%);

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

@@ -37,12 +37,12 @@
       .form-label.is-dark>label {
         margin-top: 0;
 
-        >div:first-child {
+        /*>div:first-child {
           @extend h3;
           font-weight: bold;
           margin: 0 0 1.4rem;
           text-transform: uppercase;
-        }
+        }*/
       }
     }