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,11 +43,12 @@ sib-router(default-route='circle-profile')
       widget-team='circle-team-template'
     )
 
+    div.box-button
       sib-ac-checker(permission='acl:Delete', bind-resources)
         sib-delete(
           bind-resources
           data-label='Delete Circle'
-        class='right-btn reversed-btn'
+          class='button reversed-btn right-btn'
         )
 
       sib-widget(name='join-leave-circle-button')
@@ -59,6 +60,7 @@ sib-router(default-route='circle-profile')
             sib-delete(
               data-src="${value['@id']}"
               data-label='Leave circle'
+              class='btn-margin-left'
             )
 
       sib-display(
@@ -69,7 +71,7 @@ sib-router(default-route='circle-profile')
         widget-members='join-leave-circle-button'
       )
 
-    sib-form.block.team-form(
+      sib-form.btn-margin-left(
         bind-resources 
         nested-field='members'
         fields='user'

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,11 +19,12 @@
     .circle-edit-button {
       align-self: flex-end;
       position: absolute;
+    }
+  }
 
-      >sib-link {
+  .box-button {
-        background: $color-244-73-62;
+    display: flex;
-      }
+    justify-content: flex-end;
-    }
   }
 
   .block {