From f3c29f8fbc335ec0bc7ebe4d1db86e1dfefcf306 Mon Sep 17 00:00:00 2001
From: inkfarer <inkfarer@inkfarer.com>
Date: Fri, 5 Apr 2024 09:38:18 +0300
Subject: [PATCH] Make the button to add a bundle stand out more

---
 src/components/BundleManager.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/BundleManager.vue b/src/components/BundleManager.vue
index 53a2ec7..6f2765a 100644
--- a/src/components/BundleManager.vue
+++ b/src/components/BundleManager.vue
@@ -16,13 +16,18 @@
                 @click="refreshBundles"
             />
             <ipl-button
-                icon="plus-circle"
                 :color="installingBundle ? themeColors.backgroundTertiary : 'green'"
                 small
-                tooltip="Install new bundle"
-                class="button m-l-4"
+                inline
+                class="add-bundle-button m-l-4"
                 @click="installingBundle = !installingBundle"
-            />
+            >
+                Add Bundle
+                <font-awesome-icon
+                    icon="plus-circle"
+                    class="icon"
+                />
+            </ipl-button>
         </div>
         <bundle-installer
             v-show="installingBundle"
@@ -42,13 +47,14 @@ import { faPlusCircle } from '@fortawesome/free-solid-svg-icons/faPlusCircle'
 import BundleInstaller from '@/components/BundleInstaller.vue'
 import BundleList from '@/components/bundleList/BundleList.vue'
 import { themeColors } from '@/styles/colors'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faSync, faPlusCircle)
 
 export default defineComponent({
     name: 'BundleManager',
 
-    components: { BundleList, BundleInstaller, IplButton, IplSpace },
+    components: { BundleList, BundleInstaller, IplButton, IplSpace, FontAwesomeIcon },
 
     setup () {
         const nodecgStore = useNodecgStore()
@@ -76,4 +82,13 @@ export default defineComponent({
 .header {
     padding: 8px;
 }
+
+.add-bundle-button {
+    padding: .4em .6em;
+    height: 2.4em;
+
+    :deep(.label) {
+        font-size: 1.25em;
+    }
+}
 </style>