From 64f84eb11834281fa79b20756ccc93f1c112fd91 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 15 Oct 2022 21:01:48 +0800
Subject: [PATCH] Update Details.vue's button styles

---
 src/pages/Details.vue | 37 ++++++++++++++-----------------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 7cf258927..6d6a8dd9c 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -20,18 +20,20 @@
             </p>
 
             <div class="functions">
-                <button v-if="monitor.active" class="btn btn-light" @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">
-                    <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 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-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">
@@ -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;