From 6f57c4195a8129d8c61005ce26fbd5cbce28a443 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Mon, 4 Jul 2022 18:33:38 +0800
Subject: [PATCH] Slightly improve css

---
 src/components/PublicGroupList.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 7c1dad7a..854fe5d3 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -48,12 +48,15 @@
                                                 {{ monitor.element.name }}
                                             </a>
                                             <p v-else class="item-name"> {{ monitor.element.name }} </p>
-                                            <font-awesome-icon
-                                                v-if="editMode"
-                                                :class="{'link-active': monitor.element.sendUrl}"
-                                                icon="link" class="action me-3"
-                                                @click="toggleLink(group.index, monitor.index)"
-                                            />
+                                            <span title="Toggle Clickable Link">
+                                                <font-awesome-icon
+                                                    v-if="editMode"
+                                                    :class="{'link-active': monitor.element.sendUrl, 'btn-link': true}"
+                                                    icon="link" class="action me-3"
+
+                                                    @click="toggleLink(group.index, monitor.index)"
+                                                />
+                                            </span>
                                         </div>
                                         <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
@@ -173,8 +176,13 @@ export default {
     display: inline-block;
 }
 
+.btn-link {
+    color: #bbbbbb;
+    margin-left: 5px;
+}
+
 .link-active {
-    color: #4caf50;
+    color: $primary;
 }
 
 .flip-list-move {