Update Details.vue's button styles

src/pages/Details.vue

@@ -20,19 +20,21 @@
             </p>
 
             <div class="functions">
-                <button v-if="monitor.active" class="btn btn-light" @click="pauseDialog">
+                <div class="btn-group" role="group">
+                    <button v-if="monitor.active" class="btn btn-normal" @click="pauseDialog">
                         <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
                     </button>
                     <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
                         <font-awesome-icon icon="play" /> {{ $t("Resume") }}
                     </button>
-                <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">
+                    <router-link :to=" '/edit/' + monitor.id " class="btn btn-normal">
                         <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                     </router-link>
                     <button class="btn btn-danger" @click="deleteDialog">
                         <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
                     </button>
                 </div>
+            </div>
 
             <div class="shadow-box">
                 <div class="row">
@@ -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;