Update Details.vue's button styles

src/pages/Details.vue

@@ -20,18 +20,20 @@
             </p>
 
             <div class="functions">
-                <button v-if="monitor.active" class="btn btn-light" @click="pauseDialog">
+                <div class="btn-group" role="group">
-                    <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
+                    <button v-if="monitor.active" class="btn btn-normal" @click="pauseDialog">
-                </button>
+                        <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
-                <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
+                    </button>
-                    <font-awesome-icon icon="play" /> {{ $t("Resume") }}
+                    <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
-                </button>
+                        <font-awesome-icon icon="play" /> {{ $t("Resume") }}
-                <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">
+                    </button>
-                    <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
+                    <router-link :to=" '/edit/' + monitor.id " class="btn btn-normal">
-                </router-link>
+                        <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
-                <button class="btn btn-danger" @click="deleteDialog">
+                    </router-link>
-                    <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
+                    <button class="btn btn-danger" @click="deleteDialog">
-                </button>
+                        <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
+                    </button>
+                </div>
             </div>
 
             <div class="shadow-box">
@@ -392,11 +394,6 @@ export default {
 @media (max-width: 550px) {
     .functions {
         text-align: center;
-
-        button, a {
-            margin-left: 10px !important;
-            margin-right: 10px !important;
-        }
     }
 
     .ping-chart-wrapper {
@@ -439,12 +436,6 @@ export default {
     }
 }
 
-.functions {
-    button, a {
-        margin-right: 20px;
-    }
-}
-
 .shadow-box {
     padding: 20px;
     margin-top: 25px;