[Bug] Fix icon alignment in buttons (#360)

* Fix icon alignment in buttons

* Fix ordering

app/javascript/dashboard/assets/scss/_layout.scss

@@ -41,11 +41,6 @@ body {
 .content-box {
   overflow: scroll;
   @include padding($space-normal);
-  .btn-fixed-right-top {
-    position: fixed;
-    top: $space-small;
-    right: $space-small;
-  }
 }
 
 .back-button {

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -4,7 +4,7 @@
     padding-right: $space-normal;
 
     i {
-      padding-right: $space-one;
+      padding-right: $space-small;
     }
   }
 
@@ -25,7 +25,12 @@
   }
 
   > .icon {
-    font-size: $font-size-mini;
+    font-size: $font-size-default;
-    margin-right: $space-smaller;
   }
 }
+
+.button--fixed-right-top {
+  position: fixed;
+  right: $space-small;
+  top: $space-small;
+}

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -9,7 +9,7 @@
     <router-link
       v-if="showNewButton && showButton && currentRole"
       :to="buttonRoute"
-      class="button icon success nice"
+      class="button icon success nice button--fixed-right-top"
     >
       <i class="icon ion-android-add-circle"></i>
       {{ buttonText }}

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="column content-box">
     <button
-      class="button nice icon success btn-fixed-right-top"
+      class="button nice icon success button--fixed-right-top"
       @click="openAddPopup()"
     >
       <i class="icon ion-android-add-circle"></i>

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="column content-box">
     <button
-      class="button nice icon success btn-fixed-right-top"
+      class="button nice icon success button--fixed-right-top"
       @click="openAddPopup()"
     >
       <i class="icon ion-android-add-circle"></i>