Make the button to add a bundle stand out more

IPLSplatoon · Apr 5, 2024 · f3c29f8 · f3c29f8
1 parent e6458f2
commit f3c29f8
Showing 1 changed file with 20 additions and 5 deletions.
diff --git 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>