Continued migrating UI to vuetify 2

app/imports/ui/components/ColorPicker.vue

@@ -6,12 +6,14 @@
     lazy
     left
   >
-    <v-btn
-      slot="activator"
-      icon
-    >
-      <v-icon>format_paint</v-icon>
-    </v-btn>
+    <template #activator="{ on }">
+      <v-btn
+        icon
+        v-on="on"
+      >
+        <v-icon>format_paint</v-icon>
+      </v-btn>
+    </template>
     <v-card class="overflow-hidden">
       <v-card-text>
         <v-layout
@@ -71,14 +73,14 @@
       </v-card-text>
       <v-card-actions>
         <v-btn
-          flat
+          text
           @click="$emit('input')"
         >
           Clear
         </v-btn>
         <v-spacer />
         <v-btn
-          flat
+          text
           @click="opened = false"
         >
           Done

app/imports/ui/components/IncrementMenu.vue

@@ -43,9 +43,9 @@
     <v-btn
       :small="!flat"
       :fab="!flat"
-      :flat="flat"
+      :text="flat"
       :icon="flat"
-      class="filled"
+      class="mx-2 filled"
       @click="commitEdit"
     >
       <v-icon>done</v-icon>
@@ -53,9 +53,9 @@
     <v-btn
       :small="!flat"
       :fab="!flat"
-      :flat="flat"
+      :text="flat"
       :icon="flat"
-      class="mx-0 filled"
+      class="filled"
       @click="cancelEdit"
     >
       <v-icon>close</v-icon>

app/imports/ui/components/ToolbarCard.vue

@@ -30,7 +30,7 @@
 			color: {
 				type: String,
 				default(){
-					return this.$vuetify.theme.secondary;
+					return this.$vuetify.theme.themes.light.secondary;
 				},
 			},
 		},

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

@@ -16,7 +16,7 @@
         :loading="loading"
         :error-messages="errors"
         :disabled="isDisabled"
-        box
+        filled
         v-on="on"
         @focus="focused = true"
         @blur="focused = false"

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

@@ -7,7 +7,7 @@
     :menu-props="{auto: true, lazy: true}"
     :search-input.sync="searchInput"
     :disabled="isDisabled"
-    box
+    filled
     @change="customChange"
     @focus="focused = true"
     @blur="focused = false"

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

@@ -6,7 +6,7 @@
     :value="safeValue"
     :menu-props="{auto: true, lazy: true}"
     :disabled="isDisabled"
-    box
+    filled
     @change="change"
     @focus="focused = true"
     @blur="focused = false"

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

@@ -6,7 +6,7 @@
     :value="safeValue"
     :disabled="isDisabled"
     :auto-grow="autoGrow"
-    box
+    filled
     @input="input"
     @focus="focused = true"
     @blur="focused = false"

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

@@ -6,7 +6,7 @@
     :error-messages="errors"
     :value="safeValue"
     :disabled="isDisabled"
-    :box="!regular"
+    :filled="!regular"
     @input="input"
     @focus="focused = true"
     @blur="focused = false"

app/imports/ui/components/propertyToolbar.vue

@@ -142,7 +142,7 @@ export default {
       return isDarkColor(this.color);
     },
     color(){
-      return this.model && this.model.color || this.$vuetify.theme.secondary;
+      return this.model && this.model.color || this.$vuetify.theme.themes.light.secondary;
     },
     title(){
       let model = this.model;

app/imports/ui/components/rolls/Check.vue

@@ -14,7 +14,7 @@
           <v-btn
             large
             fab
-            outline
+            outlined
             @click="makeRoll"
           >
             <div class="text-h4">

app/imports/ui/components/snackbars/Snackbars.vue

@@ -11,7 +11,6 @@
     <v-btn
       v-if="snackbar.callback"
       class="primary--text"
-      flat
       icon
       @click="doCallback"
     >
@@ -19,7 +18,6 @@
     </v-btn>
     <v-btn
       v-if="snackbar.showCloseButton"
-      flat
       icon
       @click="$store.dispatch('closeSnackbar')"
     >

app/imports/ui/components/tree/TreeNode.vue

@@ -161,7 +161,7 @@
 	.theme--light .tree-node-title:hover {
 		background: rgba(0,0,0,.04);
 	}
-  .dummy-node {
+  .tree-node-title, .dummy-node {
     height: 40px;
   }
 </style>

app/imports/ui/creature/CreatureFormDialog.vue

@@ -20,7 +20,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Done

app/imports/ui/creature/RestButton.vue

@@ -2,7 +2,7 @@
   <v-btn
     :loading="loading"
     :disabled="context.editPermission === false"
-    outline
+    outlined
     style="width: 160px;"
     @click="rest"
   >

app/imports/ui/creature/character/CharacterCreationDialog.vue

@@ -229,14 +229,14 @@
     </v-stepper>
     <template slot="actions">
       <v-btn
-        flat
+        text
         @click="$emit('pop')"
       >
         Cancel
       </v-btn>
       <v-btn
         v-if="step > 1"
-        flat
+        text
         @click="step--"
       >
         Back

app/imports/ui/creature/character/CharacterDeleteDialog.vue

@@ -22,7 +22,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Cancel

app/imports/ui/creature/character/CharacterSheetFab.vue

@@ -12,8 +12,12 @@
         data-id="insert-creature-property-fab"
         small
       >
-        <v-icon>add</v-icon>
-        <v-icon>close</v-icon>
+        <v-icon v-if="fab">
+          close
+        </v-icon>
+        <v-icon v-else>
+          add
+        </v-icon>
       </v-btn>
     </template>
 

app/imports/ui/creature/character/CharacterSheetToolbar.vue

@@ -1,16 +1,17 @@
 <template lang="html">
-  <v-toolbar
+  <v-app-bar
     app
     class="character-sheet-toolbar"
     :color="toolbarColor"
     :dark="isDark"
     :light="!isDark"
+    clipped-right
     extended
     tabs
     dense
   >
-    <v-toolbar-side-icon @click="toggleDrawer" />
-    <v-toolbar-title>
+    <v-app-bar-nav-icon @click="toggleDrawer" />
+    <v-app-bar-title>
       <v-fade-transition
         mode="out-in"
       >
@@ -18,13 +19,13 @@
           {{ $store.state.pageTitle }}
         </div>
       </v-fade-transition>
-    </v-toolbar-title>
+    </v-app-bar-title>
     <v-spacer />
     <v-fade-transition
       mode="out-in"
     >
       <div :key="$route.meta.title">
-        <v-toolbar-items v-if="creature">
+        <template v-if="creature">
           <v-menu
             bottom
             left
@@ -64,8 +65,8 @@
               </v-list-item>
             </v-list>
           </v-menu>
-          <v-toolbar-side-icon @click="toggleRightDrawer" />
-        </v-toolbar-items>
+          <v-app-bar-nav-icon @click="toggleRightDrawer" />
+        </template>
       </div>
     </v-fade-transition>
     <v-fade-transition
@@ -83,7 +84,9 @@
           centered
           grow
           max="100px"
+          color="primary"
           :value="$store.getters.tabById($route.params.id)"
+          :background-color="toolbarColor"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
@@ -115,7 +118,7 @@
         />
       </div>
     </v-fade-transition>
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
 <script lang="js">
@@ -142,7 +145,7 @@ export default {
       if (this.creature && this.creature.color){
         return this.creature.color;
       } else {
-        return this.$vuetify.theme.secondary;
+        return this.$vuetify.theme.themes.light.secondary;
       }
     },
     isDark(){

app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue

@@ -69,7 +69,6 @@
               </v-list-item-content>
               <v-list-item-action>
                 <v-btn
-                  flat
                   icon
                   data-id="experience-info-button"
                   @click="showExperienceList"
@@ -79,7 +78,6 @@
               </v-list-item-action>
               <v-list-item-action>
                 <v-btn
-                  flat
                   icon
                   data-id="experience-add-button"
                   @click="addExperience"

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -11,10 +11,12 @@
             <rest-button
               :creature-id="creatureId"
               type="shortRest"
+              class="ma-1"
             />
             <rest-button
               :creature-id="creatureId"
               type="longRest"
+              class="ma-1"
             />
           </v-card-text>
         </v-card>
@@ -41,7 +43,6 @@
               <v-list-item-action>
                 <v-btn
                   icon
-                  flat
                   @click.stop="softRemove(buff._id)"
                 >
                   <v-icon>delete</v-icon>

app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue

@@ -12,6 +12,7 @@
           <v-toolbar
             flat
             dense
+            style="flex-grow: 0;"
           >
             <v-spacer />
             <v-switch

app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -5,6 +5,7 @@
         :model="model"
         :editing="editing"
         :flat="flat"
+        style="flex-grow: 0;"
         @duplicate="duplicate"
         @remove="remove"
         @toggle-editing="editing = !editing"
@@ -49,7 +50,7 @@
       class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Done

app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue

@@ -12,7 +12,7 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         color="primary"
         @click="$store.dispatch('popDialogStack', node)"
       >

app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue

@@ -28,7 +28,7 @@
       class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="$store.dispatch('popDialogStack', model)"
       >

app/imports/ui/creature/experiences/ExperienceInsertDialog.vue

@@ -16,7 +16,7 @@
       class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="insertExperience"
       >

app/imports/ui/creature/experiences/ExperienceListDialog.vue

@@ -7,7 +7,6 @@
       <v-spacer />
       <v-btn
         icon
-        flat
         data-id="experience-add-button"
         @click="addExperience"
       >
@@ -15,7 +14,6 @@
       </v-btn>
       <v-btn
         icon
-        flat
         @click="recompute"
       >
         <v-icon>refresh</v-icon>
@@ -37,7 +35,7 @@
       <v-icon style="font-size: 240px; width: 240px; height: 240px;">
         $vuetify.icons.baby_face
       </v-icon>
-      <p class="headline">
+      <p class="text-h5">
         No experiences
       </p>
     </div>

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -121,13 +121,13 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Cancel
       </v-btn>
       <v-btn
-        flat
+        text
         :disabled="!selectedNode"
         @click="insert"
       >

app/imports/ui/creature/slots/Slots.vue

@@ -28,7 +28,6 @@
           <v-list-item-action>
             <v-btn
               icon
-              flat
               small
               @click.stop="remove(child)"
             >

app/imports/ui/dialogStack/DeleteConfirmationDialog.vue

@@ -24,7 +24,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Cancel

app/imports/ui/dialogStack/DialogBase.vue

@@ -16,7 +16,6 @@
       >
         <v-btn
           icon
-          flat
           @click="back"
         >
           <v-icon>arrow_back</v-icon>
@@ -67,7 +66,7 @@
         return isDarkColor(this.computedColor);
       },
       computedColor(){
-        return this.color || this.$vuetify.theme.secondary;
+        return this.color || this.$vuetify.theme.themes.light.secondary;
       }
     },
 		methods: {

app/imports/ui/dialogStack/DialogStack.vue

@@ -213,7 +213,7 @@
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.4);
-    z-index: 4;
+    z-index: 6;
     pointer-events: initial;
   }
   .backdrop-fade-enter-active, .backdrop-fade-leave-active {
@@ -229,7 +229,7 @@
     right: 0;
     bottom: 0;
     pointer-events: none;
-    z-index: 4;
+    z-index: 6;
   }
   .dialog-sizer {
     position: relative;
@@ -239,7 +239,7 @@
     height: 80%;
     height: calc(100% - 64px);
     max-height: 800px;
-    z-index: 5;
+    z-index: 7;
     flex: initial;
   }
   /* sm */

app/imports/ui/layouts/Sidebar.vue

@@ -5,7 +5,7 @@
       justify-center
     >
       <v-btn
-        flat
+        text
         to="/sign-in"
       >
         Sign in

app/imports/ui/layouts/SingleCardLayout.vue

@@ -13,3 +13,7 @@
     </v-card>
   </div>
 </template>
+
+<script lang="js">
+  export default {}
+</script>

app/imports/ui/library/LibraryAndNode.vue

@@ -28,7 +28,7 @@
       </v-toolbar>
       <div
         v-if="libraryId"
-        style="width: 100%; height: 100%; overflow: auto;"
+        style="width: 100%; height: 100%; overflow: auto; padding: 12px;"
       >
         <library-contents-container
           :library-id="libraryId"
@@ -43,7 +43,7 @@
         edit-mode
         :organize-mode="organize"
         :selected-node-id="selected"
-        style="overflow-y: auto;"
+        style="overflow-y: auto; padding: 12px;"
         @selected="clickNode"
       />
     </div>
@@ -94,7 +94,7 @@ export default {
     isToolbarDark(){
       return isDarkColor(
         this.selectedNode && this.selectedNode.color ||
-        this.$vuetify.theme.secondary
+        this.$vuetify.theme.themes.light.secondary
       );
     }
   },

app/imports/ui/library/LibraryBrowser.vue

@@ -1,38 +1,40 @@
 <template lang="html">
   <div
+    class="library-browser"
     style="
       background-color: inherit;
       overflow-y: auto;
     "
   >
-    <v-expansion-panel
-      style="box-shadow: none;"
-      expand
+    <v-expansion-panels
+      v-model="expandedLibrary"
+      accordian
+      flat
+      multiple
     >
-      <v-expansion-panel-content
+      <v-expansion-panel
         v-for="(library, index) in libraries"
         :key="library._id"
-        v-model="expandedLibrary[index]"
-        lazy
         :data-id="library._id"
       >
-        <template #header>
+        <v-expansion-panel-header>
           <div class="text-h6">
             {{ library.name }}
           </div>
-        </template>
-        <v-card flat>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
           <library-contents-container
             :library-id="library._id"
             :organize-mode="organizeMode && editPermission(library)"
             :edit-mode="editMode"
             :selected-node-id="selectedNodeId"
-            :should-subscribe="expandedLibrary[index]"
+            :should-subscribe="expandedLibrary.includes(index)"
+            class="mb-4"
             @selected="e => $emit('selected', e)"
           />
-          <v-card-actions>
+          <v-layout>
             <v-btn
-              flat
+              text
               small
               style="background-color: inherit; margin-top: 0;"
               :disabled="!editPermission(library)"
@@ -44,21 +46,20 @@
             </v-btn>
             <v-spacer />
             <v-btn
-              flat
               small
               icon
               @click="$router.push(`/library/${library._id}`)"
             >
               <v-icon>arrow_forward</v-icon>
             </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
+          </v-layout>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
     <v-btn
       v-show="noLibrariesExpanded"
       v-if="editMode"
-      flat
+      text
       color="primary"
       style="background-color: inherit;"
       data-id="insert-library-button"
@@ -97,12 +98,7 @@ export default {
   };},
   computed: {
     noLibrariesExpanded(){
-      if (!this.expandedLibrary) return true;
-      let noneExpanded = true;
-      this.expandedLibrary.forEach(lib => {
-        if(lib) noneExpanded = false;
-      });
-      return noneExpanded;
+      return !this.expandedLibrary || this.expandedLibrary.length === 0;
     },
   },
   meteor: {
@@ -186,5 +182,8 @@ export default {
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
+.v-expansion-panel-content__wrap, .v-expansion-panel-header {
+  padding: 0 !important;
+}
 </style>

app/imports/ui/library/LibraryCreationDialog.vue

@@ -16,7 +16,7 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="$store.dispatch('popDialogStack', library)"
       >

app/imports/ui/library/LibraryEditDialog.vue

@@ -6,7 +6,6 @@
       </v-toolbar-title>
       <v-spacer />
       <v-btn
-        flat
         icon
         data-id="share-library-button"
         @click="share"
@@ -14,7 +13,6 @@
         <v-icon>share</v-icon>
       </v-btn>
       <v-btn
-        flat
         icon
         data-id="delete-library-button"
         @click="remove"
@@ -32,7 +30,7 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         data-id="delete-library-button"
         @click="$store.dispatch('popDialogStack')"
       >

app/imports/ui/library/LibraryNodeDialog.vue

@@ -43,14 +43,14 @@
     >
       <template v-if="selection">
         <v-btn
-          flat
+          text
           @click="$store.dispatch('popDialogStack', false)"
         >
           Cancel
         </v-btn>
         <v-spacer />
         <v-btn
-          flat
+          text
           @click="$store.dispatch('popDialogStack', true)"
         >
           Select
@@ -58,7 +58,7 @@
       </template>
       <v-btn
         v-else
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Done

app/imports/ui/library/LibraryNodeInsertForm.vue

@@ -28,7 +28,7 @@
       class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="$store.dispatch('popDialogStack', model)"
       >

app/imports/ui/library/MoveLibraryNodeDialog.vue

@@ -12,7 +12,7 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         color="primary"
         @click="$store.dispatch('popDialogStack', node._id)"
       >

app/imports/ui/library/SingleLibraryToolbar.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <v-toolbar
+  <v-app-bar
     app
     color="secondary"
     dark
@@ -7,40 +7,34 @@
     extended
     dense
   >
-    <v-toolbar-side-icon @click="toggleDrawer" />
-    <v-toolbar-items>
-      <v-btn
-        flat
-        icon
-        @click="$router.push('/library')"
-      >
-        <v-icon>arrow_back</v-icon>
-      </v-btn>
-    </v-toolbar-items>
+    <v-app-bar-nav-icon @click="toggleDrawer" />
+    <v-btn
+      icon
+      @click="$router.push('/library')"
+    >
+      <v-icon>arrow_back</v-icon>
+    </v-btn>
     <v-toolbar-title>
       {{ library && library.name }}
     </v-toolbar-title>
     <v-spacer />
-    <v-toolbar-items>
-      <v-btn
-        v-if="showSubscribeButton"
-        flat
-        :loading="loading"
-        @click="subscribe(!subscribed)"
-      >
-        {{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
-      </v-btn>
-      <v-btn
-        v-if="canEdit"
-        flat
-        icon
-        data-id="library-edit-button"
-        @click="editLibrary(library._id)"
-      >
-        <v-icon>settings</v-icon>
-      </v-btn>
-    </v-toolbar-items>
-  </v-toolbar>
+    <v-btn
+      v-if="showSubscribeButton"
+      text
+      :loading="loading"
+      @click="subscribe(!subscribed)"
+    >
+      {{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
+    </v-btn>
+    <v-btn
+      v-if="canEdit"
+      icon
+      data-id="library-edit-button"
+      @click="editLibrary(library._id)"
+    >
+      <v-icon>settings</v-icon>
+    </v-btn>
+  </v-app-bar>
 </template>
 
 <script lang="js">

app/imports/ui/pages/Account.vue

@@ -37,7 +37,6 @@
               <v-btn
                 slot="activator"
                 icon
-                flat
                 @click="changeUsername"
               >
                 <v-icon>create</v-icon>
@@ -70,7 +69,6 @@
               <v-btn
                 slot="activator"
                 icon
-                flat
                 :loading="updatePatreonLoading"
                 @click="updatePatreon"
               >

app/imports/ui/pages/Feedback.vue

@@ -24,7 +24,7 @@
       <v-card-actions>
         <v-spacer />
         <v-btn
-          flat
+          text
           color="primary"
           href="https://discord.gg/qEvdfeB"
         >

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')"

app/imports/ui/properties/forms/AttributesConsumedListForm.vue

@@ -13,7 +13,7 @@
             />
           </div>
           <v-btn
-            outline
+            outlined
             icon
             large
             class="ma-3"

app/imports/ui/properties/forms/ItemsConsumedListForm.vue

@@ -13,7 +13,7 @@
             />
           </div>
           <v-btn
-            outline
+            outlined
             icon
             large
             class="ma-3"

app/imports/ui/properties/forms/ResourcesForm.vue

@@ -31,7 +31,7 @@
             :disabled="addResourceLoading || context.editPermission === false"
             icon
             large
-            outline
+            outlined
             v-on="on"
           >
             <v-icon>add</v-icon>

app/imports/ui/properties/forms/shared/CalculationErrorList.vue

@@ -13,7 +13,7 @@
         :value="true"
         :icon="errorIcon(error.type)"
         :color="errorColor(error.type)"
-        outline
+        outlined
       >
         <pre>{{ error.message }}</pre>
       </v-alert>

app/imports/ui/properties/viewers/ActionViewer.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="action-viewer">
-    <div class="action-sub-title layout row align-center justify-space-between wrap mb-3">
+    <div class="action-sub-title layout align-center justify-space-between wrap mb-3">
       <property-tags
         :tags="model.tags"
         no-margin
@@ -16,8 +16,7 @@
     <div class="layout align-center justify-space-around">
       <v-btn
         v-if="context.creatureId"
-        flat
-        outline
+        outlined
         style="font-size: 18px;"
         class="ma-2"
         :color="model.color || 'primary'"
@@ -66,7 +65,7 @@
         </span>
         <v-btn
           v-if="context.creatureId"
-          outline
+          outlined
           color="primary"
           :disabled="!model.usesUsed || !context.editPermission"
           @click="resetUses"

app/imports/ui/properties/viewers/DamageViewer.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="damage-viewer layout row align-center">
+  <div class="damage-viewer layout align-center">
     {{ model.amountResult }}
     {{ model.damageType }}<span
       v-if="model.damageType !== 'healing'"

app/imports/ui/properties/viewers/ItemViewer.vue

@@ -12,7 +12,7 @@
         v-if="context.creatureId && model.showIncrement"
         icon
         large
-        outline
+        outlined
         color="primary"
         :value="model.quantity"
         @change="changeQuantity"

app/imports/ui/properties/viewers/ProficiencyViewer.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="proficiency-viewer">
-    <div class="text-h5 layout row">
+    <div class="text-h5 layout">
       {{ model.skill }}
       <proficiency-icon
         :value="model.value"

app/imports/ui/properties/viewers/SkillViewer.vue

@@ -6,7 +6,7 @@
     >
       <div
         v-if="model.value !== undefined"
-        class="text-h4 layout row align-center"
+        class="text-h4 layout align-center"
       >
         <v-icon class="mr-4">
           {{ icon }}

app/imports/ui/sharing/ShareDialog.vue

@@ -105,7 +105,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Done

app/imports/ui/styles/stylesIndex.js

@@ -4,3 +4,4 @@ import './centeredInputs.css';
 import './largeFormatInputs.css';
 import './fitAvatars.css';
 import './lineClamp.css';
+import './toolbarFlex.css'

app/imports/ui/styles/toolbarFlex.css

@@ -0,0 +1,3 @@
+.v-toolbar {
+  flex-grow: 0;
+}

app/imports/ui/tabletop/SelectCreaturesDialog.vue

@@ -19,7 +19,7 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         color="primary"
         @click="$store.dispatch('popDialogStack', selected)"
       >

app/imports/ui/tabletop/TabletopComponent.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="tabletop">
-    <section class="initiative-row layout row center">
+    <section class="initiative-row layout center">
       <tabletop-creature-card
         v-for="creature in creatures"
         :key="creature._id"
@@ -13,7 +13,7 @@
         hover
         @click="addCreature"
       >
-        <div class="flex layout row justify-center align-center">
+        <div class="flex layout justify-center align-center">
           <v-icon>add</v-icon>
         </div>
         <v-card-title>

app/imports/ui/tabletop/TabletopToolbar.vue

@@ -5,7 +5,7 @@
     dark
     dense
   >
-    <v-toolbar-side-icon @click="toggleDrawer" />
+    <v-app-bar-nav-icon @click="toggleDrawer" />
     <v-toolbar-title>
       Tabletop
     </v-toolbar-title>

app/imports/ui/user/DeleteUserAccountDialog.vue

@@ -9,7 +9,7 @@
         :value="true"
         icon="warning"
         color="error"
-        outline
+        outlined
       >
         Deleted accounts can not be recovered
       </v-alert>
@@ -79,7 +79,7 @@
       class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Cancel

app/imports/ui/user/TierTooLowDialog.vue

@@ -22,7 +22,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Cancel

app/imports/ui/user/UsernameDialog.vue

@@ -14,7 +14,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       :disabled="!valid"
       :loading="loading"
       @click="setUsername"

app/imports/ui/vueSetup.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
 import store from '/imports/ui/vuexStore.js';
 import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
@@ -11,6 +10,9 @@ import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
 import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 import '/imports/ui/markdownCofig.js';
 
+import Vuetify from 'vuetify/lib';
+import { Scroll } from 'vuetify/lib/directives'
+
 let icons = {};
 
 for (const name in SVG_ICONS) {
@@ -26,7 +28,11 @@ for (const name in SVG_ICONS) {
 Vue.use(VueMeteorTracker);
 Vue.config.meteor.freeze = true;
 Vue.config.devtools = true;
-Vue.use(Vuetify);
+Vue.use(Vuetify, {
+  directives: {
+    Scroll,
+  },
+});
 Vue.use(ReactiveProvide, {
   name: 'reactiveProvide', // default value
 })
@@ -41,6 +47,7 @@ Meteor.startup(() => {
       theme: {
         dark: false,
         themes,
+        options: { customProperties: true },
       },
       icons: {
         iconfont: 'md',