Overhauled spell casting UX

app/imports/ui/components/ColorPicker.vue

@@ -7,10 +7,15 @@
   >
     <template #activator="{ on }">
       <v-btn
-        icon
+        :outlined="!!label"
+        :icon="!label"
+        :min-width="label && 108"
         v-on="on"
       >
-        <v-icon>mdi-format-paint</v-icon>
+        {{ label }}
+        <v-icon :right="!!label">
+          mdi-format-paint
+        </v-icon>
       </v-btn>
     </template>
     <v-card class="overflow-hidden">
@@ -122,6 +127,10 @@
         type: String,
         default: undefined,
       },
+      label: {
+        type: String,
+        default: undefined,
+      }
     },
     data(){ return {
       colors: [

app/imports/ui/components/global/IconPicker.vue

@@ -8,21 +8,22 @@
   >
     <template #activator="{ on }">
       <div class="layout align-center">
-        <v-label>{{ label }}</v-label>
         <v-btn
           :loading="loading"
-          large
-          icon
+          outlined
+          :min-width="108"
           v-on="on"
         >
+          {{ label }}
           <svg-icon
             v-if="safeValue && safeValue.shape"
-            large
+            right
+            class="ml-2"
             :shape="safeValue.shape"
           />
           <v-icon
             v-else
-            large
+            right
           >
             mdi-select-search
           </v-icon>