From 6ffb48b7b6506338edee0fe8c1a392dd2520d247 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 24 Mar 2021 16:23:39 +0200
Subject: [PATCH] Began migration to Vuetify 2.x expect a lot to be broken

---
 app/.meteor/packages                          |   6 +-
 app/.meteor/versions                          |  12 +-
 app/imports/ui/components/CoinValue.vue       |   2 +-
 app/imports/ui/components/ColorPicker.vue     |   2 +-
 app/imports/ui/components/ColumnLayout.vue    |   2 +-
 app/imports/ui/components/IncrementButton.vue |   2 +-
 app/imports/ui/components/IncrementMenu.vue   |   2 +-
 app/imports/ui/components/LabeledFab.vue      |   2 +-
 app/imports/ui/components/MarkdownText.vue    |   2 +-
 app/imports/ui/components/ToolbarCard.vue     |   2 +-
 .../ui/components/TreeDetailLayout.vue        |   4 +-
 .../computation/EmbedInlineComputations.vue   |   2 +-
 .../ui/components/global/DatePicker.vue       |   2 +-
 .../ui/components/global/IconPicker.vue       |   6 +-
 .../ui/components/global/SmartCheckbox.vue    |   2 +-
 .../ui/components/global/SmartCombobox.vue    |   2 +-
 .../ui/components/global/SmartSelect.vue      |   2 +-
 .../ui/components/global/SmartSwitch.vue      |   2 +-
 app/imports/ui/components/global/SvgIcon.vue  |   2 +-
 app/imports/ui/components/global/TextArea.vue |   2 +-
 .../ui/components/global/TextField.vue        |   2 +-
 app/imports/ui/components/propertyToolbar.vue |  50 ++--
 app/imports/ui/components/rolls/Check.vue     |   8 +-
 .../ui/components/snackbars/Snackbars.vue     |   2 +-
 app/imports/ui/components/tree/TreeNode.vue   |   6 +-
 .../ui/components/tree/TreeNodeList.vue       |   2 +-
 app/imports/ui/creature/CreatureForm.vue      |   2 +-
 .../ui/creature/CreatureFormDialog.vue        |   2 +-
 app/imports/ui/creature/CreatureListTile.vue  |  24 +-
 app/imports/ui/creature/RestButton.vue        |   2 +-
 .../character/CharacterCreationDialog.vue     |   2 +-
 .../character/CharacterDeleteDialog.vue       |   2 +-
 .../ui/creature/character/CharacterSheet.vue  |   2 +-
 .../creature/character/CharacterSheetFab.vue  |   2 +-
 .../character/CharacterSheetRightDrawer.vue   |   2 +-
 .../character/CharacterSheetToolbar.vue       |  40 ++-
 .../creature/character/MiniCharacterSheet.vue |   2 +-
 .../characterSheetTabs/CharacterTab.vue       |  42 +--
 .../characterSheetTabs/FeaturesTab.vue        |   2 +-
 .../characterSheetTabs/InventoryTab.vue       |  74 +++---
 .../characterSheetTabs/SpellsTab.vue          |   2 +-
 .../character/characterSheetTabs/StatsTab.vue |  18 +-
 .../character/characterSheetTabs/TreeTab.vue  |   2 +-
 .../CreaturePropertiesTree.vue                |   2 +-
 .../CreaturePropertyCreationDialog.vue        |   2 +-
 .../CreaturePropertyDialog.vue                |   4 +-
 .../CreaturePropertyFromLibraryDialog.vue     |   2 +-
 .../CreaturePropertyInsertForm.vue            |   4 +-
 .../creature/experiences/ExperienceForm.vue   |   2 +-
 .../experiences/ExperienceInsertDialog.vue    |   4 +-
 .../experiences/ExperienceListDialog.vue      |  34 +--
 .../ui/creature/slots/SlotDetailsDialog.vue   |   2 +-
 .../ui/creature/slots/SlotFillDialog.vue      |   6 +-
 app/imports/ui/creature/slots/Slots.vue       |  16 +-
 .../dialogStack/DeleteConfirmationDialog.vue  |   4 +-
 app/imports/ui/dialogStack/DialogBase.vue     |   2 +-
 app/imports/ui/dialogStack/DialogStack.vue    |   8 +-
 .../ui/documentation/FunctionReference.vue    |   2 +-
 app/imports/ui/icons/IconAdmin.vue            |   2 +-
 app/imports/ui/icons/SvgIconByName.vue        |   2 +-
 app/imports/ui/layouts/AppLayout.vue          |  18 +-
 app/imports/ui/layouts/Sidebar.vue            |  80 +++---
 app/imports/ui/library/LibraryAndNode.vue     |   2 +-
 app/imports/ui/library/LibraryBrowser.vue     |   2 +-
 .../ui/library/LibraryContentsContainer.vue   |   2 +-
 .../ui/library/LibraryCreationDialog.vue      |   2 +-
 app/imports/ui/library/LibraryEditDialog.vue  |   2 +-
 .../ui/library/LibraryNodeCreationDialog.vue  |   2 +-
 app/imports/ui/library/LibraryNodeDialog.vue  |   4 +-
 .../ui/library/LibraryNodeInsertForm.vue      |   4 +-
 .../ui/library/MoveLibraryNodeDialog.vue      |   2 +-
 .../ui/library/SingleLibraryToolbar.vue       |   2 +-
 app/imports/ui/log/CharacterLog.vue           |   2 +-
 app/imports/ui/log/LogEntry.vue               |   2 +-
 app/imports/ui/pages/About.vue                |  22 +-
 app/imports/ui/pages/Account.vue              |  68 ++---
 app/imports/ui/pages/CharacterList.vue        |  10 +-
 app/imports/ui/pages/CharacterSheetPage.vue   |   2 +-
 app/imports/ui/pages/Feedback.vue             |   2 +-
 app/imports/ui/pages/Home.vue                 | 242 +++++++++---------
 app/imports/ui/pages/InviteError.vue          |   2 +-
 app/imports/ui/pages/InviteSuccess.vue        |   2 +-
 app/imports/ui/pages/LaunchCountdown.vue      |   2 +-
 app/imports/ui/pages/Library.vue              |   2 +-
 app/imports/ui/pages/PatreonLevelTooLow.vue   |   2 +-
 app/imports/ui/pages/Register.vue             |   2 +-
 app/imports/ui/pages/SignIn.vue               |   4 +-
 app/imports/ui/pages/Tabletop.vue             |   2 +-
 app/imports/ui/pages/Tabletops.vue            |  14 +-
 .../components/actions/ActionCard.vue         |   4 +-
 .../actions/AttributeConsumedView.vue         |   4 +-
 .../components/actions/ItemConsumedView.vue   |   6 +-
 .../actions/SelectItemToConsume.vue           |   6 +-
 .../components/attributes/AbilityListTile.vue |  18 +-
 .../components/attributes/AttributeCard.vue   |   4 +-
 .../components/attributes/HealthBar.vue       |   2 +-
 .../components/attributes/HealthBarCard.vue   |   2 +-
 .../attributes/HealthBarCardContainer.vue     |   2 +-
 .../components/attributes/HitDiceListTile.vue |  18 +-
 .../components/attributes/ResourceCard.vue    |   4 +-
 .../attributes/SpellSlotListTile.vue          |  26 +-
 .../components/attributes/SplitListLayout.vue |   4 +-
 .../DamageMultiplierCard.vue                  |  50 ++--
 .../components/features/FeatureCard.vue       |   2 +-
 .../components/inventory/ContainerCard.vue    |   4 +-
 .../components/inventory/ItemList.vue         |   2 +-
 .../components/inventory/ItemListTile.vue     |  30 +--
 .../components/persona/NoteCard.vue           |   2 +-
 .../components/skills/SkillListTile.vue       |  18 +-
 .../spells/CastSpellWithSlotDialog.vue        |  20 +-
 .../components/spells/SpellList.vue           |   2 +-
 .../components/spells/SpellListCard.vue       |   2 +-
 .../components/spells/SpellListTile.vue       |  30 +--
 .../ui/properties/forms/ActionForm.vue        |   4 +-
 .../ui/properties/forms/AdjustmentForm.vue    |   4 +-
 .../ui/properties/forms/AttackForm.vue        |   2 +-
 .../forms/AttributeConsumedForm.vue           |   4 +-
 .../ui/properties/forms/AttributeForm.vue     |   8 +-
 .../forms/AttributesConsumedListForm.vue      |   4 +-
 app/imports/ui/properties/forms/BuffForm.vue  |   2 +-
 .../ui/properties/forms/ClassLevelForm.vue    |   4 +-
 .../ui/properties/forms/ConstantForm.vue      |   4 +-
 .../ui/properties/forms/ContainerForm.vue     |   8 +-
 .../ui/properties/forms/DamageForm.vue        |   4 +-
 .../properties/forms/DamageMultiplierForm.vue |   4 +-
 .../ui/properties/forms/EffectForm.vue        |   2 +-
 .../ui/properties/forms/FeatureForm.vue       |   2 +-
 .../ui/properties/forms/FolderForm.vue        |   4 +-
 .../ui/properties/forms/ItemConsumedForm.vue  |   4 +-
 app/imports/ui/properties/forms/ItemForm.vue  |   8 +-
 .../forms/ItemsConsumedListForm.vue           |   4 +-
 app/imports/ui/properties/forms/NoteForm.vue  |   2 +-
 .../ui/properties/forms/ProficiencyForm.vue   |   4 +-
 .../ui/properties/forms/ResourcesForm.vue     |  16 +-
 app/imports/ui/properties/forms/RollForm.vue  |   4 +-
 .../ui/properties/forms/SavingThrowForm.vue   |   2 +-
 app/imports/ui/properties/forms/SkillForm.vue |   6 +-
 .../ui/properties/forms/SlotFillerForm.vue    |   2 +-
 app/imports/ui/properties/forms/SlotForm.vue  |   4 +-
 app/imports/ui/properties/forms/SpellForm.vue |   8 +-
 .../ui/properties/forms/SpellListForm.vue     |   4 +-
 .../ui/properties/forms/ToggleForm.vue        |   2 +-
 .../forms/shared/CalculationErrorList.vue     |   2 +-
 .../properties/forms/shared/FormSection.vue   |   2 +-
 .../properties/forms/shared/FormSections.vue  |   2 +-
 .../forms/shared/ProficiencySelect.vue        |   2 +-
 .../ui/properties/shared/ProficiencyIcon.vue  |   2 +-
 .../ui/properties/shared/PropertyIcon.vue     |   2 +-
 .../ui/properties/shared/PropertySelector.vue |   4 +-
 .../ui/properties/shared/PropertyViewer.vue   |   2 +-
 .../shared/SelectablePropertyDialog.vue       |   2 +-
 .../treeNodeViews/AdjustmentTreeNode.vue      |   4 +-
 .../treeNodeViews/ClassLevelTreeNode.vue      |   4 +-
 .../treeNodeViews/DamageTreeNode.vue          |   4 +-
 .../treeNodeViews/DefaultTreeNode.vue         |   4 +-
 .../treeNodeViews/EffectTreeNode.vue          |   4 +-
 .../properties/treeNodeViews/ItemTreeNode.vue |   4 +-
 .../properties/treeNodeViews/TreeNodeView.vue |   2 +-
 .../ui/properties/viewers/ActionViewer.vue    |   4 +-
 .../properties/viewers/AdjustmentViewer.vue   |  22 +-
 .../ui/properties/viewers/AttackViewer.vue    |   2 +-
 .../ui/properties/viewers/AttributeViewer.vue |   2 +-
 .../ui/properties/viewers/BuffViewer.vue      |   2 +-
 .../properties/viewers/ClassLevelViewer.vue   |   2 +-
 .../ui/properties/viewers/ConstantViewer.vue  |   2 +-
 .../ui/properties/viewers/ContainerViewer.vue |   4 +-
 .../viewers/DamageMultiplierViewer.vue        |   2 +-
 .../ui/properties/viewers/DamageViewer.vue    |   2 +-
 .../ui/properties/viewers/EffectViewer.vue    |  26 +-
 .../ui/properties/viewers/FeatureViewer.vue   |   2 +-
 .../ui/properties/viewers/FolderViewer.vue    |   2 +-
 .../ui/properties/viewers/ItemViewer.vue      |   6 +-
 .../ui/properties/viewers/NoteViewer.vue      |   2 +-
 .../properties/viewers/ProficiencyViewer.vue  |   2 +-
 .../ui/properties/viewers/RollViewer.vue      |   2 +-
 .../properties/viewers/SavingThrowViewer.vue  |   2 +-
 .../ui/properties/viewers/SkillViewer.vue     |   2 +-
 .../properties/viewers/SlotFillerViewer.vue   |   2 +-
 .../ui/properties/viewers/SlotViewer.vue      |   2 +-
 .../ui/properties/viewers/SpellListViewer.vue |   2 +-
 .../ui/properties/viewers/SpellViewer.vue     |   2 +-
 .../ui/properties/viewers/ToggleViewer.vue    |   2 +-
 .../viewers/shared/PropertyDescription.vue    |   2 +-
 .../viewers/shared/PropertyField.vue          |   2 +-
 .../viewers/shared/PropertyName.vue           |   2 +-
 .../viewers/shared/PropertyTags.vue           |   2 +-
 .../viewers/shared/PropertyVariableName.vue   |   2 +-
 app/imports/ui/sharing/ShareDialog.vue        |  54 ++--
 .../ui/tabletop/SelectCreaturesDialog.vue     |   2 +-
 .../ui/tabletop/TabletopActionCards.vue       |   2 +-
 app/imports/ui/tabletop/TabletopComponent.vue |   2 +-
 .../ui/tabletop/TabletopCreatureCard.vue      |   2 +-
 app/imports/ui/tabletop/TabletopLog.vue       |   2 +-
 app/imports/ui/tabletop/TabletopMap.vue       |   2 +-
 app/imports/ui/tabletop/TabletopToolbar.vue   |   2 +-
 app/imports/ui/theme.js                       |  21 --
 app/imports/ui/themes.js                      |  22 ++
 .../ui/user/DeleteUserAccountDialog.vue       |   4 +-
 app/imports/ui/user/InviteDialog.vue          |   2 +-
 app/imports/ui/user/TierTooLowDialog.vue      |   2 +-
 app/imports/ui/user/UsernameDialog.vue        |   2 +-
 app/imports/ui/vueSetup.js                    |  21 +-
 app/package-lock.json                         | 158 +++++++++++-
 app/package.json                              |  16 +-
 204 files changed, 985 insertions(+), 833 deletions(-)
 delete mode 100644 app/imports/ui/theme.js
 create mode 100644 app/imports/ui/themes.js

diff --git a/app/.meteor/packages b/app/.meteor/packages
index 8caba63d..c5561d9d 100644
--- a/app/.meteor/packages
+++ b/app/.meteor/packages
@@ -4,7 +4,6 @@
 # but you can also edit it by hand.
 
 accounts-password@1.7.0
-accounts-ui@1.3.2
 random@1.2.0
 dburles:collection-helpers
 reactive-var@1.0.11
@@ -33,7 +32,6 @@ reactive-dict@1.3.0
 percolate:synced-cron
 ongoworks:speakingurl
 service-configuration@1.0.11
-google-config-ui@1.0.1
 dynamic-import@0.6.0
 ddp-rate-limiter@1.0.9
 rate-limit@1.0.9
@@ -42,7 +40,7 @@ akryum:vue-router2
 static-html
 aldeed:collection2@3.0.0
 aldeed:schema-index
-akryum:vue-component
+zer0th:meteor-vuetify-loader
 accounts-patreon
 bozhao:link-accounts
 peerlibrary:reactive-publish
@@ -51,3 +49,5 @@ simple:rest-method-mixin
 mikowals:batch-insert
 peerlibrary:subscription-data
 seba:minifiers-autoprefixer
+akryum:vue-component
+akryum:vue-sass
diff --git a/app/.meteor/versions b/app/.meteor/versions
index 48847eee..979c561e 100644
--- a/app/.meteor/versions
+++ b/app/.meteor/versions
@@ -3,13 +3,12 @@ accounts-google@1.3.3
 accounts-oauth@1.2.0
 accounts-password@1.7.0
 accounts-patreon@0.1.0
-accounts-ui@1.3.2
-accounts-ui-unstyled@1.4.3
 akryum:npm-check@0.1.2
 akryum:vue-component@0.15.2
 akryum:vue-component-dev-client@0.4.7
 akryum:vue-component-dev-server@0.1.4
 akryum:vue-router2@0.2.3
+akryum:vue-sass@0.1.2
 aldeed:collection2@3.2.1
 aldeed:schema-index@3.0.0
 allow-deny@1.1.0
@@ -18,7 +17,6 @@ babel-compiler@7.6.0
 babel-runtime@1.5.0
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.3.4
 blaze-tools@1.0.10
 boilerplate-generator@1.7.1
 bozhao:link-accounts@2.3.2
@@ -48,7 +46,6 @@ email@2.0.0
 es5-shim@4.8.0
 fetch@0.1.1
 geojson-utils@1.0.10
-google-config-ui@1.0.1
 google-oauth@1.3.0
 hot-code-push@1.0.4
 html-tools@1.0.11
@@ -58,7 +55,6 @@ id-map@1.1.0
 inter-process-messaging@0.1.1
 lai:collection-extensions@0.2.1_1
 launch-screen@1.2.0
-less@3.0.1
 livedata@1.0.18
 localstorage@1.2.0
 logging@1.2.0
@@ -84,7 +80,6 @@ npm-bcrypt@0.9.3
 npm-mongo@3.8.1
 oauth@1.3.2
 oauth2@1.3.0
-observe-sequence@1.0.16
 ongoworks:speakingurl@9.0.0
 ordered-dict@1.1.0
 patreon-oauth@0.1.0
@@ -118,15 +113,11 @@ simple:json-routes@2.1.0
 simple:rest@1.1.1
 simple:rest-method-mixin@1.0.1
 socket-stream-client@0.3.1
-spacebars@1.0.15
 spacebars-compiler@1.1.3
 srp@1.1.0
 standard-minifier-js@2.6.0
 static-html@1.2.2
 templates:array@1.0.3
-templating@1.3.2
-templating-compiler@1.3.3
-templating-runtime@1.3.2
 templating-tools@1.1.2
 tmeasday:check-npm-versions@0.3.2
 tracker@1.2.0
@@ -134,3 +125,4 @@ underscore@1.0.10
 url@1.3.1
 webapp@1.10.0
 webapp-hashing@1.1.0
+zer0th:meteor-vuetify-loader@0.1.30
diff --git a/app/imports/ui/components/CoinValue.vue b/app/imports/ui/components/CoinValue.vue
index e97a9b99..b13aa9ef 100644
--- a/app/imports/ui/components/CoinValue.vue
+++ b/app/imports/ui/components/CoinValue.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import valueToCoins from '/imports/ui/utility/valueToCoins.js';
 
 export default {
diff --git a/app/imports/ui/components/ColorPicker.vue b/app/imports/ui/components/ColorPicker.vue
index 01fa0fbe..0ac1c056 100644
--- a/app/imports/ui/components/ColorPicker.vue
+++ b/app/imports/ui/components/ColorPicker.vue
@@ -89,7 +89,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
   import isDarkColor from '/imports/ui/utility/isDarkColor.js';
   import vuetifyColors from 'vuetify/es5/util/colors';
   import { kebabToCamelCase, camelToKebabCase } from '/imports/ui/utility/swapCase.js';
diff --git a/app/imports/ui/components/ColumnLayout.vue b/app/imports/ui/components/ColumnLayout.vue
index 0be7cb75..42e1a9a3 100644
--- a/app/imports/ui/components/ColumnLayout.vue
+++ b/app/imports/ui/components/ColumnLayout.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: {
     wideColumns: Boolean,
diff --git a/app/imports/ui/components/IncrementButton.vue b/app/imports/ui/components/IncrementButton.vue
index c231d136..3189010c 100644
--- a/app/imports/ui/components/IncrementButton.vue
+++ b/app/imports/ui/components/IncrementButton.vue
@@ -30,7 +30,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
 import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 
 export default {
diff --git a/app/imports/ui/components/IncrementMenu.vue b/app/imports/ui/components/IncrementMenu.vue
index 21fcbbc8..e4b92ac0 100644
--- a/app/imports/ui/components/IncrementMenu.vue
+++ b/app/imports/ui/components/IncrementMenu.vue
@@ -65,7 +65,7 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
 	export default {
     inject: {
       context: { default: {} }
diff --git a/app/imports/ui/components/LabeledFab.vue b/app/imports/ui/components/LabeledFab.vue
index 10d94217..28692998 100644
--- a/app/imports/ui/components/LabeledFab.vue
+++ b/app/imports/ui/components/LabeledFab.vue
@@ -14,7 +14,7 @@
   </v-btn>
 </template>
 
-<script>
+<script lang="js">
   /*
    * Because speed dials only work well with v-btn's as children, this hacky
    * component creates a v-btn with a label.
diff --git a/app/imports/ui/components/MarkdownText.vue b/app/imports/ui/components/MarkdownText.vue
index cb3449d5..8e89df50 100644
--- a/app/imports/ui/components/MarkdownText.vue
+++ b/app/imports/ui/components/MarkdownText.vue
@@ -6,7 +6,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 	import marked from 'marked';
 
 	export default {
diff --git a/app/imports/ui/components/ToolbarCard.vue b/app/imports/ui/components/ToolbarCard.vue
index b22862a0..29e61ac5 100644
--- a/app/imports/ui/components/ToolbarCard.vue
+++ b/app/imports/ui/components/ToolbarCard.vue
@@ -23,7 +23,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 	export default {
 		props: {
diff --git a/app/imports/ui/components/TreeDetailLayout.vue b/app/imports/ui/components/TreeDetailLayout.vue
index 624b5c72..0bba4362 100644
--- a/app/imports/ui/components/TreeDetailLayout.vue
+++ b/app/imports/ui/components/TreeDetailLayout.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div
-    class="layout row"
+    class="layout"
     style="height: 100%;"
   >
     <div
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   computed:{
     computedTreeStyle(){
diff --git a/app/imports/ui/components/computation/EmbedInlineComputations.vue b/app/imports/ui/components/computation/EmbedInlineComputations.vue
index 01fa759f..befe1c41 100644
--- a/app/imports/ui/components/computation/EmbedInlineComputations.vue
+++ b/app/imports/ui/components/computation/EmbedInlineComputations.vue
@@ -4,7 +4,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 import embedInlineCalculations from '/imports/api/creature/computation/afterComputation/embedInlineCalculations.js';
 
diff --git a/app/imports/ui/components/global/DatePicker.vue b/app/imports/ui/components/global/DatePicker.vue
index 9aa2ff74..f3e5ad48 100644
--- a/app/imports/ui/components/global/DatePicker.vue
+++ b/app/imports/ui/components/global/DatePicker.vue
@@ -29,7 +29,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
 import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 import { format } from 'date-fns';
 
diff --git a/app/imports/ui/components/global/IconPicker.vue b/app/imports/ui/components/global/IconPicker.vue
index cb3e6b78..1db684b9 100644
--- a/app/imports/ui/components/global/IconPicker.vue
+++ b/app/imports/ui/components/global/IconPicker.vue
@@ -8,7 +8,7 @@
     style="overflow-y: auto;"
   >
     <template #activator="{ on }">
-      <div class="layout row align-center">
+      <div class="layout align-center">
         <v-label>{{ label }}</v-label>
         <v-btn
           :loading="loading"
@@ -32,7 +32,7 @@
     </template>
     <v-card>
       <v-card-text>
-        <div class="layout row">
+        <div class="layout">
           <text-field
             ref="iconSearchField"
             label="Search icons"
@@ -78,7 +78,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
 import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
 import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 import { findIcons } from '/imports/api/icons/Icons.js';
diff --git a/app/imports/ui/components/global/SmartCheckbox.vue b/app/imports/ui/components/global/SmartCheckbox.vue
index 294ccdd0..adc12c91 100644
--- a/app/imports/ui/components/global/SmartCheckbox.vue
+++ b/app/imports/ui/components/global/SmartCheckbox.vue
@@ -9,7 +9,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
   import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
   export default {
diff --git a/app/imports/ui/components/global/SmartCombobox.vue b/app/imports/ui/components/global/SmartCombobox.vue
index b950f308..e61ffe9e 100644
--- a/app/imports/ui/components/global/SmartCombobox.vue
+++ b/app/imports/ui/components/global/SmartCombobox.vue
@@ -19,7 +19,7 @@
   </v-combobox>
 </template>
 
-<script>
+<script lang="js">
 	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
 	export default {
diff --git a/app/imports/ui/components/global/SmartSelect.vue b/app/imports/ui/components/global/SmartSelect.vue
index 81d23b65..34a266ec 100644
--- a/app/imports/ui/components/global/SmartSelect.vue
+++ b/app/imports/ui/components/global/SmartSelect.vue
@@ -18,7 +18,7 @@
   </v-select>
 </template>
 
-<script>
+<script lang="js">
 	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
 	export default {
diff --git a/app/imports/ui/components/global/SmartSwitch.vue b/app/imports/ui/components/global/SmartSwitch.vue
index 1916b48f..716e0998 100644
--- a/app/imports/ui/components/global/SmartSwitch.vue
+++ b/app/imports/ui/components/global/SmartSwitch.vue
@@ -9,7 +9,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
   import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
   export default {
diff --git a/app/imports/ui/components/global/SvgIcon.vue b/app/imports/ui/components/global/SvgIcon.vue
index 2c953ad3..e3b5c887 100644
--- a/app/imports/ui/components/global/SvgIcon.vue
+++ b/app/imports/ui/components/global/SvgIcon.vue
@@ -19,7 +19,7 @@
   </i>
 </template>
 
-<script>
+<script lang="js">
 const SIZE_MAP = {
   xSmall: '12px',
   small: '16px',
diff --git a/app/imports/ui/components/global/TextArea.vue b/app/imports/ui/components/global/TextArea.vue
index c1572553..c68b8757 100644
--- a/app/imports/ui/components/global/TextArea.vue
+++ b/app/imports/ui/components/global/TextArea.vue
@@ -13,7 +13,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
 	export default {
diff --git a/app/imports/ui/components/global/TextField.vue b/app/imports/ui/components/global/TextField.vue
index fcbe9fad..61547a10 100644
--- a/app/imports/ui/components/global/TextField.vue
+++ b/app/imports/ui/components/global/TextField.vue
@@ -14,7 +14,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
   import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
   export default {
diff --git a/app/imports/ui/components/propertyToolbar.vue b/app/imports/ui/components/propertyToolbar.vue
index 73ffdef4..48594b68 100644
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/app/imports/ui/components/propertyToolbar.vue
@@ -47,45 +47,45 @@
             </v-btn>
           </template>
           <v-list>
-            <v-list-tile
+            <v-list-item
               v-if="$listeners && $listeners.duplicate"
               @click="$emit('duplicate')"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   Duplicate
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>file_copy</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item
               v-if="$listeners && $listeners.move"
               @click="$emit('move')"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   Move
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>send</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item
               v-if="$listeners && $listeners.remove"
               @click="$emit('remove')"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   Delete
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>delete</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
+              </v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-menu>
       </v-layout>
@@ -118,7 +118,7 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="js">
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
diff --git a/app/imports/ui/components/rolls/Check.vue b/app/imports/ui/components/rolls/Check.vue
index afb2aa7b..e5f14c7a 100644
--- a/app/imports/ui/components/rolls/Check.vue
+++ b/app/imports/ui/components/rolls/Check.vue
@@ -2,15 +2,15 @@
   <v-card>
     <template v-if="!result">
       <v-btn-toggle v-model="advantage">
-        <v-btn flat>
+        <v-btn text>
           Advantage
         </v-btn>
-        <v-btn flat>
+        <v-btn text>
           Disadvantage
         </v-btn>
       </v-btn-toggle>
       <v-card-text>
-        <div class="layout row justify-center align-center">
+        <div class="layout justify-center align-center">
           <v-btn
             large
             fab
@@ -47,7 +47,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
   props: {
diff --git a/app/imports/ui/components/snackbars/Snackbars.vue b/app/imports/ui/components/snackbars/Snackbars.vue
index b6c57603..a42d6fe1 100644
--- a/app/imports/ui/components/snackbars/Snackbars.vue
+++ b/app/imports/ui/components/snackbars/Snackbars.vue
@@ -28,7 +28,7 @@
   </v-snackbar>
 </template>
 
-<script>
+<script lang="js">
 export default {
   computed: {
     snackbar(){
diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index 967e5a12..77d12226 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -5,7 +5,7 @@
     :data-id="`tree-node-${node._id}`"
   >
     <div
-      class="layout row align-center justify-start tree-node-title"
+      class="layout align-center justify-start tree-node-title"
       style="cursor: pointer;"
       :class="selected && 'primary--text'"
       @click.stop="$emit('selected', node._id)"
@@ -22,7 +22,7 @@
         </v-icon>
       </v-btn>
       <div
-        class="layout row align-center justify-start pr-1"
+        class="layout align-center justify-start pr-1"
         style="flex-grow: 0;"
       >
         <v-icon
@@ -70,7 +70,7 @@
   </v-sheet>
 </template>
 
-<script>
+<script lang="js">
 	/**
 	* TreeNode's are list item views of character properties. Every property which
 	* can belong to the character is shown in the tree view of the character
diff --git a/app/imports/ui/components/tree/TreeNodeList.vue b/app/imports/ui/components/tree/TreeNodeList.vue
index fcd6e50b..80728210 100644
--- a/app/imports/ui/components/tree/TreeNodeList.vue
+++ b/app/imports/ui/components/tree/TreeNodeList.vue
@@ -30,7 +30,7 @@
   </draggable>
 </template>
 
-<script>
+<script lang="js">
 	import draggable from 'vuedraggable';
 	import TreeNode from '/imports/ui/components/tree/TreeNode.vue';
 	import { isParentAllowed } from '/imports/api/parenting/parenting.js';
diff --git a/app/imports/ui/creature/CreatureForm.vue b/app/imports/ui/creature/CreatureForm.vue
index 303d8a4d..5d70d1f3 100644
--- a/app/imports/ui/creature/CreatureForm.vue
+++ b/app/imports/ui/creature/CreatureForm.vue
@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
 
 export default {
diff --git a/app/imports/ui/creature/CreatureFormDialog.vue b/app/imports/ui/creature/CreatureFormDialog.vue
index 846a30cb..5367b741 100644
--- a/app/imports/ui/creature/CreatureFormDialog.vue
+++ b/app/imports/ui/creature/CreatureFormDialog.vue
@@ -28,7 +28,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
diff --git a/app/imports/ui/creature/CreatureListTile.vue b/app/imports/ui/creature/CreatureListTile.vue
index 9ae0d322..3b12a056 100644
--- a/app/imports/ui/creature/CreatureListTile.vue
+++ b/app/imports/ui/creature/CreatureListTile.vue
@@ -2,8 +2,8 @@
   lang="html"
   functional
 >
-  <v-list-tile v-bind="$attrs">
-    <v-list-tile-avatar :color="model.color || 'grey'">
+  <v-list-item v-bind="$attrs">
+    <v-list-item-avatar :color="model.color || 'grey'">
       <img
         v-if="model.avatarPicture"
         :src="model.avatarPicture"
@@ -12,22 +12,22 @@
       <template v-else>
         {{ model.initial }}
       </template>
-    </v-list-tile-avatar>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-avatar>
+    <v-list-item-content>
+      <v-list-item-title>
         {{ model.name }}
-      </v-list-tile-title>
-      <v-list-tile-sub-title>
+      </v-list-item-title>
+      <v-list-item-subtitle>
         {{ model.alignment }} {{ model.gender }} {{ model.race }}
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-    <v-list-tile-action v-if="selection">
+      </v-list-item-subtitle>
+    </v-list-item-content>
+    <v-list-item-action v-if="selection">
       <v-checkbox
         :input-value="selected && selected.has(model._id)"
         @change="$emit('select')"
       />
-    </v-list-tile-action>
-  </v-list-tile>
+    </v-list-item-action>
+  </v-list-item>
 </template>
 
 <script type="text/javascript">
diff --git a/app/imports/ui/creature/RestButton.vue b/app/imports/ui/creature/RestButton.vue
index 8b74abf2..683d08e0 100644
--- a/app/imports/ui/creature/RestButton.vue
+++ b/app/imports/ui/creature/RestButton.vue
@@ -13,7 +13,7 @@
   </v-btn>
 </template>
 
-<script>
+<script lang="js">
 import restCreature from '/imports/api/creature/restCreature.js';
 
 export default {
diff --git a/app/imports/ui/creature/character/CharacterCreationDialog.vue b/app/imports/ui/creature/character/CharacterCreationDialog.vue
index 2d9e7df1..49eb1353 100644
--- a/app/imports/ui/creature/character/CharacterCreationDialog.vue
+++ b/app/imports/ui/creature/character/CharacterCreationDialog.vue
@@ -262,7 +262,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
   import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	const getCost = function(score){
 		const costs = {
diff --git a/app/imports/ui/creature/character/CharacterDeleteDialog.vue b/app/imports/ui/creature/character/CharacterDeleteDialog.vue
index b91b0095..8cde88cb 100644
--- a/app/imports/ui/creature/character/CharacterDeleteDialog.vue
+++ b/app/imports/ui/creature/character/CharacterDeleteDialog.vue
@@ -30,7 +30,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import removeCreature from '/imports/api/creature/removeCreature.js';
diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue
index 746e53c1..be587041 100644
--- a/app/imports/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/ui/creature/character/CharacterSheet.vue
@@ -65,7 +65,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   //TODO add a "no character found" screen if shown on a false address
   // or on a character the user does not have permission to view
 	import Creatures from '/imports/api/creature/Creatures.js';
diff --git a/app/imports/ui/creature/character/CharacterSheetFab.vue b/app/imports/ui/creature/character/CharacterSheetFab.vue
index 67b05d67..cc4c5734 100644
--- a/app/imports/ui/creature/character/CharacterSheetFab.vue
+++ b/app/imports/ui/creature/character/CharacterSheetFab.vue
@@ -30,7 +30,7 @@
   </v-speed-dial>
 </template>
 
-<script>
+<script lang="js">
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
   import { setDocToLastOrder } from '/imports/api/parenting/order.js';
   import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js';
diff --git a/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue b/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue
index 7db4b1ca..bb2056e4 100644
--- a/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue
+++ b/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue
@@ -9,7 +9,7 @@
   </v-navigation-drawer>
 </template>
 
-<script>
+<script lang="js">
 import CharacterLog from '/imports/ui/log/CharacterLog.vue';
 export default {
   components: {
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index f5b21647..c8920178 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
@@ -40,28 +40,28 @@
               </v-btn>
             </template>
             <v-list v-if="editPermission">
-              <v-list-tile @click="deleteCharacter">
-                <v-list-tile-title>
+              <v-list-item @click="deleteCharacter">
+                <v-list-item-title>
                   <v-icon>delete</v-icon> Delete
-                </v-list-tile-title>
-              </v-list-tile>
-              <v-list-tile @click="showCharacterForm">
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="showCharacterForm">
+                <v-list-item-title>
                   <v-icon>create</v-icon> Edit details
-                </v-list-tile-title>
-              </v-list-tile>
-              <v-list-tile @click="showShareDialog">
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="showShareDialog">
+                <v-list-item-title>
                   <v-icon>share</v-icon> Sharing
-                </v-list-tile-title>
-              </v-list-tile>
+                </v-list-item-title>
+              </v-list-item>
             </v-list>
             <v-list v-else>
-              <v-list-tile @click="unshareWithMe">
-                <v-list-tile-title>
+              <v-list-item @click="unshareWithMe">
+                <v-list-item-title>
                   <v-icon>delete</v-icon> Unshare with me
-                </v-list-tile-title>
-              </v-list-tile>
+                </v-list-item-title>
+              </v-list-item>
             </v-list>
           </v-menu>
           <v-toolbar-side-icon @click="toggleRightDrawer" />
@@ -74,7 +74,7 @@
     >
       <div
         :key="$route.meta.title"
-        class="layout row"
+        class="layout"
       >
         <v-tabs
           v-if="creature"
@@ -118,11 +118,10 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import removeCreature from '/imports/api/creature/removeCreature.js';
 import { mapMutations } from 'vuex';
-import { theme } from '/imports/ui/theme.js';
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
@@ -135,9 +134,6 @@ export default {
   components: {
     CharacterSheetFab,
   },
-  data(){return {
-    theme,
-  }},
   computed: {
     creatureId(){
       return this.$route.params.id;
diff --git a/app/imports/ui/creature/character/MiniCharacterSheet.vue b/app/imports/ui/creature/character/MiniCharacterSheet.vue
index 19f6b871..ed3509f1 100644
--- a/app/imports/ui/creature/character/MiniCharacterSheet.vue
+++ b/app/imports/ui/creature/character/MiniCharacterSheet.vue
@@ -2,7 +2,7 @@
   <div class="mini-character-sheet" />
 </template>
 
-<script>
+<script lang="js">
 export default {
 }
 </script>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue b/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
index 781d4541..5543438a 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue
@@ -42,17 +42,17 @@
             Level {{ creature.variables.level.value }}
           </v-card-title>
           <v-list two-line>
-            <v-list-tile>
-              <v-list-tile-content>
-                <v-list-tile-title
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
                   v-if="
                     creature.variables.milestoneLevels &&
                       creature.variables.milestoneLevels.value
                   "
                 >
                   {{ creature.variables.milestoneLevels.value }} Milestone levels
-                </v-list-tile-title>
-                <v-list-tile-title
+                </v-list-item-title>
+                <v-list-item-title
                   v-if="
                     !(creature.variables.milestoneLevels &&
                       creature.variables.milestoneLevels.value) ||
@@ -65,9 +65,9 @@
                       creature.variables.xp.value ||
                       0
                   }} XP
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-btn
                   flat
                   icon
@@ -76,8 +76,8 @@
                 >
                   <v-icon>info</v-icon>
                 </v-btn>
-              </v-list-tile-action>
-              <v-list-tile-action>
+              </v-list-item-action>
+              <v-list-item-action>
                 <v-btn
                   flat
                   icon
@@ -86,21 +86,21 @@
                 >
                   <v-icon>add</v-icon>
                 </v-btn>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item
               v-for="classLevel in highestClassLevels"
               :key="classLevel._id"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   {{ classLevel.name }}
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-avatar>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-avatar>
                 {{ classLevel.level }}
-              </v-list-tile-avatar>
-            </v-list-tile>
+              </v-list-item-avatar>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -116,7 +116,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
diff --git a/app/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue b/app/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue
index 18fb4dbf..b6a2bb19 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 	import FeatureCard from '/imports/ui/properties/components/features/FeatureCard.vue';
diff --git a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
index b16cf9c5..5e8104a0 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
@@ -4,53 +4,53 @@
       <div>
         <v-card>
           <v-list>
-            <v-list-tile>
-              <v-list-tile-avatar>
+            <v-list-item>
+              <v-list-item-avatar>
                 <v-icon>$vuetify.icons.injustice</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-                <v-list-tile-title>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>
                   Weight Carried
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-list-item-title>
                   {{ creature.denormalizedStats.weightCarried || 0 }} lb
-                </v-list-tile-title>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile>
-              <v-list-tile-avatar>
+                </v-list-item-title>
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-avatar>
                 <v-icon>$vuetify.icons.cash</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-                <v-list-tile-title>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>
                   Net worth
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-list-item-title>
                   <coin-value
                     :value="creature.denormalizedStats.valueTotal || 0"
                   />
-                </v-list-tile-title>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile v-if="creature.denormalizedStats.itemsAttuned">
-              <v-list-tile-avatar>
+                </v-list-item-title>
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item v-if="creature.denormalizedStats.itemsAttuned">
+              <v-list-item-avatar>
                 <v-icon>$vuetify.icons.spell</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-                <v-list-tile-title>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>
                   Items attuned
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-list-item-title>
                   {{ creature.denormalizedStats.itemsAttuned }}
-                </v-list-tile-title>
-              </v-list-tile-action>
-            </v-list-tile>
+                </v-list-item-title>
+              </v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -97,7 +97,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import Creatures from '/imports/api/creature/Creatures.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
diff --git a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
index a1264a59..f0065503 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import SpellListCard from '/imports/ui/properties/components/spells/SpellListCard.vue';
diff --git a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
index 9ab03c1c..aff95761 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue
@@ -27,18 +27,18 @@
         <v-card>
           <v-list>
             <v-subheader>Buffs and conditions</v-subheader>
-            <v-list-tile
+            <v-list-item
               v-for="buff in appliedBuffs"
               :key="buff._id"
               :data-id="buff._id"
               @click="clickProperty({_id: buff._id})"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   {{ buff.name }}
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-btn
                   icon
                   flat
@@ -46,8 +46,8 @@
                 >
                   <v-icon>delete</v-icon>
                 </v-btn>
-              </v-list-tile-action>
-            </v-list-tile>
+              </v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -318,7 +318,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import Creatures from '/imports/api/creature/Creatures.js';
 	import softRemoveProperty from '/imports/api/creature/creatureProperties/methods/softRemoveProperty.js';
   import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index b8388c2e..08c4ebfd 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -89,7 +89,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
   import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
   import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
index 6863a1a5..87cbd9fd 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
@@ -11,7 +11,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 	import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 	import { nodesToTree } from '/imports/api/parenting/parenting.js'
 	import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyCreationDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyCreationDialog.vue
index 031550d1..35932cc9 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyCreationDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyCreationDialog.vue
@@ -11,7 +11,7 @@
   </selectable-property-dialog>
 </template>
 
-<script>
+<script lang="js">
 import SelectablePropertyDialog from '/imports/ui/properties/shared/SelectablePropertyDialog.vue';
 import CreaturePropertyInsertForm from '/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index 2e229001..d6f15ad1 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -46,7 +46,7 @@
     <div
       v-if="!embedded"
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
         flat
@@ -58,7 +58,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 import pushToProperty from '/imports/api/creature/creatureProperties/methods/pushToProperty.js';
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
index e30221e7..18fb34bf 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
@@ -22,7 +22,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
 	export default {
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
index 872a0ef4..15a103de 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
@@ -25,7 +25,7 @@
     />
     <div
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
         flat
@@ -38,7 +38,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
diff --git a/app/imports/ui/creature/experiences/ExperienceForm.vue b/app/imports/ui/creature/experiences/ExperienceForm.vue
index 56148440..5b4d92d6 100644
--- a/app/imports/ui/creature/experiences/ExperienceForm.vue
+++ b/app/imports/ui/creature/experiences/ExperienceForm.vue
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
diff --git a/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue b/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue
index f91e6706..57b06436 100644
--- a/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue
+++ b/app/imports/ui/creature/experiences/ExperienceInsertDialog.vue
@@ -13,7 +13,7 @@
     />
     <div
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
         flat
@@ -26,7 +26,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import ExperienceForm from '/imports/ui/creature/experiences/ExperienceForm.vue';
 import { ExperienceSchema, insertExperience } from '/imports/api/creature/experience/Experiences.js';
diff --git a/app/imports/ui/creature/experiences/ExperienceListDialog.vue b/app/imports/ui/creature/experiences/ExperienceListDialog.vue
index 7826f84b..f8239b50 100644
--- a/app/imports/ui/creature/experiences/ExperienceListDialog.vue
+++ b/app/imports/ui/creature/experiences/ExperienceListDialog.vue
@@ -46,32 +46,32 @@
         group
         mode="out"
       >
-        <v-list-tile
+        <v-list-item
           v-for="experience in experiences"
           :key="experience._id"
           :data-id="experience._id"
         >
-          <v-list-tile-action class="mr-3">
-            <v-list-tile-action-text>
+          <v-list-item-action class="mr-3">
+            <v-list-item-action-text>
               {{ formatDate(experience.date) }}
-            </v-list-tile-action-text>
-          </v-list-tile-action>
-          <v-list-tile-content>
+            </v-list-item-action-text>
+          </v-list-item-action>
+          <v-list-item-content>
             <template v-if="experience.name">
-              <v-list-tile-title>
+              <v-list-item-title>
                 {{ experience.name }}
-              </v-list-tile-title>
-              <v-list-tile-sub-title>
+              </v-list-item-title>
+              <v-list-item-subtitle>
                 {{ xpText(experience) }}
-              </v-list-tile-sub-title>
+              </v-list-item-subtitle>
             </template>
             <template v-else>
-              <v-list-tile-title>
+              <v-list-item-title>
                 {{ xpText(experience) }}
-              </v-list-tile-title>
+              </v-list-item-title>
             </template>
-          </v-list-tile-content>
-          <v-list-tile-action>
+          </v-list-item-content>
+          <v-list-item-action>
             <v-btn
               icon
               flat
@@ -80,14 +80,14 @@
             >
               <v-icon>delete</v-icon>
             </v-btn>
-          </v-list-tile-action>
-        </v-list-tile>
+          </v-list-item-action>
+        </v-list-item>
       </v-slide-x-transition>
     </v-list>
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import { format } from 'date-fns';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Experiences, { removeExperience, recomputeExperiences } from '/imports/api/creature/experience/Experiences.js';
diff --git a/app/imports/ui/creature/slots/SlotDetailsDialog.vue b/app/imports/ui/creature/slots/SlotDetailsDialog.vue
index 64da098a..a363ed40 100644
--- a/app/imports/ui/creature/slots/SlotDetailsDialog.vue
+++ b/app/imports/ui/creature/slots/SlotDetailsDialog.vue
@@ -10,7 +10,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Slots from '/imports/ui/creature/slots/Slots.vue'
diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index 807f8938..22cb1e8a 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/app/imports/ui/creature/slots/SlotFillDialog.vue
@@ -24,7 +24,7 @@
       <v-fade-transition mode="out-in">
         <div v-if="libraryNodes && libraryNodes.length">
           <section
-            class="layout row wrap justify-between"
+            class="layout wrap justify-between"
           >
             <v-card
               v-for="node in libraryNodes"
@@ -63,7 +63,7 @@
               </v-card-text>
             </v-card>
           </section>
-          <div class="layout row justify-center align-stretch">
+          <div class="layout justify-center align-stretch">
             <v-btn
               v-if="currentLimit < countAll"
               :loading="!$subReady.slotFillers"
@@ -137,7 +137,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
diff --git a/app/imports/ui/creature/slots/Slots.vue b/app/imports/ui/creature/slots/Slots.vue
index f8359868..9de57258 100644
--- a/app/imports/ui/creature/slots/Slots.vue
+++ b/app/imports/ui/creature/slots/Slots.vue
@@ -5,7 +5,7 @@
       :key="slot._id"
       class="slot"
     >
-      <h3 class="layout row align-center">
+      <h3 class="layout align-center">
         {{ slot.name }}
         <v-spacer />
         <span v-if="slot.quantityExpectedResult > 1">
@@ -13,19 +13,19 @@
         </span>
       </h3>
       <v-list v-if="slot.children.length">
-        <v-list-tile
+        <v-list-item
           v-for="child in slot.children"
           :key="child._id"
           :data-id="`slot-child-${child._id}`"
           @click="clickSlotChild(child)"
         >
-          <v-list-tile-content>
+          <v-list-item-content>
             <tree-node-view
               class="slotChild"
               :model="child"
             />
-          </v-list-tile-content>
-          <v-list-tile-action>
+          </v-list-item-content>
+          <v-list-item-action>
             <v-btn
               icon
               flat
@@ -34,8 +34,8 @@
             >
               <v-icon>delete</v-icon>
             </v-btn>
-          </v-list-tile-action>
-        </v-list-tile>
+          </v-list-item-action>
+        </v-list-item>
       </v-list>
       <v-btn
         v-if="!slot.quantityExpectedResult || slot.spaceLeft"
@@ -51,7 +51,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 import softRemoveProperty from '/imports/api/creature/creatureProperties/methods/softRemoveProperty.js';
diff --git a/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue b/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
index 05a361ee..3e99a7a3 100644
--- a/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
+++ b/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
@@ -11,7 +11,7 @@
         v-if="name"
         v-model="inputName"
       />
-      <div class="layout row justify-center">
+      <div class="layout justify-center">
         <v-btn
           v-show="nameMatch"
           class="primary"
@@ -32,7 +32,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 export default {
diff --git a/app/imports/ui/dialogStack/DialogBase.vue b/app/imports/ui/dialogStack/DialogBase.vue
index a4b23aa7..c217c874 100644
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/app/imports/ui/dialogStack/DialogBase.vue
@@ -44,7 +44,7 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
   import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 	export default {
diff --git a/app/imports/ui/dialogStack/DialogStack.vue b/app/imports/ui/dialogStack/DialogStack.vue
index 0a807e6b..4284f72e 100644
--- a/app/imports/ui/dialogStack/DialogStack.vue
+++ b/app/imports/ui/dialogStack/DialogStack.vue
@@ -41,16 +41,20 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
   import '/imports/ui/dialogStack/dialogStackWindowEvents.js';
   import mockElement from '/imports/ui/dialogStack/mockElement.js';
   import DialogComponentIndex from '/imports/ui/dialogStack/DialogComponentIndex.js';
+  import { VLayout } from 'vuetify/lib'
 
   const OFFSET = 16;
   const MOCK_DURATION = 400; // Keep in sync with css transition of .dialog
 
   export default {
-    components: DialogComponentIndex,
+    components: {
+      VLayout,
+      ...DialogComponentIndex,
+    },
     computed: {
       dialogs(){
         return this.$store.state.dialogStack.dialogs;
diff --git a/app/imports/ui/documentation/FunctionReference.vue b/app/imports/ui/documentation/FunctionReference.vue
index 202fa60b..078f526f 100644
--- a/app/imports/ui/documentation/FunctionReference.vue
+++ b/app/imports/ui/documentation/FunctionReference.vue
@@ -29,7 +29,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import functions from '/imports/parser/functions.js';
 export default {
   computed:{
diff --git a/app/imports/ui/icons/IconAdmin.vue b/app/imports/ui/icons/IconAdmin.vue
index fa605ae1..3219be83 100644
--- a/app/imports/ui/icons/IconAdmin.vue
+++ b/app/imports/ui/icons/IconAdmin.vue
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import {importIcons, importIconMetadata} from '/imports/ui/icons/importIcons.js';
   import IconPicker from '/imports/ui/components/global/IconPicker.vue';
   import UploadButton from 'vuetify-upload-button';
diff --git a/app/imports/ui/icons/SvgIconByName.vue b/app/imports/ui/icons/SvgIconByName.vue
index c9ec0aba..edbf1457 100644
--- a/app/imports/ui/icons/SvgIconByName.vue
+++ b/app/imports/ui/icons/SvgIconByName.vue
@@ -4,7 +4,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import SvgIcon from '/imports/ui/components/global/SvgIcon.vue'
 import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 
diff --git a/app/imports/ui/layouts/AppLayout.vue b/app/imports/ui/layouts/AppLayout.vue
index 9eb13fba..aaf7b1bc 100644
--- a/app/imports/ui/layouts/AppLayout.vue
+++ b/app/imports/ui/layouts/AppLayout.vue
@@ -12,7 +12,7 @@
     <router-view
       name="toolbar"
     />
-    <v-toolbar
+    <v-app-bar
       v-if="!$route.matched[0] || !$route.matched[0].components.toolbar"
       app
       color="secondary"
@@ -20,7 +20,7 @@
       tabs
       dense
     >
-      <v-toolbar-side-icon @click="toggleDrawer" />
+      <v-app-bar-nav-icon @click="toggleDrawer" />
       <v-toolbar-title>
         <v-fade-transition
           mode="out-in"
@@ -53,14 +53,14 @@
           />
         </div>
       </v-fade-transition>
-    </v-toolbar>
-    <v-content>
+    </v-app-bar>
+    <v-main>
       <v-fade-transition
         mode="out-in"
       >
         <router-view />
       </v-fade-transition>
-    </v-content>
+    </v-main>
     <router-view
       name="rightDrawer"
     />
@@ -69,11 +69,10 @@
   </v-app>
 </template>
 
-<script>
+<script lang="js">
 	import '/imports/api/users/Users.js';
   import Sidebar from '/imports/ui/layouts/Sidebar.vue';
   import DialogStack from '/imports/ui/dialogStack/DialogStack.vue';
-	import { theme, darkTheme } from '/imports/ui/theme.js';
   import { mapMutations } from 'vuex';
   import Snackbars from '/imports/ui/components/snackbars/Snackbars.vue';
 
@@ -107,10 +106,7 @@
 			darkMode: {
 				immediate: true,
 				handler(newDarkModeValue){
-					let newTheme = newDarkModeValue ? darkTheme : theme;
-					for (let key in newTheme){
-						this.$vuetify.theme[key] = newTheme[key];
-					}
+          this.$vuetify.theme.dark = newDarkModeValue;
 				},
 			},
       '$route' (to) {
diff --git a/app/imports/ui/layouts/Sidebar.vue b/app/imports/ui/layouts/Sidebar.vue
index ba060f9e..aa7a9671 100644
--- a/app/imports/ui/layouts/Sidebar.vue
+++ b/app/imports/ui/layouts/Sidebar.vue
@@ -2,7 +2,6 @@
   <div class="sidebar">
     <v-layout
       v-if="!signedIn"
-      row
       justify-center
     >
       <v-btn
@@ -13,51 +12,54 @@
       </v-btn>
     </v-layout>
     <v-list>
-      <v-list-tile v-if="signedIn">
-        <v-list-tile-content>
-          <v-list-tile-title>
+      <v-list-item v-if="signedIn">
+        <v-list-item-content>
+          <v-list-item-title>
             {{ userName }}
-          </v-list-tile-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action>
           <v-tooltip bottom>
-            <v-btn
-              slot="activator"
-              flat
-              icon
-              to="/account"
+            <template
+              #activator="{ on }"
             >
-              <v-icon>settings</v-icon>
-            </v-btn>
+              <v-btn
+                icon
+                to="/account"
+                v-on="on"
+              >
+                <v-icon>settings</v-icon>
+              </v-btn>
+            </template>
             <span>Account Settings</span>
           </v-tooltip>
-        </v-list-tile-action>
-      </v-list-tile>
+        </v-list-item-action>
+      </v-list-item>
 
-      <v-list-tile
+      <v-list-item
         v-for="(link, i) in links"
         :key="i"
         :to="link.to"
         :href="link.href"
       >
-        <v-list-tile-action>
+        <v-list-item-action>
           <v-icon>{{ link.icon }}</v-icon>
-        </v-list-tile-action>
-        <v-list-tile-title>
+        </v-list-item-action>
+        <v-list-item-title>
           {{ link.title }}
-        </v-list-tile-title>
-      </v-list-tile>
+        </v-list-item-title>
+      </v-list-item>
       <v-divider />
     </v-list>
     <v-list
       avatar
     >
-      <v-list-tile
+      <v-list-item
         v-for="character in CreaturesWithNoParty"
         :key="character._id"
         :to="character.url"
       >
-        <v-list-tile-avatar :color="character.color || 'grey'">
+        <v-list-item-avatar :color="character.color || 'grey'">
           <img
             v-if="character.avatarPicture"
             :src="character.avatarPicture"
@@ -66,26 +68,26 @@
           <template v-else>
             {{ character.initial }}
           </template>
-        </v-list-tile-avatar>
-        <v-list-tile-title>
+        </v-list-item-avatar>
+        <v-list-item-title>
           {{ character.name }}
-        </v-list-tile-title>
-      </v-list-tile>
+        </v-list-item-title>
+      </v-list-item>
       <v-list-group
         v-for="party in parties"
         :key="party._id"
       >
-        <v-list-tile slot="activator">
-          <v-list-tile-title>
+        <v-list-item slot="activator">
+          <v-list-item-title>
             {{ party.name }}
-          </v-list-tile-title>
-        </v-list-tile>
-        <v-list-tile
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item
           v-for="character in characterDocs"
           :key="character._id"
           :to="character.url"
         >
-          <v-list-tile-avatar :color="character.color || 'grey'">
+          <v-list-item-avatar :color="character.color || 'grey'">
             <img
               v-if="character.avatarPicture"
               :src="character.avatarPicture"
@@ -94,17 +96,17 @@
             <template v-else>
               {{ character.initial }}
             </template>
-          </v-list-tile-avatar>
-          <v-list-tile-title>
+          </v-list-item-avatar>
+          <v-list-item-title>
             {{ character.name }}
-          </v-list-tile-title>
-        </v-list-tile>
+          </v-list-item-title>
+        </v-list-item>
       </v-list-group>
     </v-list>
   </div>
 </template>
 
-<script>
+<script lang="js">
   import Creatures from '/imports/api/creature/Creatures.js';
   import Parties from '/imports/api/creature/Parties.js';
 
diff --git a/app/imports/ui/library/LibraryAndNode.vue b/app/imports/ui/library/LibraryAndNode.vue
index ce3da940..ca6952f0 100644
--- a/app/imports/ui/library/LibraryAndNode.vue
+++ b/app/imports/ui/library/LibraryAndNode.vue
@@ -61,7 +61,7 @@
   </tree-detail-layout>
 </template>
 
-<script>
+<script lang="js">
 import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
 import LibraryBrowser from '/imports/ui/library/LibraryBrowser.vue';
 import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
diff --git a/app/imports/ui/library/LibraryBrowser.vue b/app/imports/ui/library/LibraryBrowser.vue
index 7a9953ff..cde4ce82 100644
--- a/app/imports/ui/library/LibraryBrowser.vue
+++ b/app/imports/ui/library/LibraryBrowser.vue
@@ -70,7 +70,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue';
 import { setDocToLastOrder } from '/imports/api/parenting/order.js';
 import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
diff --git a/app/imports/ui/library/LibraryContentsContainer.vue b/app/imports/ui/library/LibraryContentsContainer.vue
index 2b5363a5..2aced68b 100644
--- a/app/imports/ui/library/LibraryContentsContainer.vue
+++ b/app/imports/ui/library/LibraryContentsContainer.vue
@@ -27,7 +27,7 @@
   </v-fade-transition>
 </template>
 
-<script>
+<script lang="js">
 	import Libraries from '/imports/api/library/Libraries.js';
 	import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 	import { nodesToTree } from '/imports/api/parenting/parenting.js'
diff --git a/app/imports/ui/library/LibraryCreationDialog.vue b/app/imports/ui/library/LibraryCreationDialog.vue
index 893c6cb0..4ef7083e 100644
--- a/app/imports/ui/library/LibraryCreationDialog.vue
+++ b/app/imports/ui/library/LibraryCreationDialog.vue
@@ -26,7 +26,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 	export default {
diff --git a/app/imports/ui/library/LibraryEditDialog.vue b/app/imports/ui/library/LibraryEditDialog.vue
index 4c683ba7..f739f4a9 100644
--- a/app/imports/ui/library/LibraryEditDialog.vue
+++ b/app/imports/ui/library/LibraryEditDialog.vue
@@ -42,7 +42,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Libraries, { updateLibraryName, removeLibrary } from '/imports/api/library/Libraries.js';
 
diff --git a/app/imports/ui/library/LibraryNodeCreationDialog.vue b/app/imports/ui/library/LibraryNodeCreationDialog.vue
index 2dd86efd..df478022 100644
--- a/app/imports/ui/library/LibraryNodeCreationDialog.vue
+++ b/app/imports/ui/library/LibraryNodeCreationDialog.vue
@@ -8,7 +8,7 @@
 	</selectable-property-dialog>
 </template>
 
-<script>
+<script lang="js">
 import SelectablePropertyDialog from '/imports/ui/properties/shared/SelectablePropertyDialog.vue';
 import LibraryNodeInsertForm from '/imports/ui/library/LibraryNodeInsertForm.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
diff --git a/app/imports/ui/library/LibraryNodeDialog.vue b/app/imports/ui/library/LibraryNodeDialog.vue
index acc19bc5..631424a5 100644
--- a/app/imports/ui/library/LibraryNodeDialog.vue
+++ b/app/imports/ui/library/LibraryNodeDialog.vue
@@ -39,7 +39,7 @@
     <div
       v-if="!embedded"
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <template v-if="selection">
         <v-btn
@@ -67,7 +67,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
   import LibraryNodes, {
     duplicateNode,
     updateLibraryNode,
diff --git a/app/imports/ui/library/LibraryNodeInsertForm.vue b/app/imports/ui/library/LibraryNodeInsertForm.vue
index 2f1f6bda..a2739db9 100644
--- a/app/imports/ui/library/LibraryNodeInsertForm.vue
+++ b/app/imports/ui/library/LibraryNodeInsertForm.vue
@@ -25,7 +25,7 @@
     />
     <div
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
         flat
@@ -38,7 +38,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
diff --git a/app/imports/ui/library/MoveLibraryNodeDialog.vue b/app/imports/ui/library/MoveLibraryNodeDialog.vue
index 2510ced7..e53bdefd 100644
--- a/app/imports/ui/library/MoveLibraryNodeDialog.vue
+++ b/app/imports/ui/library/MoveLibraryNodeDialog.vue
@@ -22,7 +22,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
 	export default {
diff --git a/app/imports/ui/library/SingleLibraryToolbar.vue b/app/imports/ui/library/SingleLibraryToolbar.vue
index 0726d701..ade91df6 100644
--- a/app/imports/ui/library/SingleLibraryToolbar.vue
+++ b/app/imports/ui/library/SingleLibraryToolbar.vue
@@ -43,7 +43,7 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="js">
 import Libraries from '/imports/api/library/Libraries.js';
 import { assertDocEditPermission } from '/imports/api/sharing/sharingPermissions.js';
 import { mapMutations } from 'vuex';
diff --git a/app/imports/ui/log/CharacterLog.vue b/app/imports/ui/log/CharacterLog.vue
index ec68e11f..e7885208 100644
--- a/app/imports/ui/log/CharacterLog.vue
+++ b/app/imports/ui/log/CharacterLog.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CreatureLogs, { logRoll } from '/imports/api/creature/log/CreatureLogs.js';
 import Creatures from '/imports/api/creature/Creatures.js';
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
diff --git a/app/imports/ui/log/LogEntry.vue b/app/imports/ui/log/LogEntry.vue
index 03b2efa9..e310c8ef 100644
--- a/app/imports/ui/log/LogEntry.vue
+++ b/app/imports/ui/log/LogEntry.vue
@@ -36,7 +36,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 
 export default {
diff --git a/app/imports/ui/pages/About.vue b/app/imports/ui/pages/About.vue
index 1d3fe075..e434e46e 100644
--- a/app/imports/ui/pages/About.vue
+++ b/app/imports/ui/pages/About.vue
@@ -42,29 +42,29 @@
           two-line
           style="background: inherit;"
         >
-          <v-list-tile
+          <v-list-item
             v-for="paragon in paragons"
             :key="paragon.name"
           >
-            <v-list-tile-avatar>
+            <v-list-item-avatar>
               <v-img :src="`/images/paragons/${paragon.avatar}.png`" />
-            </v-list-tile-avatar>
-            <v-list-tile-content>
-              <v-list-tile-title>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title>
                 {{ paragon.name }}
-              </v-list-tile-title>
-              <v-list-tile-sub-title>
+              </v-list-item-title>
+              <v-list-item-subtitle>
                 {{ paragon.title }}
-              </v-list-tile-sub-title>
-            </v-list-tile-content>
-          </v-list-tile>
+              </v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </div>
     </section>
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   data(){ return {
     paragons:[{
diff --git a/app/imports/ui/pages/Account.vue b/app/imports/ui/pages/Account.vue
index 6694ee2b..043ffa5a 100644
--- a/app/imports/ui/pages/Account.vue
+++ b/app/imports/ui/pages/Account.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout row justify-center">
+  <div class="layout justify-center">
     <v-card
       class="ma-4 pa-2"
       style="flex-basis: 900px"
@@ -8,14 +8,14 @@
         <v-subheader>
           Preferences
         </v-subheader>
-        <v-list-tile>
+        <v-list-item>
           <smart-switch
             :value="darkMode"
             label="Dark mode"
             @change="setDarkMode"
           />
-        </v-list-tile>
-        <v-list-tile>
+        </v-list-item>
+        <v-list-item>
           <smart-switch
             label="Swap ability scores and modifiers"
             :value="
@@ -25,13 +25,13 @@
             "
             @change="swapAbilityScoresAndModifiers"
           />
-        </v-list-tile>
+        </v-list-item>
 
         <v-subheader>
           Username
         </v-subheader>
-        <v-list-tile data-id="username">
-          <v-list-tile-action>
+        <v-list-item data-id="username">
+          <v-list-item-action>
             <v-tooltip right>
               <span>Change Username</span>
               <v-btn
@@ -43,28 +43,28 @@
                 <v-icon>create</v-icon>
               </v-btn>
             </v-tooltip>
-          </v-list-tile-action>
-          <v-list-tile-title>
+          </v-list-item-action>
+          <v-list-item-title>
             {{ user && user.username }}
-          </v-list-tile-title>
-        </v-list-tile>
+          </v-list-item-title>
+        </v-list-item>
 
         <v-subheader>
           Email
         </v-subheader>
-        <v-list-tile
+        <v-list-item
           v-for="email in emails"
           :key="email.address"
         >
-          <v-list-tile-title>
+          <v-list-item-title>
             {{ email.address }}
-          </v-list-tile-title>
-        </v-list-tile>
+          </v-list-item-title>
+        </v-list-item>
         <v-subheader>
           Patreon
         </v-subheader>
-        <v-list-tile>
-          <v-list-tile-action>
+        <v-list-item>
+          <v-list-item-action>
             <v-tooltip right>
               <span>Refresh Patreon status</span>
               <v-btn
@@ -77,27 +77,27 @@
                 <v-icon>refresh</v-icon>
               </v-btn>
             </v-tooltip>
-          </v-list-tile-action>
-          <v-list-tile-title>
+          </v-list-item-action>
+          <v-list-item-title>
             Tier: {{ tier.name }}
-          </v-list-tile-title>
-        </v-list-tile>
-        <v-list-tile v-if="!user.services.google">
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item v-if="!user.services.google">
           <v-btn
             color="primary"
             @click="linkWithGoogle"
           >
             Link Google Account
           </v-btn>
-        </v-list-tile>
-        <v-list-tile v-if="!user.services.patreon">
+        </v-list-item>
+        <v-list-item v-if="!user.services.patreon">
           <v-btn
             color="primary"
             @click="linkWithPatreon"
           >
             Link Patreon Account
           </v-btn>
-        </v-list-tile>
+        </v-list-item>
       </v-list>
       <v-layout
         row
@@ -121,20 +121,20 @@
           <template
             v-for="(invite, index) in invites"
           >
-            <v-list-tile
+            <v-list-item
               :key="invite._id"
               :data-id="invite._id"
               @click="clickInvite(invite)"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   {{ invite.inviteeName || invite.invitee || 'Available' }}
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>mail_outline</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
+              </v-list-item-action>
+            </v-list-item>
             <v-divider
               :key="index"
             />
@@ -158,7 +158,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import router from '/imports/ui/router.js';
   import getEntitledCents from '/imports/api/users/patreon/getEntitledCents.js';
   import Invites from '/imports/api/users/Invites.js';
diff --git a/app/imports/ui/pages/CharacterList.vue b/app/imports/ui/pages/CharacterList.vue
index 4d61eec1..7f6ec485 100644
--- a/app/imports/ui/pages/CharacterList.vue
+++ b/app/imports/ui/pages/CharacterList.vue
@@ -19,17 +19,17 @@
           </div>
           <v-card>
             <v-list>
-              <v-list-tile
+              <v-list-item
                 v-for="character in party.characterDocs"
                 :key="character._id"
               >
-                <v-list-tile-avatar>
+                <v-list-item-avatar>
                   <img
                     :src="character.picture"
                     alt="character.name"
                   >
-                </v-list-tile-avatar>
-              </v-list-tile>
+                </v-list-item-avatar>
+              </v-list-item>
             </v-list>
           </v-card>
         </v-expansion-panel-content>
@@ -78,7 +78,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import Creatures, {insertCreature} from '/imports/api/creature/Creatures.js';
   import Parties from '/imports/api/creature/Parties.js';
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
diff --git a/app/imports/ui/pages/CharacterSheetPage.vue b/app/imports/ui/pages/CharacterSheetPage.vue
index 31f0d5dc..c21908db 100644
--- a/app/imports/ui/pages/CharacterSheetPage.vue
+++ b/app/imports/ui/pages/CharacterSheetPage.vue
@@ -5,7 +5,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import CharacterSheet from '/imports/ui/creature/character/CharacterSheet.vue';
 export default {
 	components: {
diff --git a/app/imports/ui/pages/Feedback.vue b/app/imports/ui/pages/Feedback.vue
index 0f837ed9..1892cdf8 100644
--- a/app/imports/ui/pages/Feedback.vue
+++ b/app/imports/ui/pages/Feedback.vue
@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
 }
 </script>
diff --git a/app/imports/ui/pages/Home.vue b/app/imports/ui/pages/Home.vue
index ac26e16b..3a516202 100644
--- a/app/imports/ui/pages/Home.vue
+++ b/app/imports/ui/pages/Home.vue
@@ -1,139 +1,137 @@
 <template>
-  <div>
-    <div class="content">
-      <section>
-        <v-parallax
-          src="/images/paper-dice-crown.png"
-          height="300"
-        >
-          <v-layout
-            column
-            align-center
-            justify-center
-            class="white--text"
-          >
-            <h1 class="white--text mb-2 display-1 text-xs-center">
-              DiceCloud - Free, Auditable, real-time character tracking for 5th edition
-            </h1>
-            <div class="subheading mb-3 text-xs-center">
-              Spend less time shuffling paper, and more time playing the game
-            </div>
-          </v-layout>
-        </v-parallax>
-      </section>
-      <section class="text-xs-center">
-        <v-layout
-          row
-          wrap
-          justify-space-around
-          class="selling-points"
-        >
-          <v-layout
-            column
-            align-center
-          >
-            <v-icon
-              x-large
-              class="ma-2"
-            >
-              money_off
-            </v-icon>
-            <h3 class="mb-2">
-              Free, open source, community funded
-            </h3>
-            <p>
-              DiceCloud is free to use. Its hosting is funded via Patreon,
-              and the source code is available on Github under a GPL license.
-            </p>
-          </v-layout>
-          <v-layout
-            column
-            align-center
-          >
-            <v-icon
-              x-large
-              class="ma-2"
-            >
-              ballot
-            </v-icon>
-            <h3 class="mb-2">
-              Character sheets optimised for one ruleset
-            </h3>
-            <p>
-              By having a narrrow scope, DiceCloud can be the best at what it
-              does: being a fully automated character tracker
-            </p>
-          </v-layout>
-          <v-layout
-            column
-            align-center
-          >
-            <v-icon
-              x-large
-              class="ma-2"
-            >
-              scatter_plot
-            </v-icon>
-            <h3 class="mb-2">
-              Inventory manager
-            </h3>
-            <p>
-              Equiping items changes your characters stats automatically.
-            </p>
-          </v-layout>
-        </v-layout>
-      </section>
-      <section
-        v-if="!signedIn"
-        class="ma-5"
+  <div
+    class="content layout column justify-space-between"
+    style="min-height: 100%;"
+  >
+    <section>
+      <v-parallax
+        src="/images/paper-dice-crown.png"
+        height="300"
       >
         <v-layout
-          row
+          column
           align-center
-          justify-space-around
+          justify-center
+          class="white--text"
         >
-          <v-btn
-            color="accent"
-            round
-            large
-            to="/sign-in"
-          >
-            Sign In
-          </v-btn>
+          <h1 class="white--text mb-2 text-h4 text-center">
+            DiceCloud - Free, Auditable, real-time character tracking for 5th edition
+          </h1>
+          <div class="subheading mb-3 text-center">
+            Spend less time shuffling paper, and more time playing the game
+          </div>
         </v-layout>
-      </section>
-      <section class="text-xs-center grey darken-3 white--text pa-5">
-        <h1>
-          Get involved in the DiceCloud community
-        </h1>
+      </v-parallax>
+    </section>
+    <section class="text-center">
+      <v-layout
+        wrap
+        justify-space-around
+        class="selling-points"
+      >
         <v-layout
-          row
-          wrap
+          column
           align-center
-          justify-space-around
-          class="pa-4"
         >
-          <v-btn
-            v-for="btn in [
-              {link: 'https://discord.gg/qEvdfeB', name: 'Discord'},
-              {link: 'https://www.patreon.com/dicecloud', name: 'Patreon'},
-              {link: 'https://github.com/ThaumRystra/DiceCloud', name: 'Github'},
-            ]"
-            :key="btn.name"
-            :href="btn.link"
-            flat
-            large
-            color="primary"
+          <v-icon
+            x-large
+            class="ma-2"
           >
-            {{ btn.name }}
-          </v-btn>
+            money_off
+          </v-icon>
+          <h3 class="mb-2">
+            Free, open source, community funded
+          </h3>
+          <p>
+            DiceCloud is free to use. Its hosting is funded via Patreon,
+            and the source code is available on Github under a GPL license.
+          </p>
         </v-layout>
-      </section>
-    </div>
+        <v-layout
+          column
+          align-center
+        >
+          <v-icon
+            x-large
+            class="ma-2"
+          >
+            ballot
+          </v-icon>
+          <h3 class="mb-2">
+            Character sheets optimised for one ruleset
+          </h3>
+          <p>
+            By having a narrrow scope, DiceCloud can be the best at what it
+            does: being a fully automated character tracker
+          </p>
+        </v-layout>
+        <v-layout
+          column
+          align-center
+        >
+          <v-icon
+            x-large
+            class="ma-2"
+          >
+            scatter_plot
+          </v-icon>
+          <h3 class="mb-2">
+            Inventory manager
+          </h3>
+          <p>
+            Equiping items changes your characters stats automatically.
+          </p>
+        </v-layout>
+      </v-layout>
+    </section>
+    <section
+      v-if="!signedIn"
+      class="ma-5"
+    >
+      <v-layout
+        align-center
+        justify-space-around
+      >
+        <v-btn
+          color="accent"
+          round
+          large
+          to="/sign-in"
+        >
+          Sign In
+        </v-btn>
+      </v-layout>
+    </section>
+    <section class="text-center grey darken-3 white--text pa-5">
+      <h1>
+        Get involved in the DiceCloud community
+      </h1>
+      <v-layout
+        wrap
+        align-center
+        justify-space-around
+        class="pa-4"
+      >
+        <v-btn
+          v-for="btn in [
+            {link: 'https://discord.gg/qEvdfeB', name: 'Discord'},
+            {link: 'https://www.patreon.com/dicecloud', name: 'Patreon'},
+            {link: 'https://github.com/ThaumRystra/DiceCloud', name: 'Github'},
+          ]"
+          :key="btn.name"
+          :href="btn.link"
+          text
+          large
+          color="primary"
+        >
+          {{ btn.name }}
+        </v-btn>
+      </v-layout>
+    </section>
   </div>
 </template>
 
-<script>
+<script lang="js">
   export default {
     meteor: {
       signedIn(){
diff --git a/app/imports/ui/pages/InviteError.vue b/app/imports/ui/pages/InviteError.vue
index 46ea353c..97cff84d 100644
--- a/app/imports/ui/pages/InviteError.vue
+++ b/app/imports/ui/pages/InviteError.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: {
     error: {
diff --git a/app/imports/ui/pages/InviteSuccess.vue b/app/imports/ui/pages/InviteSuccess.vue
index 543893bb..3c258965 100644
--- a/app/imports/ui/pages/InviteSuccess.vue
+++ b/app/imports/ui/pages/InviteSuccess.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
 }
 </script>
diff --git a/app/imports/ui/pages/LaunchCountdown.vue b/app/imports/ui/pages/LaunchCountdown.vue
index 899092f4..100c1db6 100644
--- a/app/imports/ui/pages/LaunchCountdown.vue
+++ b/app/imports/ui/pages/LaunchCountdown.vue
@@ -25,7 +25,7 @@
 </template>
 
 
-<script>
+<script lang="js">
   import VueCountdown from '@chenfengyuan/vue-countdown';
   import LAUNCH_DATE from '/imports/constants/LAUNCH_DATE.js';
   export default{
diff --git a/app/imports/ui/pages/Library.vue b/app/imports/ui/pages/Library.vue
index 01a68985..d564dee1 100644
--- a/app/imports/ui/pages/Library.vue
+++ b/app/imports/ui/pages/Library.vue
@@ -6,7 +6,7 @@
   </single-card-layout>
 </template>
 
-<script>
+<script lang="js">
   import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue';
 	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
 	export default {
diff --git a/app/imports/ui/pages/PatreonLevelTooLow.vue b/app/imports/ui/pages/PatreonLevelTooLow.vue
index b81026dc..0fd34646 100644
--- a/app/imports/ui/pages/PatreonLevelTooLow.vue
+++ b/app/imports/ui/pages/PatreonLevelTooLow.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import TIERS, { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
 export default {
diff --git a/app/imports/ui/pages/Register.vue b/app/imports/ui/pages/Register.vue
index f703f922..d809b31e 100644
--- a/app/imports/ui/pages/Register.vue
+++ b/app/imports/ui/pages/Register.vue
@@ -77,7 +77,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   export default{
     data() {
       return {
diff --git a/app/imports/ui/pages/SignIn.vue b/app/imports/ui/pages/SignIn.vue
index aee513be..04af689c 100644
--- a/app/imports/ui/pages/SignIn.vue
+++ b/app/imports/ui/pages/SignIn.vue
@@ -29,7 +29,7 @@
           required
           @keyup.enter="submit"
         />
-        <v-btn flat>
+        <v-btn text>
           Reset Password
         </v-btn>
         <div class="error--text">
@@ -79,7 +79,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import { Meteor } from 'meteor/meteor'
 	export default{
 		data: () => ({
diff --git a/app/imports/ui/pages/Tabletop.vue b/app/imports/ui/pages/Tabletop.vue
index 335d26d0..55998eca 100644
--- a/app/imports/ui/pages/Tabletop.vue
+++ b/app/imports/ui/pages/Tabletop.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import Tabletops from '/imports/api/tabletop/Tabletops.js';
 import TabletopComponent from '/imports/ui/tabletop/TabletopComponent.vue';
 
diff --git a/app/imports/ui/pages/Tabletops.vue b/app/imports/ui/pages/Tabletops.vue
index 3a7db28f..8cd5c4ad 100644
--- a/app/imports/ui/pages/Tabletops.vue
+++ b/app/imports/ui/pages/Tabletops.vue
@@ -4,17 +4,17 @@
       v-if="tabletops.length"
       class="tabletops"
     >
-      <v-list-tile
+      <v-list-item
         v-for="tabletop in tabletops"
         :key="tabletop._id"
         :to="`/tabletop/${tabletop._id}`"
       >
-        <v-list-tile-content>
-          <v-list-tile-title>
+        <v-list-item-content>
+          <v-list-item-title>
             {{ tabletop.name || 'Unnamed Tabletop' }}
-          </v-list-tile-title>
-        </v-list-tile-content>
-      </v-list-tile>
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
     </v-list>
     <v-card-text v-else>
       You don't own or belong to any tabletops yet
@@ -33,7 +33,7 @@
   </single-card-layout>
 </template>
 
-<script>
+<script lang="js">
 import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue'
 import Tabletops, { insertTabletop } from '/imports/api/tabletop/Tabletops.js';
 
diff --git a/app/imports/ui/properties/components/actions/ActionCard.vue b/app/imports/ui/properties/components/actions/ActionCard.vue
index 4da52fca..a5ef03b6 100644
--- a/app/imports/ui/properties/components/actions/ActionCard.vue
+++ b/app/imports/ui/properties/components/actions/ActionCard.vue
@@ -4,7 +4,7 @@
     :class="cardClasses"
     :elevation="hovering ? 8 : undefined"
   >
-    <div class="layout row align-center px-3">
+    <div class="layout align-center px-3">
       <div class="avatar">
         <v-btn
           flat
@@ -91,7 +91,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
diff --git a/app/imports/ui/properties/components/actions/AttributeConsumedView.vue b/app/imports/ui/properties/components/actions/AttributeConsumedView.vue
index c982b2ba..2266d6e3 100644
--- a/app/imports/ui/properties/components/actions/AttributeConsumedView.vue
+++ b/app/imports/ui/properties/components/actions/AttributeConsumedView.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div
-    class="layout row align-center justify-start"
+    class="layout align-center justify-start"
     :class="insufficient && 'error--text'"
   >
     <div
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: {
     model: {
diff --git a/app/imports/ui/properties/components/actions/ItemConsumedView.vue b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
index c0da0e15..5552ba75 100644
--- a/app/imports/ui/properties/components/actions/ItemConsumedView.vue
+++ b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
@@ -13,7 +13,7 @@
     >
       <template #activator="{ on }">
         <div
-          class="layout row align-center justify-start"
+          class="layout align-center justify-start"
           style="height: 100%;"
           :class="{
             'error--text': insufficient,
@@ -64,7 +64,7 @@
     </v-menu>
     <div
       v-else
-      class="layout row align-center justify-start"
+      class="layout align-center justify-start"
       :class="{'left-pad': leftPad}"
     >
       <div
@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import SelectItemToConsume from '/imports/ui/properties/components/actions/SelectItemToConsume.vue';
 export default {
   components: {
diff --git a/app/imports/ui/properties/components/actions/SelectItemToConsume.vue b/app/imports/ui/properties/components/actions/SelectItemToConsume.vue
index 06c6c54e..1e1538a3 100644
--- a/app/imports/ui/properties/components/actions/SelectItemToConsume.vue
+++ b/app/imports/ui/properties/components/actions/SelectItemToConsume.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <v-list v-if="items.length">
-    <v-list-tile
+    <v-list-item
       v-for="item in items"
       :key="item._id"
       @click="selectItem(item._id)"
@@ -9,7 +9,7 @@
         :model="item"
         :selected="itemConsumed.itemId === item._id"
       />
-    </v-list-tile>
+    </v-list-item>
   </v-list>
   <v-card v-else>
     <v-card-text>
@@ -18,7 +18,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import selectAmmoItem from '/imports/api/creature/creatureProperties/methods/selectAmmoItem.js';
diff --git a/app/imports/ui/properties/components/attributes/AbilityListTile.vue b/app/imports/ui/properties/components/attributes/AbilityListTile.vue
index 411483de..08f7b7e1 100644
--- a/app/imports/ui/properties/components/attributes/AbilityListTile.vue
+++ b/app/imports/ui/properties/components/attributes/AbilityListTile.vue
@@ -1,9 +1,9 @@
 <template lang="html">
-  <v-list-tile
+  <v-list-item
     class="ability-list-tile"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-tile-action class="mr-4">
+    <v-list-item-action class="mr-4">
       <div class="display-1 mod">
         <template v-if="swapScoresAndMods">
           <span :class="{'primary--text': model.currentValue !== model.value}">
@@ -24,17 +24,17 @@
           </span>
         </template>
       </div>
-    </v-list-tile-action>
+    </v-list-item-action>
 
-    <v-list-tile-content>
-      <v-list-tile-title>
+    <v-list-item-content>
+      <v-list-item-title>
         {{ model.name }}
-      </v-list-tile-title>
-    </v-list-tile-content>
-  </v-list-tile>
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
 	props: {
diff --git a/app/imports/ui/properties/components/attributes/AttributeCard.vue b/app/imports/ui/properties/components/attributes/AttributeCard.vue
index 40346c71..21341c5a 100644
--- a/app/imports/ui/properties/components/attributes/AttributeCard.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeCard.vue
@@ -4,7 +4,7 @@
     @click="click"
   >
     <v-card-text>
-      <div class="layout row align-center">
+      <div class="layout align-center">
         <div class="value display-1 mr-1">
           {{ computedValue }}
         </div>
@@ -16,7 +16,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
   import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
   export default {
     props: {
diff --git a/app/imports/ui/properties/components/attributes/HealthBar.vue b/app/imports/ui/properties/components/attributes/HealthBar.vue
index d08ab73e..c00bc0cb 100644
--- a/app/imports/ui/properties/components/attributes/HealthBar.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBar.vue
@@ -70,7 +70,7 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
 import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 	export default {
     components: {
diff --git a/app/imports/ui/properties/components/attributes/HealthBarCard.vue b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
index eff2a721..9465b86a 100644
--- a/app/imports/ui/properties/components/attributes/HealthBarCard.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
@@ -13,7 +13,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 	import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
 
 	export default {
diff --git a/app/imports/ui/properties/components/attributes/HealthBarCardContainer.vue b/app/imports/ui/properties/components/attributes/HealthBarCardContainer.vue
index c1c801b0..98030c05 100644
--- a/app/imports/ui/properties/components/attributes/HealthBarCardContainer.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBarCardContainer.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import Creatures from '/imports/api/creature/Creatures.js';
   import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 
diff --git a/app/imports/ui/properties/components/attributes/HitDiceListTile.vue b/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
index 3800bf2a..51bea277 100644
--- a/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
+++ b/app/imports/ui/properties/components/attributes/HitDiceListTile.vue
@@ -1,9 +1,9 @@
 <template lang="html">
-  <v-list-tile
+  <v-list-item
     class="hit-dice-list-tile"
     :class="{hover}"
   >
-    <v-list-tile-action class="mr-4">
+    <v-list-item-action class="mr-4">
       <v-layout
         row
         align-center
@@ -44,22 +44,22 @@
           </div>
         </v-layout>
       </v-layout>
-    </v-list-tile-action>
+    </v-list-item-action>
 
-    <v-list-tile-content
+    <v-list-item-content
       class="content"
       @click="click"
       @mouseover="hover = true"
       @mouseleave="hover = false"
     >
-      <v-list-tile-title>
+      <v-list-item-title>
         {{ model.hitDiceSize }} {{ signedConMod }}
-      </v-list-tile-title>
-    </v-list-tile-content>
-  </v-list-tile>
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
   inject: {
diff --git a/app/imports/ui/properties/components/attributes/ResourceCard.vue b/app/imports/ui/properties/components/attributes/ResourceCard.vue
index 8e0a7d92..2478a089 100644
--- a/app/imports/ui/properties/components/attributes/ResourceCard.vue
+++ b/app/imports/ui/properties/components/attributes/ResourceCard.vue
@@ -22,7 +22,7 @@
       </v-btn>
     </div>
     <div
-      class="layout row align-center value pl-2 pr-3"
+      class="layout align-center value pl-2 pr-3"
     >
       <div class="display-1">
         {{ currentValue }}
@@ -44,7 +44,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 	export default {
 		props: {
 			_id: String,
diff --git a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
index 96cc3cfd..cbc1b93b 100644
--- a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
+++ b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
@@ -1,13 +1,13 @@
 <template lang="html">
-  <v-list-tile
+  <v-list-item
     class="spell-slot-list-tile"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-tile-content>
-      <v-list-tile-title>
+    <v-list-item-content>
+      <v-list-item-title>
         <div
           v-if="model.value > 4"
-          class="layout row value"
+          class="layout value"
           style="align-items: baseline;"
         >
           <div
@@ -22,7 +22,7 @@
         </div>
         <div
           v-else
-          class="layout row align-center slot-bubbles"
+          class="layout align-center slot-bubbles"
         >
           <v-icon
             v-for="i in model.value"
@@ -35,12 +35,12 @@
             }}
           </v-icon>
         </div>
-      </v-list-tile-title>
-      <v-list-tile-sub-title>
+      </v-list-item-title>
+      <v-list-item-subtitle>
         {{ model.name }}
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-    <v-list-tile-avatar v-if="!hideCastButton">
+      </v-list-item-subtitle>
+    </v-list-item-content>
+    <v-list-item-avatar v-if="!hideCastButton">
       <v-btn
         icon
         flat
@@ -50,11 +50,11 @@
       >
         <v-icon>$vuetify.icons.spell</v-icon>
       </v-btn>
-    </v-list-tile-avatar>
-  </v-list-tile>
+    </v-list-item-avatar>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
 	props: {
diff --git a/app/imports/ui/properties/components/attributes/SplitListLayout.vue b/app/imports/ui/properties/components/attributes/SplitListLayout.vue
index 3969bd32..d680e0c3 100644
--- a/app/imports/ui/properties/components/attributes/SplitListLayout.vue
+++ b/app/imports/ui/properties/components/attributes/SplitListLayout.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <div
     v-if="$vuetify.breakpoint.smAndUp"
-    class="layout row split"
+    class="layout split"
   >
     <v-list
       class="left"
@@ -51,7 +51,7 @@
   </v-list>
 </template>
 
-<script>
+<script lang="js">
 export default {
 }
 </script>
diff --git a/app/imports/ui/properties/components/damageMultipliers/DamageMultiplierCard.vue b/app/imports/ui/properties/components/damageMultipliers/DamageMultiplierCard.vue
index d8647c37..c50048ca 100644
--- a/app/imports/ui/properties/components/damageMultipliers/DamageMultiplierCard.vue
+++ b/app/imports/ui/properties/components/damageMultipliers/DamageMultiplierCard.vue
@@ -3,41 +3,41 @@
     <v-list
       three-line
     >
-      <v-list-tile v-if="weaknesses.length">
-        <v-list-tile-content>
-          <v-list-tile-title>
+      <v-list-item v-if="weaknesses.length">
+        <v-list-item-content>
+          <v-list-item-title>
             Vulnerabilities
-          </v-list-tile-title>
-          <v-list-tile-sub-title>
+          </v-list-item-title>
+          <v-list-item-subtitle>
             {{ weaknesses }}
-          </v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile v-if="resistances.length">
-        <v-list-tile-content>
-          <v-list-tile-title>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item v-if="resistances.length">
+        <v-list-item-content>
+          <v-list-item-title>
             Resistances
-          </v-list-tile-title>
-          <v-list-tile-sub-title>
+          </v-list-item-title>
+          <v-list-item-subtitle>
             {{ resistances }}
-          </v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile v-if="immunities.length">
-        <v-list-tile-content>
-          <v-list-tile-title>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item v-if="immunities.length">
+        <v-list-item-content>
+          <v-list-item-title>
             Immunities
-          </v-list-tile-title>
-          <v-list-tile-sub-title>
+          </v-list-item-title>
+          <v-list-item-subtitle>
             {{ immunities }}
-          </v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
     </v-list>
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 
 export default {
   props: {
diff --git a/app/imports/ui/properties/components/features/FeatureCard.vue b/app/imports/ui/properties/components/features/FeatureCard.vue
index 909c484e..79062699 100644
--- a/app/imports/ui/properties/components/features/FeatureCard.vue
+++ b/app/imports/ui/properties/components/features/FeatureCard.vue
@@ -20,7 +20,7 @@
   </toolbar-card>
 </template>
 
-<script>
+<script lang="js">
 	import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
   import EmbedInlineComputations from '/imports/ui/components/computation/EmbedInlineComputations.vue';
 
diff --git a/app/imports/ui/properties/components/inventory/ContainerCard.vue b/app/imports/ui/properties/components/inventory/ContainerCard.vue
index 6a922cdb..7838a746 100644
--- a/app/imports/ui/properties/components/inventory/ContainerCard.vue
+++ b/app/imports/ui/properties/components/inventory/ContainerCard.vue
@@ -20,7 +20,7 @@
         {{ (model.contentsWeightless ? 0 : model.contentsWeight || 0) + (model.weight || 0) }}
       </v-toolbar-title>
       <v-toolbar-title
-        class="layout row align-center"
+        class="layout align-center"
         style="flex-grow: 0;"
       >
         <v-icon
@@ -44,7 +44,7 @@
   </toolbar-card>
 </template>
 
-<script>
+<script lang="js">
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 import ItemList from '/imports/ui/properties/components/inventory/ItemList.vue';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
diff --git a/app/imports/ui/properties/components/inventory/ItemList.vue b/app/imports/ui/properties/components/inventory/ItemList.vue
index 6eb68b2f..9eb35696 100644
--- a/app/imports/ui/properties/components/inventory/ItemList.vue
+++ b/app/imports/ui/properties/components/inventory/ItemList.vue
@@ -26,7 +26,7 @@
   </v-list>
 </template>
 
-<script>
+<script lang="js">
 import draggable from 'vuedraggable';
 import ItemListTile from '/imports/ui/properties/components/inventory/ItemListTile.vue';
 import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
diff --git a/app/imports/ui/properties/components/inventory/ItemListTile.vue b/app/imports/ui/properties/components/inventory/ItemListTile.vue
index 13a37aab..65379e97 100644
--- a/app/imports/ui/properties/components/inventory/ItemListTile.vue
+++ b/app/imports/ui/properties/components/inventory/ItemListTile.vue
@@ -1,27 +1,27 @@
 <template lang="html">
-  <v-list-tile
+  <v-list-item
     class="item"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-tile-avatar class="item-avatar">
+    <v-list-item-avatar class="item-avatar">
       <property-icon
         class="mr-2"
         :model="model"
         :color="model.color"
       />
-    </v-list-tile-avatar>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-avatar>
+    <v-list-item-content>
+      <v-list-item-title>
         {{ title }}
-      </v-list-tile-title>
-    </v-list-tile-content>
-    <v-list-tile-action
+      </v-list-item-title>
+    </v-list-item-content>
+    <v-list-item-action
       v-if="model.attuned"
       style="min-width: 40px;"
     >
       <v-icon>$vuetify.icons.spell</v-icon>
-    </v-list-tile-action>
-    <v-list-tile-action style="min-width: 40px;">
+    </v-list-item-action>
+    <v-list-item-action style="min-width: 40px;">
       <increment-button
         v-if="context.creatureId && model.showIncrement"
         icon
@@ -35,8 +35,8 @@
           $vuetify.icons.abacus
         </v-icon>
       </increment-button>
-    </v-list-tile-action>
-    <v-list-tile-action>
+    </v-list-item-action>
+    <v-list-item-action>
       <v-icon
         :disabled="context.editPermission === false"
         style="height: 100%; width: 40px; cursor: move;"
@@ -44,11 +44,11 @@
       >
         drag_indicator
       </v-icon>
-    </v-list-tile-action>
-  </v-list-tile>
+    </v-list-item-action>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
 import adjustQuantity from '/imports/api/creature/creatureProperties/methods/adjustQuantity.js';
diff --git a/app/imports/ui/properties/components/persona/NoteCard.vue b/app/imports/ui/properties/components/persona/NoteCard.vue
index 9ccab30b..45d02204 100644
--- a/app/imports/ui/properties/components/persona/NoteCard.vue
+++ b/app/imports/ui/properties/components/persona/NoteCard.vue
@@ -20,7 +20,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
diff --git a/app/imports/ui/properties/components/skills/SkillListTile.vue b/app/imports/ui/properties/components/skills/SkillListTile.vue
index b4925012..e2c19476 100644
--- a/app/imports/ui/properties/components/skills/SkillListTile.vue
+++ b/app/imports/ui/properties/components/skills/SkillListTile.vue
@@ -1,14 +1,14 @@
 <template lang="html">
-  <v-list-tile
+  <v-list-item
     class="skill-list-tile"
     height="32px"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-tile-action class="prof-icon">
+    <v-list-item-action class="prof-icon">
       <v-icon>{{ icon }}</v-icon>
-    </v-list-tile-action>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-action>
+    <v-list-item-content>
+      <v-list-item-title>
         <span
           v-if="!hideModifier"
           class="prof-mod"
@@ -34,12 +34,12 @@
         <template v-if="'passiveBonus' in model">
           ({{ passiveScore }})
         </template>
-      </v-list-tile-title>
-    </v-list-tile-content>
-  </v-list-tile>
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 
 export default {
diff --git a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
index c8e980ff..6dd488d7 100644
--- a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
+++ b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
@@ -32,7 +32,7 @@
           </v-btn>
         </template>
         <v-list>
-          <v-list-tile
+          <v-list-item
             v-for="filter in booleanFilters"
             :key="filter.name"
             style="height: 52px;"
@@ -46,8 +46,8 @@
               :disabled="!filter.enabled"
               :label="filter.name"
             />
-          </v-list-tile>
-          <div class="layout row">
+          </v-list-item>
+          <div class="layout">
             <v-btn
               flat
               @click="clearBooleanFilters"
@@ -74,19 +74,19 @@
         >
           Slot
         </div>
-        <v-list-tile
+        <v-list-item
           v-if="!(selectedSpell && selectedSpell.level > 0)"
           key="cantrip-dummy-slot"
           class="spell-slot-list-tile"
           :class="{ 'primary--text': selectedSlotId === undefined}"
           @click="selectedSlotId = undefined"
         >
-          <v-list-tile-content>
-            <v-list-tile-title class="title">
+          <v-list-item-content>
+            <v-list-item-title class="title">
               Cantrip
-            </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
         <spell-slot-list-tile
           v-for="spellSlot in spellSlots"
           :key="spellSlot._id"
@@ -147,7 +147,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import SplitListLayout from '/imports/ui/properties/components/attributes/SplitListLayout.vue';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
diff --git a/app/imports/ui/properties/components/spells/SpellList.vue b/app/imports/ui/properties/components/spells/SpellList.vue
index 5fe5d29b..3d1d6333 100644
--- a/app/imports/ui/properties/components/spells/SpellList.vue
+++ b/app/imports/ui/properties/components/spells/SpellList.vue
@@ -37,7 +37,7 @@
   </v-list>
 </template>
 
-<script>
+<script lang="js">
 import draggable from 'vuedraggable';
 import SpellListTile from '/imports/ui/properties/components/spells/SpellListTile.vue';
 import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
diff --git a/app/imports/ui/properties/components/spells/SpellListCard.vue b/app/imports/ui/properties/components/spells/SpellListCard.vue
index 74834124..83995482 100644
--- a/app/imports/ui/properties/components/spells/SpellListCard.vue
+++ b/app/imports/ui/properties/components/spells/SpellListCard.vue
@@ -57,7 +57,7 @@
   </toolbar-card>
 </template>
 
-<script>
+<script lang="js">
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 import SpellList from '/imports/ui/properties/components/spells/SpellList.vue';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
diff --git a/app/imports/ui/properties/components/spells/SpellListTile.vue b/app/imports/ui/properties/components/spells/SpellListTile.vue
index 8d695ce2..cf40f6a6 100644
--- a/app/imports/ui/properties/components/spells/SpellListTile.vue
+++ b/app/imports/ui/properties/components/spells/SpellListTile.vue
@@ -1,24 +1,24 @@
 <template lang="html">
-  <v-list-tile
+  <v-list-item
     class="spell"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-list-tile-avatar class="spell-avatar">
+    <v-list-item-avatar class="spell-avatar">
       <property-icon
         class="mr-2"
         :model="model"
         :color="model.color"
       />
-    </v-list-tile-avatar>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-avatar>
+    <v-list-item-content>
+      <v-list-item-title>
         {{ title }}
-      </v-list-tile-title>
-      <v-list-tile-sub-title v-if="components">
-        {{ components }}
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-    <v-list-tile-action>
+      </v-list-item-title>
+      <v-list-item-subtitle v-if="spellComponents">
+        {{ spellComponents }}
+      </v-list-item-subtitle>
+    </v-list-item-content>
+    <v-list-item-action>
       <smart-checkbox
         v-if="preparingSpells"
         :value="model.prepared || model.alwaysPrepared"
@@ -44,11 +44,11 @@
       >
         <v-icon>info</v-icon>
       </v-btn>
-    </v-list-tile-action>
-  </v-list-tile>
+    </v-list-item-action>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
 
@@ -66,7 +66,7 @@ export default {
     hasClickListener(){
       return this.$listeners && !!this.$listeners.click;
     },
-    components(){
+    spellComponents(){
       let components = [];
       if (this.model.ritual) components.push('R');
       if (this.model.concentration) components.push('C');
diff --git a/app/imports/ui/properties/forms/ActionForm.vue b/app/imports/ui/properties/forms/ActionForm.vue
index 67476669..b32f1c6a 100644
--- a/app/imports/ui/properties/forms/ActionForm.vue
+++ b/app/imports/ui/properties/forms/ActionForm.vue
@@ -79,7 +79,7 @@
           :menu-props="{auto: true, lazy: true}"
           @change="change('target', ...arguments)"
         />
-        <div class="layout row wrap">
+        <div class="layout wrap">
           <text-field
             label="Uses"
             hint="How many times this action can be used before needing to be reset"
@@ -114,7 +114,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
   import ResourcesForm from '/imports/ui/properties/forms/ResourcesForm.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
diff --git a/app/imports/ui/properties/forms/AdjustmentForm.vue b/app/imports/ui/properties/forms/AdjustmentForm.vue
index a5912097..5e3f576c 100644
--- a/app/imports/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/ui/properties/forms/AdjustmentForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="adjustment-form">
-    <div class="layout row">
+    <div class="layout">
       <smart-combobox
         label="Attribute"
         hint="The attribute this adjustment will apply to"
@@ -49,7 +49,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
diff --git a/app/imports/ui/properties/forms/AttackForm.vue b/app/imports/ui/properties/forms/AttackForm.vue
index 6401cd77..7e0d6ba9 100644
--- a/app/imports/ui/properties/forms/AttackForm.vue
+++ b/app/imports/ui/properties/forms/AttackForm.vue
@@ -6,7 +6,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 	import ActionForm from '/imports/ui/properties/forms/ActionForm.vue';
 	export default {
 		components: {
diff --git a/app/imports/ui/properties/forms/AttributeConsumedForm.vue b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
index 172b970e..ef4cbb8e 100644
--- a/app/imports/ui/properties/forms/AttributeConsumedForm.vue
+++ b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row">
+  <div class="layout">
     <smart-combobox
       label="Attribute"
       hint="The attribute variable name that will be consumed"
@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 
diff --git a/app/imports/ui/properties/forms/AttributeForm.vue b/app/imports/ui/properties/forms/AttributeForm.vue
index 4bbdec3f..7bf3caa6 100644
--- a/app/imports/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/ui/properties/forms/AttributeForm.vue
@@ -13,7 +13,7 @@
       />
     </div>
     <calculation-error-list :errors="model.baseValueErrors" />
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         label="Name"
         :value="model.name"
@@ -85,7 +85,7 @@
           @change="change('decimal', ...arguments)"
         />
         <div
-          class="layout row justify-center"
+          class="layout justify-center"
           style="align-self: stretch;"
         >
           <text-field
@@ -101,7 +101,7 @@
           />
         </div>
       </div>
-      <div class="layout row wrap">
+      <div class="layout wrap">
         <smart-select
           v-if="model.attributeType !== 'hitDice'"
           label="Reset"
@@ -118,7 +118,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
diff --git a/app/imports/ui/properties/forms/AttributesConsumedListForm.vue b/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
index db99592f..c57199ae 100644
--- a/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
+++ b/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
@@ -5,7 +5,7 @@
         v-for="(attribute, i) in model"
         :key="attribute._id || i"
       >
-        <div class="layout row align-center">
+        <div class="layout align-center">
           <div style="flex-grow: 1;">
             <attribute-consumed-form
               :model="attribute"
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import AttributeConsumedForm from '/imports/ui/properties/forms/AttributeConsumedForm.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
diff --git a/app/imports/ui/properties/forms/BuffForm.vue b/app/imports/ui/properties/forms/BuffForm.vue
index 2635f88a..1ac3c98a 100644
--- a/app/imports/ui/properties/forms/BuffForm.vue
+++ b/app/imports/ui/properties/forms/BuffForm.vue
@@ -44,7 +44,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/forms/ClassLevelForm.vue b/app/imports/ui/properties/forms/ClassLevelForm.vue
index 2a7d8f79..b8835a1e 100644
--- a/app/imports/ui/properties/forms/ClassLevelForm.vue
+++ b/app/imports/ui/properties/forms/ClassLevelForm.vue
@@ -10,7 +10,7 @@
         @change="change('level', ...arguments)"
       />
     </div>
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         ref="focusFirst"
         label="Name"
@@ -57,7 +57,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/forms/ConstantForm.vue b/app/imports/ui/properties/forms/ConstantForm.vue
index e6978aeb..dcb535a8 100644
--- a/app/imports/ui/properties/forms/ConstantForm.vue
+++ b/app/imports/ui/properties/forms/ConstantForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div>
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         label="Name"
         :value="model.name"
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 import { ConstantSchema } from '/imports/api/properties/Constants.js';
diff --git a/app/imports/ui/properties/forms/ContainerForm.vue b/app/imports/ui/properties/forms/ContainerForm.vue
index de3d476b..a9bb5db7 100644
--- a/app/imports/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/ui/properties/forms/ContainerForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="attribute-form">
-    <div class="layout row justify-space-between wrap">
+    <div class="layout justify-space-between wrap">
       <text-field
         ref="focusFirst"
         label="Name"
@@ -18,7 +18,7 @@
         />
       </div>
     </div>
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         label="Value"
         suffix="gp"
@@ -65,7 +65,7 @@
         :value="model.tags"
         @change="change('tags', ...arguments)"
       />
-      <div class="layout row justify-center">
+      <div class="layout justify-center">
         <div>
           <smart-switch
             label="Contents are weightless"
@@ -79,7 +79,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
diff --git a/app/imports/ui/properties/forms/DamageForm.vue b/app/imports/ui/properties/forms/DamageForm.vue
index 98ddc878..69ae7b9a 100644
--- a/app/imports/ui/properties/forms/DamageForm.vue
+++ b/app/imports/ui/properties/forms/DamageForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div>
-    <div class="layout row">
+    <div class="layout">
       <text-field
         ref="focusFirst"
         label="Damage"
@@ -41,7 +41,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import DAMAGE_TYPES from '/imports/constants/DAMAGE_TYPES.js';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
diff --git a/app/imports/ui/properties/forms/DamageMultiplierForm.vue b/app/imports/ui/properties/forms/DamageMultiplierForm.vue
index feb29f0c..ff0a9b47 100644
--- a/app/imports/ui/properties/forms/DamageMultiplierForm.vue
+++ b/app/imports/ui/properties/forms/DamageMultiplierForm.vue
@@ -7,7 +7,7 @@
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <smart-select
         label="Damage Type"
         style="flex-basis: 300px;"
@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 	export default {
diff --git a/app/imports/ui/properties/forms/EffectForm.vue b/app/imports/ui/properties/forms/EffectForm.vue
index e017ca9a..6157b74e 100644
--- a/app/imports/ui/properties/forms/EffectForm.vue
+++ b/app/imports/ui/properties/forms/EffectForm.vue
@@ -70,7 +70,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
diff --git a/app/imports/ui/properties/forms/FeatureForm.vue b/app/imports/ui/properties/forms/FeatureForm.vue
index 2998c952..12785e90 100644
--- a/app/imports/ui/properties/forms/FeatureForm.vue
+++ b/app/imports/ui/properties/forms/FeatureForm.vue
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/forms/FolderForm.vue b/app/imports/ui/properties/forms/FolderForm.vue
index 69ea4ea8..8f55fe54 100644
--- a/app/imports/ui/properties/forms/FolderForm.vue
+++ b/app/imports/ui/properties/forms/FolderForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="folder-form">
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         ref="focusFirst"
         label="Name"
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
 
diff --git a/app/imports/ui/properties/forms/ItemConsumedForm.vue b/app/imports/ui/properties/forms/ItemConsumedForm.vue
index 77450787..05a74ac2 100644
--- a/app/imports/ui/properties/forms/ItemConsumedForm.vue
+++ b/app/imports/ui/properties/forms/ItemConsumedForm.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row">
+  <div class="layout">
     <text-field
       label="Item"
       hint="The item tag that will be consumed"
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
diff --git a/app/imports/ui/properties/forms/ItemForm.vue b/app/imports/ui/properties/forms/ItemForm.vue
index 36dd5f02..3297de5d 100644
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/app/imports/ui/properties/forms/ItemForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="item-form">
-    <div class="layout row justify-space-around">
+    <div class="layout justify-space-around">
       <div>
         <icon-picker
           label="Icon"
@@ -18,7 +18,7 @@
         />
       </div>
     </div>
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         ref="focusFirst"
         label="Name"
@@ -33,7 +33,7 @@
         @change="change('plural', ...arguments)"
       />
     </div>
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         label="Value"
         suffix="gp"
@@ -120,7 +120,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
diff --git a/app/imports/ui/properties/forms/ItemsConsumedListForm.vue b/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
index 33b0638f..59106765 100644
--- a/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
+++ b/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
@@ -5,7 +5,7 @@
         v-for="(item, i) in model"
         :key="item._id || i"
       >
-        <div class="layout row align-center">
+        <div class="layout align-center">
           <div style="flex-grow: 1;">
             <item-consumed-form
               :model="item"
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import ItemConsumedForm from '/imports/ui/properties/forms/ItemConsumedForm.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
diff --git a/app/imports/ui/properties/forms/NoteForm.vue b/app/imports/ui/properties/forms/NoteForm.vue
index 9e4830cf..ea2b4849 100644
--- a/app/imports/ui/properties/forms/NoteForm.vue
+++ b/app/imports/ui/properties/forms/NoteForm.vue
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/forms/ProficiencyForm.vue b/app/imports/ui/properties/forms/ProficiencyForm.vue
index 769ffd68..690dc602 100644
--- a/app/imports/ui/properties/forms/ProficiencyForm.vue
+++ b/app/imports/ui/properties/forms/ProficiencyForm.vue
@@ -7,7 +7,7 @@
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <div class="layout row wrap justify-start proficiency-form">
+    <div class="layout wrap justify-start proficiency-form">
       <smart-combobox
         label="Skills"
         class="mr-2"
@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import ProficiencySelect from '/imports/ui/properties/forms/shared/ProficiencySelect.vue';
   import skillListMixin from '/imports/ui/properties/forms/shared/lists/skillListMixin.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
diff --git a/app/imports/ui/properties/forms/ResourcesForm.vue b/app/imports/ui/properties/forms/ResourcesForm.vue
index 18892cf8..a4379466 100644
--- a/app/imports/ui/properties/forms/ResourcesForm.vue
+++ b/app/imports/ui/properties/forms/ResourcesForm.vue
@@ -18,7 +18,7 @@
       @push="({path, value, ack}) => $emit('push', {path: ['itemsConsumed', ...path], value, ack})"
       @pull="({path, ack}) => $emit('pull', {path: ['itemsConsumed', ...path], ack})"
     />
-    <div class="layout row justify-center">
+    <div class="layout justify-center">
       <v-menu
         origin="center center"
         transition="scale-transition"
@@ -38,19 +38,19 @@
           </v-btn>
         </template>
         <v-list>
-          <v-list-tile @click="addAttributesConsumed">
-            <v-list-tile-title>Add Resource</v-list-tile-title>
-          </v-list-tile>
-          <v-list-tile @click="addItemsConsumed">
-            <v-list-tile-title>Add Ammo</v-list-tile-title>
-          </v-list-tile>
+          <v-list-item @click="addAttributesConsumed">
+            <v-list-item-title>Add Resource</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="addItemsConsumed">
+            <v-list-item-title>Add Ammo</v-list-item-title>
+          </v-list-item>
         </v-list>
       </v-menu>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="js">
   import AttributesConsumedListForm from '/imports/ui/properties/forms/AttributesConsumedListForm.vue';
   import ItemsConsumedListForm from '/imports/ui/properties/forms/ItemsConsumedListForm.vue';
   import ItemConsumedSchema from '/imports/api/properties/subSchemas/ItemConsumedSchema.js';
diff --git a/app/imports/ui/properties/forms/RollForm.vue b/app/imports/ui/properties/forms/RollForm.vue
index eaa2e589..dd33bdde 100644
--- a/app/imports/ui/properties/forms/RollForm.vue
+++ b/app/imports/ui/properties/forms/RollForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="roll-form">
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         label="Name"
         :value="model.name"
@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
diff --git a/app/imports/ui/properties/forms/SavingThrowForm.vue b/app/imports/ui/properties/forms/SavingThrowForm.vue
index 18bc2458..6f2dd8cc 100644
--- a/app/imports/ui/properties/forms/SavingThrowForm.vue
+++ b/app/imports/ui/properties/forms/SavingThrowForm.vue
@@ -44,7 +44,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import saveListMixin from '/imports/ui/properties/forms/shared/lists/saveListMixin.js';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
diff --git a/app/imports/ui/properties/forms/SkillForm.vue b/app/imports/ui/properties/forms/SkillForm.vue
index f4beef18..1377c755 100644
--- a/app/imports/ui/properties/forms/SkillForm.vue
+++ b/app/imports/ui/properties/forms/SkillForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="skill-form">
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         ref="focusFirst"
         label="Name"
@@ -55,7 +55,7 @@
         :value="model.tags"
         @change="change('tags', ...arguments)"
       />
-      <div class="layout row justify-center">
+      <div class="layout justify-center">
         <text-field
           label="Base Value"
           class="base-value-field no-flex"
@@ -77,7 +77,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import ProficiencySelect from '/imports/ui/properties/forms/shared/ProficiencySelect.vue';
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import createListOfProperties from '/imports/ui/properties/forms/shared/lists/createListOfProperties.js';
diff --git a/app/imports/ui/properties/forms/SlotFillerForm.vue b/app/imports/ui/properties/forms/SlotFillerForm.vue
index ba09cb79..51e4ef98 100644
--- a/app/imports/ui/properties/forms/SlotFillerForm.vue
+++ b/app/imports/ui/properties/forms/SlotFillerForm.vue
@@ -69,7 +69,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import PROPERTIES from '/imports/constants/PROPERTIES.js';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
diff --git a/app/imports/ui/properties/forms/SlotForm.vue b/app/imports/ui/properties/forms/SlotForm.vue
index a1a11c3e..7d5bd17e 100644
--- a/app/imports/ui/properties/forms/SlotForm.vue
+++ b/app/imports/ui/properties/forms/SlotForm.vue
@@ -55,7 +55,7 @@
       name="Advanced"
       standalone
     >
-      <div class="layout row wrap justify-space-between">
+      <div class="layout wrap justify-space-between">
         <smart-switch
           label="Hide when full"
           style="width: 200px; flex-grow: 0;"
@@ -85,7 +85,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
diff --git a/app/imports/ui/properties/forms/SpellForm.vue b/app/imports/ui/properties/forms/SpellForm.vue
index a85edbae..e3c2a0e0 100644
--- a/app/imports/ui/properties/forms/SpellForm.vue
+++ b/app/imports/ui/properties/forms/SpellForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="spell-form">
-    <div class="layout row wrap justify-space-between">
+    <div class="layout wrap justify-space-between">
       <smart-switch
         label="Always prepared"
         style="width: 200px; flex-grow: 0;"
@@ -26,7 +26,7 @@
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <smart-select
         label="Level"
         class="mx-1"
@@ -58,7 +58,7 @@
       :error-messages="errors.range"
       @change="change('range', ...arguments)"
     />
-    <div class="layout row wrap justify-space-between">
+    <div class="layout wrap justify-space-between">
       <smart-checkbox
         label="Verbal"
         :value="model.verbal"
@@ -127,7 +127,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import FormSection, { FormSections } from '/imports/ui/properties/forms/shared/FormSection.vue';
   import ActionForm from '/imports/ui/properties/forms/ActionForm.vue'
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
diff --git a/app/imports/ui/properties/forms/SpellListForm.vue b/app/imports/ui/properties/forms/SpellListForm.vue
index cb79a32f..5938801d 100644
--- a/app/imports/ui/properties/forms/SpellListForm.vue
+++ b/app/imports/ui/properties/forms/SpellListForm.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="attribute-form">
-    <div class="layout row wrap">
+    <div class="layout wrap">
       <text-field
         ref="focusFirst"
         label="Name"
@@ -64,7 +64,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/forms/ToggleForm.vue b/app/imports/ui/properties/forms/ToggleForm.vue
index 04d5e899..f9c7bc2c 100644
--- a/app/imports/ui/properties/forms/ToggleForm.vue
+++ b/app/imports/ui/properties/forms/ToggleForm.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue b/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
index 4e5edf41..a3dd6017 100644
--- a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
+++ b/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
@@ -21,7 +21,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: {
     errors: {
diff --git a/app/imports/ui/properties/forms/shared/FormSection.vue b/app/imports/ui/properties/forms/shared/FormSection.vue
index ffb35385..c8a96507 100644
--- a/app/imports/ui/properties/forms/shared/FormSection.vue
+++ b/app/imports/ui/properties/forms/shared/FormSection.vue
@@ -25,7 +25,7 @@
   </v-expansion-panel-content>
 </template>
 
-<script>
+<script lang="js">
 import FormSections from '/imports/ui/properties/forms/shared/FormSections.vue';
 export default {
 	components: {
diff --git a/app/imports/ui/properties/forms/shared/FormSections.vue b/app/imports/ui/properties/forms/shared/FormSections.vue
index e7ee5073..a93eabc3 100644
--- a/app/imports/ui/properties/forms/shared/FormSections.vue
+++ b/app/imports/ui/properties/forms/shared/FormSections.vue
@@ -7,6 +7,6 @@
   </v-expansion-panel>
 </template>
 
-<script>
+<script lang="js">
 	export default {}
 </script>
diff --git a/app/imports/ui/properties/forms/shared/ProficiencySelect.vue b/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
index 83bf7c31..92dd81b7 100644
--- a/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
+++ b/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
@@ -19,7 +19,7 @@
   </smart-select>
 </template>
 
-<script>
+<script lang="js">
 	const ICON_SPIN_DURATION = 300;
 	let proficiencyIcon = function(value){
 		if (value == 0.5){
diff --git a/app/imports/ui/properties/shared/ProficiencyIcon.vue b/app/imports/ui/properties/shared/ProficiencyIcon.vue
index 8159f21d..fe55427c 100644
--- a/app/imports/ui/properties/shared/ProficiencyIcon.vue
+++ b/app/imports/ui/properties/shared/ProficiencyIcon.vue
@@ -2,7 +2,7 @@
 	<v-icon v-if="value !== undefined">{{displayedIcon}}</v-icon>
 </template>
 
-<script>
+<script lang="js">
 export default {
 	props: {
 		value: Number,
diff --git a/app/imports/ui/properties/shared/PropertyIcon.vue b/app/imports/ui/properties/shared/PropertyIcon.vue
index b9c3b62e..26f8f2d8 100644
--- a/app/imports/ui/properties/shared/PropertyIcon.vue
+++ b/app/imports/ui/properties/shared/PropertyIcon.vue
@@ -12,7 +12,7 @@
   </v-icon>
 </template>
 
-<script>
+<script lang="js">
 import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
 
 export default {
diff --git a/app/imports/ui/properties/shared/PropertySelector.vue b/app/imports/ui/properties/shared/PropertySelector.vue
index 66698f72..d9b0b1f8 100644
--- a/app/imports/ui/properties/shared/PropertySelector.vue
+++ b/app/imports/ui/properties/shared/PropertySelector.vue
@@ -22,7 +22,7 @@
             @click="$emit('select', type)"
           >
             <div
-              class="layout row align-center justify-center"
+              class="layout align-center justify-center"
               style="min-height: 70px;"
             >
               <v-icon x-large>
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
 export default {
 	data(){return {
diff --git a/app/imports/ui/properties/shared/PropertyViewer.vue b/app/imports/ui/properties/shared/PropertyViewer.vue
index d5e8b115..584931be 100644
--- a/app/imports/ui/properties/shared/PropertyViewer.vue
+++ b/app/imports/ui/properties/shared/PropertyViewer.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
 export default {
 	components: {
diff --git a/app/imports/ui/properties/shared/SelectablePropertyDialog.vue b/app/imports/ui/properties/shared/SelectablePropertyDialog.vue
index 8ba235fd..aacda0c1 100644
--- a/app/imports/ui/properties/shared/SelectablePropertyDialog.vue
+++ b/app/imports/ui/properties/shared/SelectablePropertyDialog.vue
@@ -21,7 +21,7 @@
   </transition-group>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import PropertySelector from '/imports/ui/properties/shared/PropertySelector.vue';
 
diff --git a/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue b/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
index b043324f..523ab5fc 100644
--- a/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row align-center justify-start">
+  <div class="layout align-center justify-start">
     <property-icon
       v-if="!hideIcon"
       class="mr-2"
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 
 export default {
diff --git a/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue b/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue
index 3b5fa654..ddb49eb0 100644
--- a/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row align-center justify-start">
+  <div class="layout align-center justify-start">
     <property-icon
       v-if="!hideIcon"
       class="mr-2"
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 
 export default {
diff --git a/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue b/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
index 4f146aa9..c7765108 100644
--- a/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row align-center justify-start">
+  <div class="layout align-center justify-start">
     <v-icon
       v-if="!hideIcon"
       class="mr-2"
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
 
diff --git a/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue b/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue
index 3ede513d..1f35c7b9 100644
--- a/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row align-center justify-start">
+  <div class="layout align-center justify-start">
     <property-icon
       v-if="!hideIcon"
       class="mr-2"
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 
 export default {
diff --git a/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue b/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
index 1d75b631..a3d73f7a 100644
--- a/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row align-center justify-start">
+  <div class="layout align-center justify-start">
     <v-icon
       v-if="!hideIcon"
       class="mr-2"
@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 // Most of this was copied from EffectViewer and should probably be generalised
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
diff --git a/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue b/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue
index b5dade13..27306603 100644
--- a/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue
+++ b/app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout row align-center justify-start">
+  <div class="layout align-center justify-start">
     <property-icon
       v-if="!hideIcon"
       class="mr-2"
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
 
diff --git a/app/imports/ui/properties/treeNodeViews/TreeNodeView.vue b/app/imports/ui/properties/treeNodeViews/TreeNodeView.vue
index 6a48a281..a0476d96 100644
--- a/app/imports/ui/properties/treeNodeViews/TreeNodeView.vue
+++ b/app/imports/ui/properties/treeNodeViews/TreeNodeView.vue
@@ -6,7 +6,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import treeNodeViewIndex from '/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js';
 
 export default {
diff --git a/app/imports/ui/properties/viewers/ActionViewer.vue b/app/imports/ui/properties/viewers/ActionViewer.vue
index 12f91a69..6d7db992 100644
--- a/app/imports/ui/properties/viewers/ActionViewer.vue
+++ b/app/imports/ui/properties/viewers/ActionViewer.vue
@@ -13,7 +13,7 @@
         {{ model.actionType }}
       </div>
     </div>
-    <div class="layout row align-center justify-space-around">
+    <div class="layout align-center justify-space-around">
       <v-btn
         v-if="context.creatureId"
         flat
@@ -120,7 +120,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 import doAction from '/imports/api/creature/actions/doAction.js';
diff --git a/app/imports/ui/properties/viewers/AdjustmentViewer.vue b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
index d4dafdab..92fc245e 100644
--- a/app/imports/ui/properties/viewers/AdjustmentViewer.vue
+++ b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
@@ -1,6 +1,6 @@
 <template lang="html">
-  <v-list-tile class="effect-viewer">
-    <v-list-tile-avatar>
+  <v-list-item class="effect-viewer">
+    <v-list-item-avatar>
       <v-tooltip bottom>
         <template
           v-if="effectIcon !== 'remove'"
@@ -16,22 +16,22 @@
         </template>
         <span>{{ tooltip }}</span>
       </v-tooltip>
-    </v-list-tile-avatar>
-    <v-list-tile-action class="headline">
+    </v-list-item-avatar>
+    <v-list-item-action class="headline">
       {{ displayedValue }}
-    </v-list-tile-action>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-action>
+    <v-list-item-content>
+      <v-list-item-title>
         <code>{{ model.stat }}</code>
         <template v-if="effectIcon === 'remove'">
           damage
         </template>
-      </v-list-tile-title>
-    </v-list-tile-content>
-  </v-list-tile>
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
   import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
 
diff --git a/app/imports/ui/properties/viewers/AttackViewer.vue b/app/imports/ui/properties/viewers/AttackViewer.vue
index 2bcc8fec..7eb61c23 100644
--- a/app/imports/ui/properties/viewers/AttackViewer.vue
+++ b/app/imports/ui/properties/viewers/AttackViewer.vue
@@ -5,7 +5,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
 export default {
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index 9449254a..6b1cad30 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -60,7 +60,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 	import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
diff --git a/app/imports/ui/properties/viewers/BuffViewer.vue b/app/imports/ui/properties/viewers/BuffViewer.vue
index 08b4d6fd..613b8464 100644
--- a/app/imports/ui/properties/viewers/BuffViewer.vue
+++ b/app/imports/ui/properties/viewers/BuffViewer.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 
diff --git a/app/imports/ui/properties/viewers/ClassLevelViewer.vue b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
index f3416d48..dea1cacb 100644
--- a/app/imports/ui/properties/viewers/ClassLevelViewer.vue
+++ b/app/imports/ui/properties/viewers/ClassLevelViewer.vue
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 
 export default {
diff --git a/app/imports/ui/properties/viewers/ConstantViewer.vue b/app/imports/ui/properties/viewers/ConstantViewer.vue
index 86aeb014..c6e62cb0 100644
--- a/app/imports/ui/properties/viewers/ConstantViewer.vue
+++ b/app/imports/ui/properties/viewers/ConstantViewer.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/viewers/ContainerViewer.vue b/app/imports/ui/properties/viewers/ContainerViewer.vue
index 759b1e42..ad90924a 100644
--- a/app/imports/ui/properties/viewers/ContainerViewer.vue
+++ b/app/imports/ui/properties/viewers/ContainerViewer.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="container-viewer">
     <property-tags :tags="model.tags" />
-    <div class="layout row wrap justify-space-around">
+    <div class="layout wrap justify-space-around">
       <div
         class="mr-3 my-3"
       >
@@ -110,7 +110,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CoinValue from '/imports/ui/components/CoinValue.vue';
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
diff --git a/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue b/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue
index 5aa69763..9f4bafe8 100644
--- a/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue
+++ b/app/imports/ui/properties/viewers/DamageMultiplierViewer.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
 	mixins: [propertyViewerMixin],
diff --git a/app/imports/ui/properties/viewers/DamageViewer.vue b/app/imports/ui/properties/viewers/DamageViewer.vue
index 530ae4ba..2b0ab324 100644
--- a/app/imports/ui/properties/viewers/DamageViewer.vue
+++ b/app/imports/ui/properties/viewers/DamageViewer.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 
 	export default {
diff --git a/app/imports/ui/properties/viewers/EffectViewer.vue b/app/imports/ui/properties/viewers/EffectViewer.vue
index ce8c6cb5..b49466e5 100644
--- a/app/imports/ui/properties/viewers/EffectViewer.vue
+++ b/app/imports/ui/properties/viewers/EffectViewer.vue
@@ -1,6 +1,6 @@
 <template lang="html">
-  <v-list-tile class="effect-viewer">
-    <v-list-tile-avatar>
+  <v-list-item class="effect-viewer">
+    <v-list-item-avatar>
       <v-tooltip bottom>
         <template #activator="{ on }">
           <v-icon
@@ -13,29 +13,29 @@
         </template>
         <span>{{ operation }}</span>
       </v-tooltip>
-    </v-list-tile-avatar>
-    <v-list-tile-action
+    </v-list-item-avatar>
+    <v-list-item-action
       v-if="showValue"
       class="headline"
     >
       {{ displayedValue }}
-    </v-list-tile-action>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-action>
+    <v-list-item-content>
+      <v-list-item-title>
         {{ model.name }}
-      </v-list-tile-title>
-      <v-list-tile-sub-title>
+      </v-list-item-title>
+      <v-list-item-subtitle>
         <code
           v-for="stat in model.stats"
           :key="stat"
           class="mr-1"
         >{{ stat }}</code>
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-  </v-list-tile>
+      </v-list-item-subtitle>
+    </v-list-item-content>
+  </v-list-item>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
   import { isFinite } from 'lodash';
diff --git a/app/imports/ui/properties/viewers/FeatureViewer.vue b/app/imports/ui/properties/viewers/FeatureViewer.vue
index 709a20a2..852150f0 100644
--- a/app/imports/ui/properties/viewers/FeatureViewer.vue
+++ b/app/imports/ui/properties/viewers/FeatureViewer.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
 	mixins: [propertyViewerMixin],
diff --git a/app/imports/ui/properties/viewers/FolderViewer.vue b/app/imports/ui/properties/viewers/FolderViewer.vue
index 48ae8589..32c8cd6a 100644
--- a/app/imports/ui/properties/viewers/FolderViewer.vue
+++ b/app/imports/ui/properties/viewers/FolderViewer.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
 	mixins: [propertyViewerMixin],
diff --git a/app/imports/ui/properties/viewers/ItemViewer.vue b/app/imports/ui/properties/viewers/ItemViewer.vue
index 32a95a4b..3405894c 100644
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/app/imports/ui/properties/viewers/ItemViewer.vue
@@ -3,7 +3,7 @@
     <property-tags :tags="model.tags" />
     <div
       v-if="model.quantity > 1 || model.showIncrement"
-      class="layout row justify-center align-center wrap"
+      class="layout justify-center align-center wrap"
     >
       <div class="display-1">
         {{ model.quantity }}
@@ -20,7 +20,7 @@
         <v-icon>$vuetify.icons.abacus</v-icon>
       </increment-button>
     </div>
-    <div class="layout row wrap justify-space-around">
+    <div class="layout wrap justify-space-around">
       <div
         v-if="model.value !== undefined"
         class="mr-3 my-3"
@@ -133,7 +133,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 import CoinValue from '/imports/ui/components/CoinValue.vue';
diff --git a/app/imports/ui/properties/viewers/NoteViewer.vue b/app/imports/ui/properties/viewers/NoteViewer.vue
index 14a75fc4..77897360 100644
--- a/app/imports/ui/properties/viewers/NoteViewer.vue
+++ b/app/imports/ui/properties/viewers/NoteViewer.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
 	mixins: [propertyViewerMixin],
diff --git a/app/imports/ui/properties/viewers/ProficiencyViewer.vue b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
index 3b682e45..d6118ce1 100644
--- a/app/imports/ui/properties/viewers/ProficiencyViewer.vue
+++ b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
 export default {
diff --git a/app/imports/ui/properties/viewers/RollViewer.vue b/app/imports/ui/properties/viewers/RollViewer.vue
index c77d8b10..0cd8e184 100644
--- a/app/imports/ui/properties/viewers/RollViewer.vue
+++ b/app/imports/ui/properties/viewers/RollViewer.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
   import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
diff --git a/app/imports/ui/properties/viewers/SavingThrowViewer.vue b/app/imports/ui/properties/viewers/SavingThrowViewer.vue
index f55c354d..8bd22491 100644
--- a/app/imports/ui/properties/viewers/SavingThrowViewer.vue
+++ b/app/imports/ui/properties/viewers/SavingThrowViewer.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 
 	export default {
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index bac8052c..839b3daf 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -56,7 +56,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
diff --git a/app/imports/ui/properties/viewers/SlotFillerViewer.vue b/app/imports/ui/properties/viewers/SlotFillerViewer.vue
index 93bf352e..1da985d0 100644
--- a/app/imports/ui/properties/viewers/SlotFillerViewer.vue
+++ b/app/imports/ui/properties/viewers/SlotFillerViewer.vue
@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 
 	export default {
diff --git a/app/imports/ui/properties/viewers/SlotViewer.vue b/app/imports/ui/properties/viewers/SlotViewer.vue
index cb886705..c92ddaae 100644
--- a/app/imports/ui/properties/viewers/SlotViewer.vue
+++ b/app/imports/ui/properties/viewers/SlotViewer.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 
 	export default {
diff --git a/app/imports/ui/properties/viewers/SpellListViewer.vue b/app/imports/ui/properties/viewers/SpellListViewer.vue
index fad7cec2..fb79795e 100644
--- a/app/imports/ui/properties/viewers/SpellListViewer.vue
+++ b/app/imports/ui/properties/viewers/SpellListViewer.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
 	mixins: [propertyViewerMixin],
diff --git a/app/imports/ui/properties/viewers/SpellViewer.vue b/app/imports/ui/properties/viewers/SpellViewer.vue
index b74b0bad..609d4184 100644
--- a/app/imports/ui/properties/viewers/SpellViewer.vue
+++ b/app/imports/ui/properties/viewers/SpellViewer.vue
@@ -25,7 +25,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
 	mixins: [propertyViewerMixin],
diff --git a/app/imports/ui/properties/viewers/ToggleViewer.vue b/app/imports/ui/properties/viewers/ToggleViewer.vue
index 317af155..493c9f76 100644
--- a/app/imports/ui/properties/viewers/ToggleViewer.vue
+++ b/app/imports/ui/properties/viewers/ToggleViewer.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 
 	export default {
diff --git a/app/imports/ui/properties/viewers/shared/PropertyDescription.vue b/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
index 5c3fd568..7ea60160 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
@@ -8,7 +8,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import EmbedInlineComputations from '/imports/ui/components/computation/EmbedInlineComputations.vue';
 
 export default {
diff --git a/app/imports/ui/properties/viewers/shared/PropertyField.vue b/app/imports/ui/properties/viewers/shared/PropertyField.vue
index ab21be4c..80475b7a 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyField.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyField.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
 	props: {
 		name: String,
diff --git a/app/imports/ui/properties/viewers/shared/PropertyName.vue b/app/imports/ui/properties/viewers/shared/PropertyName.vue
index b51d484d..9d266e9f 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyName.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyName.vue
@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script>
+<script lang="js">
 export default {
 	props: {
 		value: String,
diff --git a/app/imports/ui/properties/viewers/shared/PropertyTags.vue b/app/imports/ui/properties/viewers/shared/PropertyTags.vue
index 6a1a1de6..e3537e66 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyTags.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyTags.vue
@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props:{
     tags: {
diff --git a/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue b/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue
index f4a853e9..ff17e2be 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyVariableName.vue
@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script>
+<script lang="js">
 export default {
 	props: {
 		value: String,
diff --git a/app/imports/ui/sharing/ShareDialog.vue b/app/imports/ui/sharing/ShareDialog.vue
index 38272607..3ad13ce7 100644
--- a/app/imports/ui/sharing/ShareDialog.vue
+++ b/app/imports/ui/sharing/ShareDialog.vue
@@ -22,7 +22,7 @@
           params: { id: model._id },
         }).href"
       />
-      <div class="layout row">
+      <div class="layout">
         <text-field
           label="Username or email"
           :value="userSearched"
@@ -40,19 +40,19 @@
         two-lines
         class="sharedWith"
       >
-        <v-list-tile
+        <v-list-item
           v-for="user in sharedUsers"
           :key="user._id"
         >
-          <v-list-tile-content>
-            <v-list-tile-title>
+          <v-list-item-content>
+            <v-list-item-title>
               {{ user.username || user._id }}
-            </v-list-tile-title>
-            <v-list-tile-sub-title>
+            </v-list-item-title>
+            <v-list-item-subtitle>
               {{ user.permission === 'writer' ? 'Can edit' : 'Can view' }}
-            </v-list-tile-sub-title>
-          </v-list-tile-content>
-          <v-list-tile-action>
+            </v-list-item-subtitle>
+          </v-list-item-content>
+          <v-list-item-action>
             <v-menu
               bottom
               left
@@ -66,34 +66,34 @@
                 </v-btn>
               </template>
               <v-list>
-                <v-list-tile
+                <v-list-item
                   v-if="user.permission === 'reader'"
                   @click="updateSharing(user._id, 'writer')"
                 >
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <v-icon>create</v-icon>
-                  </v-list-tile-action>
-                  <v-list-tile-title>Can edit</v-list-tile-title>
-                </v-list-tile>
-                <v-list-tile
+                  </v-list-item-action>
+                  <v-list-item-title>Can edit</v-list-item-title>
+                </v-list-item>
+                <v-list-item
                   v-if="user.permission === 'writer'"
                   @click="updateSharing(user._id, 'reader')"
                 >
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <v-icon>remove_red_eye</v-icon>
-                  </v-list-tile-action>
-                  <v-list-tile-title>View only</v-list-tile-title>
-                </v-list-tile>
-                <v-list-tile @click="updateSharing(user._id, 'none')">
-                  <v-list-tile-action>
+                  </v-list-item-action>
+                  <v-list-item-title>View only</v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="updateSharing(user._id, 'none')">
+                  <v-list-item-action>
                     <v-icon>delete</v-icon>
-                  </v-list-tile-action>
-                  <v-list-tile-title>Remove</v-list-tile-title>
-                </v-list-tile>
+                  </v-list-item-action>
+                  <v-list-item-title>Remove</v-list-item-title>
+                </v-list-item>
               </v-list>
             </v-menu>
-          </v-list-tile-action>
-        </v-list-tile>
+          </v-list-item-action>
+        </v-list-item>
       </v-list>
       <v-fade-transition>
         <v-progress-circular
@@ -113,7 +113,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import {
   setPublic,
   updateUserSharePermissions
diff --git a/app/imports/ui/tabletop/SelectCreaturesDialog.vue b/app/imports/ui/tabletop/SelectCreaturesDialog.vue
index 101f515c..2cdccf4e 100644
--- a/app/imports/ui/tabletop/SelectCreaturesDialog.vue
+++ b/app/imports/ui/tabletop/SelectCreaturesDialog.vue
@@ -29,7 +29,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureListTile from '/imports/ui/creature/CreatureListTile.vue';
diff --git a/app/imports/ui/tabletop/TabletopActionCards.vue b/app/imports/ui/tabletop/TabletopActionCards.vue
index 3f7b1225..2e732f15 100644
--- a/app/imports/ui/tabletop/TabletopActionCards.vue
+++ b/app/imports/ui/tabletop/TabletopActionCards.vue
@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import ActionCard from '/imports/ui/properties/components/actions/ActionCard.vue';
 
diff --git a/app/imports/ui/tabletop/TabletopComponent.vue b/app/imports/ui/tabletop/TabletopComponent.vue
index 8b9660f8..15ddbb95 100644
--- a/app/imports/ui/tabletop/TabletopComponent.vue
+++ b/app/imports/ui/tabletop/TabletopComponent.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import { addCreaturesToTabletop } from '/imports/api/tabletop/Tabletops.js';
 
 import TabletopCreatureCard from '/imports/ui/tabletop/TabletopCreatureCard.vue';
diff --git a/app/imports/ui/tabletop/TabletopCreatureCard.vue b/app/imports/ui/tabletop/TabletopCreatureCard.vue
index 24081ede..afa9cbe1 100644
--- a/app/imports/ui/tabletop/TabletopCreatureCard.vue
+++ b/app/imports/ui/tabletop/TabletopCreatureCard.vue
@@ -9,7 +9,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: {
     model: {
diff --git a/app/imports/ui/tabletop/TabletopLog.vue b/app/imports/ui/tabletop/TabletopLog.vue
index bd0eaa55..35ac1ad1 100644
--- a/app/imports/ui/tabletop/TabletopLog.vue
+++ b/app/imports/ui/tabletop/TabletopLog.vue
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import Messages, { sendMessage } from '/imports/api/tabletop/Messages.js';
 export default {
   props: {
diff --git a/app/imports/ui/tabletop/TabletopMap.vue b/app/imports/ui/tabletop/TabletopMap.vue
index e95e1939..605da292 100644
--- a/app/imports/ui/tabletop/TabletopMap.vue
+++ b/app/imports/ui/tabletop/TabletopMap.vue
@@ -2,7 +2,7 @@
   <div class="tabletop-map" />
 </template>
 
-<script>
+<script lang="js">
 export default {
 }
 </script>
diff --git a/app/imports/ui/tabletop/TabletopToolbar.vue b/app/imports/ui/tabletop/TabletopToolbar.vue
index d5b9913f..16a822f9 100644
--- a/app/imports/ui/tabletop/TabletopToolbar.vue
+++ b/app/imports/ui/tabletop/TabletopToolbar.vue
@@ -13,7 +13,7 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="js">
 import { mapMutations } from 'vuex';
 
 export default {
diff --git a/app/imports/ui/theme.js b/app/imports/ui/theme.js
deleted file mode 100644
index 21240d21..00000000
--- a/app/imports/ui/theme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const theme = {
-  primary: '#B71C1C',
-  secondary: '#424242',
-  accent: '#B71C1C',
-  error: '#FF6D00',
-  warning: '#FFB300',
-  info: '#5C6BC0',
-  success: '#43A047',
-};
-
-const darkTheme = {
-  primary: '#f44336',
-  secondary: '#212121',
-  accent: '#f44336',
-  error: '#FF6D00',
-  warning: '#FFB300',
-  info: '#5C6BC0',
-  success: '#43A047',
-};
-
-export {theme, darkTheme};
diff --git a/app/imports/ui/themes.js b/app/imports/ui/themes.js
new file mode 100644
index 00000000..c8172bc1
--- /dev/null
+++ b/app/imports/ui/themes.js
@@ -0,0 +1,22 @@
+const themes = {
+  light: {
+    primary: '#B71C1C',
+    secondary: '#424242',
+    accent: '#B71C1C',
+    error: '#FF6D00',
+    warning: '#FFB300',
+    info: '#5C6BC0',
+    success: '#43A047',
+  },
+  dark: {
+    primary: '#f44336',
+    secondary: '#212121',
+    accent: '#f44336',
+    error: '#FF6D00',
+    warning: '#FFB300',
+    info: '#5C6BC0',
+    success: '#43A047',
+  }
+}
+
+export default themes;
diff --git a/app/imports/ui/user/DeleteUserAccountDialog.vue b/app/imports/ui/user/DeleteUserAccountDialog.vue
index bebf2032..6188eee6 100644
--- a/app/imports/ui/user/DeleteUserAccountDialog.vue
+++ b/app/imports/ui/user/DeleteUserAccountDialog.vue
@@ -76,7 +76,7 @@
     </div>
     <div
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
         flat
@@ -88,7 +88,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Creatures from '/imports/api/creature/Creatures.js';
 import Libraries from '/imports/api/library/Libraries.js';
diff --git a/app/imports/ui/user/InviteDialog.vue b/app/imports/ui/user/InviteDialog.vue
index 28063609..ffa71f0b 100644
--- a/app/imports/ui/user/InviteDialog.vue
+++ b/app/imports/ui/user/InviteDialog.vue
@@ -42,7 +42,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Invites, { getInviteToken, revokeInvite } from '/imports/api/users/Invites.js';
 
diff --git a/app/imports/ui/user/TierTooLowDialog.vue b/app/imports/ui/user/TierTooLowDialog.vue
index 69d9e34d..05fc04ad 100644
--- a/app/imports/ui/user/TierTooLowDialog.vue
+++ b/app/imports/ui/user/TierTooLowDialog.vue
@@ -30,7 +30,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import TIERS, { getUserTier } from '/imports/api/users/patreon/tiers.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
diff --git a/app/imports/ui/user/UsernameDialog.vue b/app/imports/ui/user/UsernameDialog.vue
index dc62ea31..5952484f 100644
--- a/app/imports/ui/user/UsernameDialog.vue
+++ b/app/imports/ui/user/UsernameDialog.vue
@@ -24,7 +24,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 export default {
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index 6cc1a8ea..70eacffd 100644
--- a/app/imports/ui/vueSetup.js
+++ b/app/imports/ui/vueSetup.js
@@ -1,12 +1,11 @@
 import Vue from 'vue';
-import Vuetify from 'vuetify';
+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';
 import ReactiveProvide from 'vue-reactive-provide';
 import router from '/imports/ui/router.js';
-import { theme } from '/imports/ui/theme.js';
-import 'vuetify/dist/vuetify.min.css';
+import themes from '/imports/ui/themes.js';
 import '/imports/ui/components/global/globalIndex.js';
 import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
 import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
@@ -27,11 +26,7 @@ for (const name in SVG_ICONS) {
 Vue.use(VueMeteorTracker);
 Vue.config.meteor.freeze = true;
 Vue.config.devtools = true;
-Vue.use(Vuetify, {
-  theme,
-  iconfont: 'md',
-  icons,
-});
+Vue.use(Vuetify);
 Vue.use(ReactiveProvide, {
   name: 'reactiveProvide', // default value
 })
@@ -42,6 +37,16 @@ Meteor.startup(() => {
   new Vue({
     router,
     store,
+    vuetify: new Vuetify({
+      theme: {
+        dark: false,
+        themes,
+      },
+      icons: {
+        iconfont: 'md',
+        values: icons,
+      }
+    }),
     ...AppLayout,
   }).$mount('#app');
 });
diff --git a/app/package-lock.json b/app/package-lock.json
index f37de0d9..54628e09 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -165,6 +165,16 @@
         "color-convert": "^1.9.0"
       }
     },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -272,6 +282,12 @@
         }
       }
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -281,6 +297,15 @@
         "concat-map": "0.0.1"
       }
     },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
     "buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -347,6 +372,22 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
     "chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -715,6 +756,35 @@
         }
       }
     },
+    "eslint-plugin-vuetify": {
+      "version": "1.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-1.0.0-beta.8.tgz",
+      "integrity": "sha512-C0EtBYPVRhZnv/fPs32/v8QD73tkphU7tZymbfKb9M20Gr2vkTg9qnnt4Gv1JJpDhDxfOD/8uY4K5oeCbgBc8w==",
+      "dev": true,
+      "requires": {
+        "eslint-plugin-vue": "^6.2.2",
+        "requireindex": "^1.2.0"
+      },
+      "dependencies": {
+        "eslint-plugin-vue": {
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
+          "integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
+          "dev": true,
+          "requires": {
+            "natural-compare": "^1.4.0",
+            "semver": "^5.6.0",
+            "vue-eslint-parser": "^7.0.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "eslint-scope": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
@@ -855,6 +925,15 @@
         "flat-cache": "^2.0.1"
       }
     },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
     "find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -919,6 +998,13 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@@ -1062,6 +1148,12 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
+    "ignore-styles": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-styles/-/ignore-styles-5.0.1.tgz",
+      "integrity": "sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -1203,6 +1295,15 @@
         }
       }
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1226,6 +1327,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
     "is-promise": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
@@ -2214,6 +2321,12 @@
         "abbrev": "1"
       }
     },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -2342,6 +2455,12 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
     "pngjs": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
@@ -2433,6 +2552,15 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
@@ -2481,6 +2609,12 @@
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
+    "requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true
+    },
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2538,6 +2672,15 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sass": {
+      "version": "1.32.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
+      "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -2775,6 +2918,15 @@
         "os-tmpdir": "~1.0.2"
       }
     },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -2914,9 +3066,9 @@
       }
     },
     "vuetify": {
-      "version": "1.5.24",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.24.tgz",
-      "integrity": "sha512-guFOgEgZ8VpSgNXOv1QL2fOliaJBoiyNnf+bBqcXsnIppJGRlW1wyT6Ux7ZlQyphSHs+UK1aJNUjcyAtoOiHWg=="
+      "version": "2.4.8",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.4.8.tgz",
+      "integrity": "sha512-rJYyzSO4Qsm/Q79W4FAUedgIDzUvx2uXzXXQ7OB2z9kAAkVOpTdMFY0CnpBcvlYbXOYy/mJ81/yUCV1ZAvJ3FQ=="
     },
     "vuetify-upload-button": {
       "version": "2.0.2",
diff --git a/app/package.json b/app/package.json
index 79160460..5451004e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -42,22 +42,27 @@
     "vue-reactive-provide": "^0.3.0",
     "vue-router": "^3.1.6",
     "vuedraggable": "^2.23.2",
-    "vuetify": "^1.5.24",
+    "vuetify": "^2.4.8",
     "vuetify-upload-button": "^2.0.2",
     "vuex": "^3.1.3"
   },
   "devDependencies": {
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^7.0.0-alpha.0",
-    "mem": "^6.0.1"
+    "eslint-plugin-vuetify": "^1.0.0-beta.8",
+    "ignore-styles": "^5.0.1",
+    "mem": "^6.0.1",
+    "sass": "^1.32.8"
   },
   "eslintConfig": {
     "extends": [
       "eslint:recommended",
-      "plugin:vue/recommended"
+      "plugin:vue/recommended",
+      "plugin:vue/base"
     ],
     "plugins": [
-      "vue"
+      "vue",
+      "vuetify"
     ],
     "overrides": [
       {
@@ -92,7 +97,8 @@
       "quotes": [
         "error",
         "single"
-      ]
+      ],
+      "vuetify/no-deprecated-classes": "error"
     }
   }
 }