Continued migrating UI to vuetify 2

app/imports/ui/properties/components/actions/ActionCard.vue

@@ -7,10 +7,10 @@
     <div class="layout align-center px-3">
       <div class="avatar">
         <v-btn
-          flat
           icon
-          outline
-          style="margin-left: -4px; font-size: 18px;"
+          outlined
+          style="font-size: 18px;"
+          class="mr-2"
           :color="model.color || 'primary'"
           :loading="doActionLoading"
           :disabled="model.insufficientResources || !context.editPermission"
@@ -37,7 +37,7 @@
         >
           {{ model.name || propertyName }}
         </div>
-        <div class="action-sub-title layout row align-center">
+        <div class="action-sub-title layout align-center">
           <div class="flex">
             {{ model.actionType }}
           </div>

app/imports/ui/properties/components/attributes/HealthBar.vue

@@ -108,7 +108,7 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
   margin-right: -50%;
   width: 200%;
   margin-top: -34px !important;
-  z-index: 4;
+  z-index: 7;
   position: relative;
 }
 </style>
@@ -178,6 +178,6 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 		left: 0;
 		right: 0;
 		background-color: rgba(0, 0, 0, 0.15);
-		z-index: 3;
+		z-index: 6;
 	}
 </style>

app/imports/ui/properties/components/attributes/ResourceCard.vue

@@ -1,46 +1,48 @@
 <template lang="html">
   <v-card
-    class="resource-card layout row"
+    class="resource-card"
     :class="hover ? 'elevation-8': ''"
   >
-    <div class="buttons layout column justify-center pl-3">
-      <v-btn
-        icon
-        small
-        :disabled="currentValue >= value || context.editPermission === false"
-        @click="increment(1)"
+    <v-layout>
+      <div class="buttons layout column justify-center pl-3">
+        <v-btn
+          icon
+          small
+          :disabled="currentValue >= value || context.editPermission === false"
+          @click="increment(1)"
+        >
+          <v-icon>arrow_drop_up</v-icon>
+        </v-btn>
+        <v-btn
+          icon
+          small
+          :disabled="currentValue <= 0 || context.editPermission === false"
+          @click="increment(-1)"
+        >
+          <v-icon>arrow_drop_down</v-icon>
+        </v-btn>
+      </div>
+      <div
+        class="layout align-center value pl-2 pr-3"
       >
-        <v-icon>arrow_drop_up</v-icon>
-      </v-btn>
-      <v-btn
-        icon
-        small
-        :disabled="currentValue <= 0 || context.editPermission === false"
-        @click="increment(-1)"
+        <div class="text-h4">
+          {{ currentValue }}
+        </div>
+        <div class="text-h6 ml-2 max-value">
+          /{{ value }}
+        </div>
+      </div>
+      <div
+        class="content layout align-center pr-3"
+        @click="click"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
       >
-        <v-icon>arrow_drop_down</v-icon>
-      </v-btn>
-    </div>
-    <div
-      class="layout align-center value pl-2 pr-3"
-    >
-      <div class="text-h4">
-        {{ currentValue }}
+        <div class="text-truncate ">
+          {{ name }}
+        </div>
       </div>
-      <div class="text-h6 ml-2 max-value">
-        /{{ value }}
-      </div>
-    </div>
-    <div
-      class="content layout row align-center pr-3"
-      @click="click"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-    >
-      <div class="text-truncate ">
-        {{ name }}
-      </div>
-    </div>
+    </v-layout>
   </v-card>
 </template>
 

app/imports/ui/properties/components/attributes/SpellSlotListTile.vue

@@ -43,7 +43,7 @@
     <v-list-item-avatar v-if="!hideCastButton">
       <v-btn
         icon
-        flat
+        text
         class="primary--text"
         :data-id="`spell-slot-cast-btn-${model._id}`"
         @click.stop="$emit('cast')"

app/imports/ui/properties/components/inventory/ItemListTile.vue

@@ -25,7 +25,6 @@
       <increment-button
         v-if="context.creatureId && model.showIncrement"
         icon
-        flat
         color="primary"
         :disabled="context.editPermission === false"
         :value="model.quantity"

app/imports/ui/properties/components/skills/SkillListTile.vue

@@ -1,13 +1,13 @@
 <template lang="html">
   <v-list-item
     class="skill-list-tile"
-    height="32px"
+    style="min-height: 36px;"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-item-action class="prof-icon">
-      <v-icon>{{ icon }}</v-icon>
-    </v-list-item-action>
-    <v-list-item-content>
+    <v-icon class="prof-icon">
+      {{ icon }}
+    </v-icon>
+    <v-list-item-content class="py-1">
       <v-list-item-title>
         <span
           v-if="!hideModifier"
@@ -101,3 +101,7 @@ export default {
 		text-align: center;
 	}
 </style>
+
+<style lang="scss">
+  $list-item-min-height: 32px;
+</style>

app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue

@@ -24,7 +24,6 @@
         <template #activator="{ on }">
           <v-btn
             icon
-            flat
             :class="{'primary--text': filtersApplied}"
             v-on="on"
           >
@@ -49,14 +48,14 @@
           </v-list-item>
           <div class="layout">
             <v-btn
-              flat
+              text
               @click="clearBooleanFilters"
             >
               Clear
             </v-btn>
             <v-spacer />
             <v-btn
-              flat
+              text
               class="primary--text"
               @click="filterMenuOpen = false"
             >
@@ -127,13 +126,13 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Cancel
       </v-btn>
       <v-btn
-        flat
+        text
         :disabled="!canCast"
         class="primary--text"
         @click="$store.dispatch('popDialogStack', {

app/imports/ui/properties/components/spells/SpellListTile.vue

@@ -37,7 +37,6 @@
       <v-btn
         v-else-if="showInfoButton"
         icon
-        flat
         class="info-icon"
         :data-id="`spell-info-btn-${model._id}`"
         @click.stop="$emit('show-info')"