From fe3fa56541d4f17bef6df5b966ff8e90e0485484 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Mar 2021 12:54:44 +0200
Subject: [PATCH] Continued migrating UI to vuetify 2

---
 app/imports/ui/components/ColorPicker.vue     | 18 +++--
 app/imports/ui/components/IncrementMenu.vue   |  8 +-
 app/imports/ui/components/ToolbarCard.vue     |  2 +-
 .../ui/components/global/DatePicker.vue       |  2 +-
 .../ui/components/global/SmartCombobox.vue    |  2 +-
 .../ui/components/global/SmartSelect.vue      |  2 +-
 app/imports/ui/components/global/TextArea.vue |  2 +-
 .../ui/components/global/TextField.vue        |  2 +-
 app/imports/ui/components/propertyToolbar.vue |  2 +-
 app/imports/ui/components/rolls/Check.vue     |  2 +-
 .../ui/components/snackbars/Snackbars.vue     |  2 -
 app/imports/ui/components/tree/TreeNode.vue   |  2 +-
 .../ui/creature/CreatureFormDialog.vue        |  2 +-
 app/imports/ui/creature/RestButton.vue        |  2 +-
 .../character/CharacterCreationDialog.vue     |  4 +-
 .../character/CharacterDeleteDialog.vue       |  2 +-
 .../creature/character/CharacterSheetFab.vue  |  8 +-
 .../character/CharacterSheetToolbar.vue       | 21 +++---
 .../characterSheetTabs/CharacterTab.vue       |  2 -
 .../character/characterSheetTabs/StatsTab.vue |  3 +-
 .../character/characterSheetTabs/TreeTab.vue  |  1 +
 .../CreaturePropertyDialog.vue                |  3 +-
 .../CreaturePropertyFromLibraryDialog.vue     |  2 +-
 .../CreaturePropertyInsertForm.vue            |  2 +-
 .../experiences/ExperienceInsertDialog.vue    |  2 +-
 .../experiences/ExperienceListDialog.vue      |  4 +-
 .../ui/creature/slots/SlotFillDialog.vue      |  4 +-
 app/imports/ui/creature/slots/Slots.vue       |  1 -
 .../dialogStack/DeleteConfirmationDialog.vue  |  2 +-
 app/imports/ui/dialogStack/DialogBase.vue     |  3 +-
 app/imports/ui/dialogStack/DialogStack.vue    |  6 +-
 app/imports/ui/layouts/Sidebar.vue            |  2 +-
 app/imports/ui/layouts/SingleCardLayout.vue   |  4 +
 app/imports/ui/library/LibraryAndNode.vue     |  6 +-
 app/imports/ui/library/LibraryBrowser.vue     | 49 ++++++------
 .../ui/library/LibraryCreationDialog.vue      |  2 +-
 app/imports/ui/library/LibraryEditDialog.vue  |  4 +-
 app/imports/ui/library/LibraryNodeDialog.vue  |  6 +-
 .../ui/library/LibraryNodeInsertForm.vue      |  2 +-
 .../ui/library/MoveLibraryNodeDialog.vue      |  2 +-
 .../ui/library/SingleLibraryToolbar.vue       | 56 +++++++-------
 app/imports/ui/pages/Account.vue              |  2 -
 app/imports/ui/pages/Feedback.vue             |  2 +-
 .../components/actions/ActionCard.vue         |  8 +-
 .../components/attributes/HealthBar.vue       |  4 +-
 .../components/attributes/ResourceCard.vue    | 74 ++++++++++---------
 .../attributes/SpellSlotListTile.vue          |  2 +-
 .../components/inventory/ItemListTile.vue     |  1 -
 .../components/skills/SkillListTile.vue       | 14 ++--
 .../spells/CastSpellWithSlotDialog.vue        |  9 +--
 .../components/spells/SpellListTile.vue       |  1 -
 .../forms/AttributesConsumedListForm.vue      |  2 +-
 .../forms/ItemsConsumedListForm.vue           |  2 +-
 .../ui/properties/forms/ResourcesForm.vue     |  2 +-
 .../forms/shared/CalculationErrorList.vue     |  2 +-
 .../ui/properties/viewers/ActionViewer.vue    |  7 +-
 .../ui/properties/viewers/DamageViewer.vue    |  2 +-
 .../ui/properties/viewers/ItemViewer.vue      |  2 +-
 .../properties/viewers/ProficiencyViewer.vue  |  2 +-
 .../ui/properties/viewers/SkillViewer.vue     |  2 +-
 app/imports/ui/sharing/ShareDialog.vue        |  2 +-
 app/imports/ui/styles/stylesIndex.js          |  1 +
 app/imports/ui/styles/toolbarFlex.css         |  3 +
 .../ui/tabletop/SelectCreaturesDialog.vue     |  2 +-
 app/imports/ui/tabletop/TabletopComponent.vue |  4 +-
 app/imports/ui/tabletop/TabletopToolbar.vue   |  2 +-
 .../ui/user/DeleteUserAccountDialog.vue       |  4 +-
 app/imports/ui/user/TierTooLowDialog.vue      |  2 +-
 app/imports/ui/user/UsernameDialog.vue        |  2 +-
 app/imports/ui/vueSetup.js                    | 11 ++-
 70 files changed, 218 insertions(+), 208 deletions(-)
 create mode 100644 app/imports/ui/styles/toolbarFlex.css

diff --git a/app/imports/ui/components/ColorPicker.vue b/app/imports/ui/components/ColorPicker.vue
index 3eb80706..35326916 100644
--- a/app/imports/ui/components/ColorPicker.vue
+++ b/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
diff --git a/app/imports/ui/components/IncrementMenu.vue b/app/imports/ui/components/IncrementMenu.vue
index 457570c6..24d46b91 100644
--- a/app/imports/ui/components/IncrementMenu.vue
+++ b/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>
diff --git a/app/imports/ui/components/ToolbarCard.vue b/app/imports/ui/components/ToolbarCard.vue
index 29e61ac5..d3725887 100644
--- a/app/imports/ui/components/ToolbarCard.vue
+++ b/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;
 				},
 			},
 		},
diff --git a/app/imports/ui/components/global/DatePicker.vue b/app/imports/ui/components/global/DatePicker.vue
index f3e5ad48..3608a5c0 100644
--- a/app/imports/ui/components/global/DatePicker.vue
+++ b/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"
diff --git a/app/imports/ui/components/global/SmartCombobox.vue b/app/imports/ui/components/global/SmartCombobox.vue
index e61ffe9e..2406ef82 100644
--- a/app/imports/ui/components/global/SmartCombobox.vue
+++ b/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"
diff --git a/app/imports/ui/components/global/SmartSelect.vue b/app/imports/ui/components/global/SmartSelect.vue
index 34a266ec..2584492e 100644
--- a/app/imports/ui/components/global/SmartSelect.vue
+++ b/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"
diff --git a/app/imports/ui/components/global/TextArea.vue b/app/imports/ui/components/global/TextArea.vue
index c68b8757..4775bb3c 100644
--- a/app/imports/ui/components/global/TextArea.vue
+++ b/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"
diff --git a/app/imports/ui/components/global/TextField.vue b/app/imports/ui/components/global/TextField.vue
index 61547a10..0347a59c 100644
--- a/app/imports/ui/components/global/TextField.vue
+++ b/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"
diff --git a/app/imports/ui/components/propertyToolbar.vue b/app/imports/ui/components/propertyToolbar.vue
index 48594b68..9b9c8497 100644
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/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;
diff --git a/app/imports/ui/components/rolls/Check.vue b/app/imports/ui/components/rolls/Check.vue
index 57d5dbdf..19103522 100644
--- a/app/imports/ui/components/rolls/Check.vue
+++ b/app/imports/ui/components/rolls/Check.vue
@@ -14,7 +14,7 @@
           <v-btn
             large
             fab
-            outline
+            outlined
             @click="makeRoll"
           >
             <div class="text-h4">
diff --git a/app/imports/ui/components/snackbars/Snackbars.vue b/app/imports/ui/components/snackbars/Snackbars.vue
index a42d6fe1..711c5e5a 100644
--- a/app/imports/ui/components/snackbars/Snackbars.vue
+++ b/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')"
     >
diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index 77d12226..c2ed3319 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/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>
diff --git a/app/imports/ui/creature/CreatureFormDialog.vue b/app/imports/ui/creature/CreatureFormDialog.vue
index 5367b741..05ad4239 100644
--- a/app/imports/ui/creature/CreatureFormDialog.vue
+++ b/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
diff --git a/app/imports/ui/creature/RestButton.vue b/app/imports/ui/creature/RestButton.vue
index 683d08e0..81974af2 100644
--- a/app/imports/ui/creature/RestButton.vue
+++ b/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"
   >
diff --git a/app/imports/ui/creature/character/CharacterCreationDialog.vue b/app/imports/ui/creature/character/CharacterCreationDialog.vue
index f30437fc..c9be196f 100644
--- a/app/imports/ui/creature/character/CharacterCreationDialog.vue
+++ b/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
diff --git a/app/imports/ui/creature/character/CharacterDeleteDialog.vue b/app/imports/ui/creature/character/CharacterDeleteDialog.vue
index 8cde88cb..3f7a8c96 100644
--- a/app/imports/ui/creature/character/CharacterDeleteDialog.vue
+++ b/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
diff --git a/app/imports/ui/creature/character/CharacterSheetFab.vue b/app/imports/ui/creature/character/CharacterSheetFab.vue
index cc4c5734..54d72cb4 100644
--- a/app/imports/ui/creature/character/CharacterSheetFab.vue
+++ b/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>
 
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index c8920178..24ceb677 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/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(){
diff --git a/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue b/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
index 56e0ed9b..d82778be 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
+++ b/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"
diff --git a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
index aff95761..10930cff 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
+++ b/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>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index 08c4ebfd..cd30224d 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -12,6 +12,7 @@
           <v-toolbar
             flat
             dense
+            style="flex-grow: 0;"
           >
             <v-spacer />
             <v-switch
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index d6f15ad1..0a250bee 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/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
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
index 18fb34bf..1910b5ee 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
+++ b/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)"
       >
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
index 15a103de..96abc130 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
+++ b/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)"
       >
diff --git a/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue b/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue
index 57b06436..28756d1f 100644
--- a/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue
+++ b/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue
@@ -16,7 +16,7 @@
       class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="insertExperience"
       >
diff --git a/app/imports/ui/creature/experiences/ExperienceListDialog.vue b/app/imports/ui/creature/experiences/ExperienceListDialog.vue
index f8239b50..127e1797 100644
--- a/app/imports/ui/creature/experiences/ExperienceListDialog.vue
+++ b/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>
diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index f2c8e417..915d378a 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/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"
       >
diff --git a/app/imports/ui/creature/slots/Slots.vue b/app/imports/ui/creature/slots/Slots.vue
index 9de57258..77af4a26 100644
--- a/app/imports/ui/creature/slots/Slots.vue
+++ b/app/imports/ui/creature/slots/Slots.vue
@@ -28,7 +28,6 @@
           <v-list-item-action>
             <v-btn
               icon
-              flat
               small
               @click.stop="remove(child)"
             >
diff --git a/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue b/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
index 3e99a7a3..90fc56c7 100644
--- a/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
+++ b/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
diff --git a/app/imports/ui/dialogStack/DialogBase.vue b/app/imports/ui/dialogStack/DialogBase.vue
index c217c874..051f338d 100644
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/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: {
diff --git a/app/imports/ui/dialogStack/DialogStack.vue b/app/imports/ui/dialogStack/DialogStack.vue
index 4284f72e..6d703175 100644
--- a/app/imports/ui/dialogStack/DialogStack.vue
+++ b/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 */
diff --git a/app/imports/ui/layouts/Sidebar.vue b/app/imports/ui/layouts/Sidebar.vue
index aa7a9671..bab7781d 100644
--- a/app/imports/ui/layouts/Sidebar.vue
+++ b/app/imports/ui/layouts/Sidebar.vue
@@ -5,7 +5,7 @@
       justify-center
     >
       <v-btn
-        flat
+        text
         to="/sign-in"
       >
         Sign in
diff --git a/app/imports/ui/layouts/SingleCardLayout.vue b/app/imports/ui/layouts/SingleCardLayout.vue
index 71505657..0b82ea3c 100644
--- a/app/imports/ui/layouts/SingleCardLayout.vue
+++ b/app/imports/ui/layouts/SingleCardLayout.vue
@@ -13,3 +13,7 @@
     </v-card>
   </div>
 </template>
+
+<script lang="js">
+  export default {}
+</script>
diff --git a/app/imports/ui/library/LibraryAndNode.vue b/app/imports/ui/library/LibraryAndNode.vue
index ca6952f0..1aee1aab 100644
--- a/app/imports/ui/library/LibraryAndNode.vue
+++ b/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
       );
     }
   },
diff --git a/app/imports/ui/library/LibraryBrowser.vue b/app/imports/ui/library/LibraryBrowser.vue
index 9be22c02..931b6b5f 100644
--- a/app/imports/ui/library/LibraryBrowser.vue
+++ b/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>
diff --git a/app/imports/ui/library/LibraryCreationDialog.vue b/app/imports/ui/library/LibraryCreationDialog.vue
index 4ef7083e..a68deee1 100644
--- a/app/imports/ui/library/LibraryCreationDialog.vue
+++ b/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)"
       >
diff --git a/app/imports/ui/library/LibraryEditDialog.vue b/app/imports/ui/library/LibraryEditDialog.vue
index f739f4a9..735cedee 100644
--- a/app/imports/ui/library/LibraryEditDialog.vue
+++ b/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')"
       >
diff --git a/app/imports/ui/library/LibraryNodeDialog.vue b/app/imports/ui/library/LibraryNodeDialog.vue
index 631424a5..22908f96 100644
--- a/app/imports/ui/library/LibraryNodeDialog.vue
+++ b/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
diff --git a/app/imports/ui/library/LibraryNodeInsertForm.vue b/app/imports/ui/library/LibraryNodeInsertForm.vue
index a2739db9..86f1b1bf 100644
--- a/app/imports/ui/library/LibraryNodeInsertForm.vue
+++ b/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)"
       >
diff --git a/app/imports/ui/library/MoveLibraryNodeDialog.vue b/app/imports/ui/library/MoveLibraryNodeDialog.vue
index e53bdefd..a5824984 100644
--- a/app/imports/ui/library/MoveLibraryNodeDialog.vue
+++ b/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)"
       >
diff --git a/app/imports/ui/library/SingleLibraryToolbar.vue b/app/imports/ui/library/SingleLibraryToolbar.vue
index ade91df6..9c275b3b 100644
--- a/app/imports/ui/library/SingleLibraryToolbar.vue
+++ b/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">
diff --git a/app/imports/ui/pages/Account.vue b/app/imports/ui/pages/Account.vue
index 22be707d..40505125 100644
--- a/app/imports/ui/pages/Account.vue
+++ b/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"
               >
diff --git a/app/imports/ui/pages/Feedback.vue b/app/imports/ui/pages/Feedback.vue
index fff4b9de..587e6ade 100644
--- a/app/imports/ui/pages/Feedback.vue
+++ b/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"
         >
diff --git a/app/imports/ui/properties/components/actions/ActionCard.vue b/app/imports/ui/properties/components/actions/ActionCard.vue
index a5ef03b6..251d42df 100644
--- a/app/imports/ui/properties/components/actions/ActionCard.vue
+++ b/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>
diff --git a/app/imports/ui/properties/components/attributes/HealthBar.vue b/app/imports/ui/properties/components/attributes/HealthBar.vue
index 3b6a1442..a220c9e4 100644
--- a/app/imports/ui/properties/components/attributes/HealthBar.vue
+++ b/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>
diff --git a/app/imports/ui/properties/components/attributes/ResourceCard.vue b/app/imports/ui/properties/components/attributes/ResourceCard.vue
index cc932b54..ea75d40d 100644
--- a/app/imports/ui/properties/components/attributes/ResourceCard.vue
+++ b/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>
 
diff --git a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
index cbc1b93b..7f660d60 100644
--- a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
+++ b/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')"
diff --git a/app/imports/ui/properties/components/inventory/ItemListTile.vue b/app/imports/ui/properties/components/inventory/ItemListTile.vue
index 65379e97..9729ddc9 100644
--- a/app/imports/ui/properties/components/inventory/ItemListTile.vue
+++ b/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"
diff --git a/app/imports/ui/properties/components/skills/SkillListTile.vue b/app/imports/ui/properties/components/skills/SkillListTile.vue
index e2c19476..a0f875ad 100644
--- a/app/imports/ui/properties/components/skills/SkillListTile.vue
+++ b/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>
diff --git a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
index ed221800..8306bf94 100644
--- a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
+++ b/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', {
diff --git a/app/imports/ui/properties/components/spells/SpellListTile.vue b/app/imports/ui/properties/components/spells/SpellListTile.vue
index cf40f6a6..78da4462 100644
--- a/app/imports/ui/properties/components/spells/SpellListTile.vue
+++ b/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')"
diff --git a/app/imports/ui/properties/forms/AttributesConsumedListForm.vue b/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
index c57199ae..4c32001a 100644
--- a/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
+++ b/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
@@ -13,7 +13,7 @@
             />
           </div>
           <v-btn
-            outline
+            outlined
             icon
             large
             class="ma-3"
diff --git a/app/imports/ui/properties/forms/ItemsConsumedListForm.vue b/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
index 59106765..89e955e5 100644
--- a/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
+++ b/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
@@ -13,7 +13,7 @@
             />
           </div>
           <v-btn
-            outline
+            outlined
             icon
             large
             class="ma-3"
diff --git a/app/imports/ui/properties/forms/ResourcesForm.vue b/app/imports/ui/properties/forms/ResourcesForm.vue
index a4379466..f56c63d2 100644
--- a/app/imports/ui/properties/forms/ResourcesForm.vue
+++ b/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>
diff --git a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue b/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
index a3dd6017..29574ad7 100644
--- a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
+++ b/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>
diff --git a/app/imports/ui/properties/viewers/ActionViewer.vue b/app/imports/ui/properties/viewers/ActionViewer.vue
index 6d7db992..4c1e45ef 100644
--- a/app/imports/ui/properties/viewers/ActionViewer.vue
+++ b/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"
diff --git a/app/imports/ui/properties/viewers/DamageViewer.vue b/app/imports/ui/properties/viewers/DamageViewer.vue
index 2b0ab324..3bb69284 100644
--- a/app/imports/ui/properties/viewers/DamageViewer.vue
+++ b/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'"
diff --git a/app/imports/ui/properties/viewers/ItemViewer.vue b/app/imports/ui/properties/viewers/ItemViewer.vue
index 996aa124..b6adc5ee 100644
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/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"
diff --git a/app/imports/ui/properties/viewers/ProficiencyViewer.vue b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
index 0cca10ac..c91a5935 100644
--- a/app/imports/ui/properties/viewers/ProficiencyViewer.vue
+++ b/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"
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index 983028bc..fc9fc040 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/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 }}
diff --git a/app/imports/ui/sharing/ShareDialog.vue b/app/imports/ui/sharing/ShareDialog.vue
index 3ad13ce7..2fc10970 100644
--- a/app/imports/ui/sharing/ShareDialog.vue
+++ b/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
diff --git a/app/imports/ui/styles/stylesIndex.js b/app/imports/ui/styles/stylesIndex.js
index 74fa90a3..147433b6 100644
--- a/app/imports/ui/styles/stylesIndex.js
+++ b/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'
diff --git a/app/imports/ui/styles/toolbarFlex.css b/app/imports/ui/styles/toolbarFlex.css
new file mode 100644
index 00000000..d15ff34f
--- /dev/null
+++ b/app/imports/ui/styles/toolbarFlex.css
@@ -0,0 +1,3 @@
+.v-toolbar {
+  flex-grow: 0;
+}
diff --git a/app/imports/ui/tabletop/SelectCreaturesDialog.vue b/app/imports/ui/tabletop/SelectCreaturesDialog.vue
index 2cdccf4e..851b26a7 100644
--- a/app/imports/ui/tabletop/SelectCreaturesDialog.vue
+++ b/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)"
       >
diff --git a/app/imports/ui/tabletop/TabletopComponent.vue b/app/imports/ui/tabletop/TabletopComponent.vue
index 15ddbb95..5f00c26b 100644
--- a/app/imports/ui/tabletop/TabletopComponent.vue
+++ b/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>
diff --git a/app/imports/ui/tabletop/TabletopToolbar.vue b/app/imports/ui/tabletop/TabletopToolbar.vue
index 16a822f9..6d735619 100644
--- a/app/imports/ui/tabletop/TabletopToolbar.vue
+++ b/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>
diff --git a/app/imports/ui/user/DeleteUserAccountDialog.vue b/app/imports/ui/user/DeleteUserAccountDialog.vue
index 6188eee6..680cd846 100644
--- a/app/imports/ui/user/DeleteUserAccountDialog.vue
+++ b/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
diff --git a/app/imports/ui/user/TierTooLowDialog.vue b/app/imports/ui/user/TierTooLowDialog.vue
index 05fc04ad..46aeb934 100644
--- a/app/imports/ui/user/TierTooLowDialog.vue
+++ b/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
diff --git a/app/imports/ui/user/UsernameDialog.vue b/app/imports/ui/user/UsernameDialog.vue
index 5952484f..8980d6bc 100644
--- a/app/imports/ui/user/UsernameDialog.vue
+++ b/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"
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index 70eacffd..a938270d 100644
--- a/app/imports/ui/vueSetup.js
+++ b/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',