From b1fbf69c040bfe310e49d885600da3fec26bd41d Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Thu, 2 Jan 2025 00:56:22 -0400
Subject: [PATCH 1/6] update to vuetify 2.x

---
 packages/vue/package.json                 |   7 +-
 packages/vue/src/main.ts                  |   6 +-
 packages/vue/src/plugins/vuetify.ts       |  45 ++++----
 packages/vue/src/types/shims-vuetify.d.ts |   5 +
 packages/vue/tsconfig.json                |   2 +-
 packages/vue/vue.config.js                |  24 +++-
 packages/vue/yarn.lock                    | 129 +++++++++++++++++-----
 7 files changed, 155 insertions(+), 63 deletions(-)
 create mode 100644 packages/vue/src/types/shims-vuetify.d.ts

diff --git a/packages/vue/package.json b/packages/vue/package.json
index 1824f699..9e8e9833 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -35,7 +35,8 @@
         "vue-class-component": "^7.2.6",
         "vue-property-decorator": "^9.1.2",
         "vue-router": "^3.6.5",
-        "vuetify": "1.5.24",
+        "vuetify": "^2.7.2",
+        "@mdi/font": "^7.3.67",
         "vuex": "^3.6.1",
         "wavesurfer.js": "^5.1.0",
         "webmidi": "^2.5.1"
@@ -54,6 +55,7 @@
         "@types/pouchdb-browser": "^6.1.3",
         "@types/pouchdb-find": "^6.3.4",
         "@types/simplemde": "^1.11.7",
+        "@types/vuetify": "^2.0.0",
         "@types/wavesurfer.js": "^5.1.0",
         "@types/webmidi": "^2.0.4",
         "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -83,7 +85,8 @@
         "ts-jest": "^27.1.5",
         "typescript": "~5.7.2",
         "util": "^0.12.5",
-        "vue-cli-plugin-vuetify": "^0.2.0",
+        "vue-cli-plugin-vuetify": "^2.5.8",
+        "vuetify-loader": "^1.7.3",
         "vue-template-compiler": "^2.7.16"
     },
     "engines": {
diff --git a/packages/vue/src/main.ts b/packages/vue/src/main.ts
index 89e05002..038d8778 100644
--- a/packages/vue/src/main.ts
+++ b/packages/vue/src/main.ts
@@ -3,12 +3,13 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import 'roboto-fontface/css/roboto/roboto-fontface.css';
 import Vue from 'vue';
 import App from './App.vue';
-import './plugins/vuetify';
+import vuetify from './plugins/vuetify'; // Only import once
 import './registerServiceWorker';
 import router from './router';
 import store from './store';
 import SkldrVue from './SkldrVue';
 import Vuex from 'vuex';
+import 'vuetify/dist/vuetify.min.css';
 
 Vue.config.productionTip = false;
 
@@ -18,5 +19,6 @@ Vue.use(Vuex);
 new SkldrVue({
   router,
   store,
-  render: h => h(App),
+  vuetify, // Add the vuetify instance here
+  render: (h) => h(App),
 }).$mount('#app');
diff --git a/packages/vue/src/plugins/vuetify.ts b/packages/vue/src/plugins/vuetify.ts
index dd0fe862..d5df1167 100644
--- a/packages/vue/src/plugins/vuetify.ts
+++ b/packages/vue/src/plugins/vuetify.ts
@@ -1,28 +1,25 @@
 import Vue from 'vue';
-import Vuetify from 'vuetify';
-import 'vuetify/dist/vuetify.min.css';
-import colors from 'vuetify/es5/util/colors';
+import Vuetify from 'vuetify/lib';
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/dist/vuetify.min.css'; // Add this line
 
-// const theme = {
-//   primary: colors.indigo.base,
-//   secondary: colors.teal.base,
-//   accent: colors.cyan.base,
-//   error: colors.red.base,
-//   warning: colors.amber.base,
-//   info: colors.blue.base,
-//   success: colors.green.base
-// }
+Vue.use(Vuetify);
 
-// const coolers = {
-
-//   primary: "#0e7c7b",
-//   secondary: "#ee6055",
-//   accent: "#93e5ab",
-//   error: "#053c5e",
-//   warning: "#656565",
-// }
-
-Vue.use(Vuetify, {
-  iconfont: 'md',
-  // theme: coolers
+export default new Vuetify({
+  icons: {
+    iconfont: 'mdi',
+  },
+  theme: {
+    themes: {
+      light: {
+        primary: '#1976D2',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107',
+      },
+    },
+  },
 });
diff --git a/packages/vue/src/types/shims-vuetify.d.ts b/packages/vue/src/types/shims-vuetify.d.ts
new file mode 100644
index 00000000..ad4616de
--- /dev/null
+++ b/packages/vue/src/types/shims-vuetify.d.ts
@@ -0,0 +1,5 @@
+declare module 'vuetify/lib' {
+  import Vuetify from 'vuetify';
+  export default Vuetify;
+}
+
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 05b07714..8e7ff005 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -14,7 +14,7 @@
         "esModuleInterop": true,
         "sourceMap": true,
         "baseUrl": ".",
-        "types": ["node", "jest", "@types/jest"],
+        "types": ["node", "jest", "@types/jest", "vuetify/types"],
         "paths": {
             "@/*": ["src/*"]
         },
diff --git a/packages/vue/vue.config.js b/packages/vue/vue.config.js
index 8aa5a38e..ba8e2cb0 100644
--- a/packages/vue/vue.config.js
+++ b/packages/vue/vue.config.js
@@ -1,11 +1,14 @@
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const path = require('path');
+const { defineConfig } = require('@vue/cli-service');
+
+module.exports = defineConfig({
+  transpileDependencies: ['vuetify'], // Add this line for Vuetify 2.x
 
-module.exports = {
   configureWebpack: (config) => {
-    console.log('[config] NODE_ENV:', process.env.NODE_ENV); // prints `development`
-    console.log('[config] VUE_APP_MOCK:', process.env.VUE_APP_MOCK); // prints true
+    console.log('[config] NODE_ENV:', process.env.NODE_ENV);
+    console.log('[config] VUE_APP_MOCK:', process.env.VUE_APP_MOCK);
 
     if (process.env.NODE_ENV === 'production') {
       config.optimization.minimizer[0] = new TerserPlugin(terserOptions);
@@ -57,11 +60,24 @@ module.exports = {
       }),
     ];
   },
+
+  css: {
+    loaderOptions: {
+      sass: {
+        // This is optional but recommended for Vuetify 2.x
+        implementation: require('sass'),
+        sassOptions: {
+          fiber: false,
+        },
+      },
+    },
+  },
+
   publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
   pwa: {
     name: 'Skuilder',
   },
-};
+});
 
 const terserOptions = {
   terserOptions: {
diff --git a/packages/vue/yarn.lock b/packages/vue/yarn.lock
index b450d8d9..ac41fbf0 100644
--- a/packages/vue/yarn.lock
+++ b/packages/vue/yarn.lock
@@ -2076,6 +2076,11 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
+"@mdi/font@^7.3.67":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
+  integrity sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==
+
 "@node-ipc/js-queue@2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz#ac7fe33d766fa53e233ef8fedaf3443a01c5a4cd"
@@ -3687,7 +3692,7 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.0.0, acorn-walk@^8.0.2:
+acorn-walk@^8.0.0, acorn-walk@^8.0.2, acorn-walk@^8.2.0:
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
   integrity sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==
@@ -3699,7 +3704,7 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.4, acorn@^8.0.5, acorn@^8.11.0, acorn@^8.14.0, acorn@^8.2.4, acorn@^8.8.2, acorn@^8.9.0:
+acorn@^8.0.4, acorn@^8.0.5, acorn@^8.11.0, acorn@^8.14.0, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.8.2, acorn@^8.9.0:
   version "8.14.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
@@ -4381,6 +4386,11 @@ call-bound@^1.0.2, call-bound@^1.0.3:
     call-bind-apply-helpers "^1.0.1"
     get-intrinsic "^1.2.6"
 
+callsite@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+  integrity sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -5155,6 +5165,13 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   dependencies:
     ms "2.1.2"
 
+decache@^4.6.0:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/decache/-/decache-4.6.2.tgz#c1df1325a2f36d53922e08f33380f083148199cd"
+  integrity sha512-2LPqkLeu8XWHU8qNCS3kcF6sCcb5zIzvWaAHYSvPfwhdd7mHuah29NssMzrTYyHN4F5oFy2ko9OBYxegtU0FEw==
+  dependencies:
+    callsite "^1.0.0"
+
 decimal.js@^10.2.1:
   version "10.4.3"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
@@ -5895,6 +5912,14 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 filelist@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@@ -6221,27 +6246,27 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+glob@^7.0.0, glob@^7.1.6:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.1"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.6:
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
-  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.1.1"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
@@ -6721,6 +6746,11 @@ internal-slot@^1.1.0:
     hasown "^2.0.2"
     side-channel "^1.1.0"
 
+interpret@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -8589,6 +8619,14 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
+null-loader@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-4.0.1.tgz#8e63bd3a2dd3c64236a4679428632edd0a6dbc6a"
+  integrity sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -9688,6 +9726,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==
+  dependencies:
+    resolve "^1.1.6"
+
 reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz#c905f3386008de95a62315f3ea8630404be19e2f"
@@ -9917,15 +9962,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
   integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
 
-resolve@^1.10.0, resolve@^1.14.2:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-resolve@^1.19.0, resolve@^1.20.0:
+resolve@^1.1.6, resolve@^1.19.0, resolve@^1.20.0:
   version "1.22.10"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
   integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
@@ -9934,6 +9971,14 @@ resolve@^1.19.0, resolve@^1.20.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.10.0, resolve@^1.14.2:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -10158,7 +10203,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@7.x, semver@^7.3.4, semver@^7.3.6, semver@^7.5.3, semver@^7.5.4:
+semver@7.x, semver@^7.1.2, semver@^7.3.4, semver@^7.3.6, semver@^7.5.3, semver@^7.5.4:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
@@ -10314,6 +10359,15 @@ shell-quote@^1.8.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
   integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
 
+shelljs@^0.8.3:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 side-channel-list@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
@@ -11581,10 +11635,14 @@ vue-class-component@^7.2.6:
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
   integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
 
-vue-cli-plugin-vuetify@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.2.1.tgz#fea624e5e4cf3cc2e655d469d441ec151fbb2c23"
-  integrity sha512-kYnDF8a8TmjF89mxHhBIqZPOizGLEXU3MLetw5kfLeG1NBeyejbdEGaUFy59LETvJFnBKYjN4OYFChlZhlLNLg==
+vue-cli-plugin-vuetify@^2.5.8:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.5.8.tgz#a67ef81375fb2cd9f4f912e665e5190de105f2f6"
+  integrity sha512-uqi0/URJETJBbWlQHD1l0pnY7JN8Ytu+AL1fw50HFlGByPa8/xx+mq19GkFXA9FcwFT01IqEc/TkxMPugchomg==
+  dependencies:
+    null-loader "^4.0.1"
+    semver "^7.1.2"
+    shelljs "^0.8.3"
 
 vue-eslint-parser@^9.3.1:
   version "9.4.3"
@@ -11657,10 +11715,21 @@ vue@^2.7.16:
     "@vue/compiler-sfc" "2.7.16"
     csstype "^3.1.0"
 
-vuetify@1.5.24:
-  version "1.5.24"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.5.24.tgz#d5cf6e7289570d5d05f8832a097cd435d36d37df"
-  integrity sha512-guFOgEgZ8VpSgNXOv1QL2fOliaJBoiyNnf+bBqcXsnIppJGRlW1wyT6Ux7ZlQyphSHs+UK1aJNUjcyAtoOiHWg==
+vuetify-loader@^1.7.3:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.9.2.tgz#adcadac71c6d9b24bde42a5b81dfda1871f73f81"
+  integrity sha512-8PP2w7aAs/rjA+Izec6qY7sHVb75MNrGQrDOTZJ5IEnvl+NiFhVpU2iWdRDZ3eMS842cWxSWStvkr+KJJKy+Iw==
+  dependencies:
+    acorn "^8.4.1"
+    acorn-walk "^8.2.0"
+    decache "^4.6.0"
+    file-loader "^6.2.0"
+    loader-utils "^2.0.0"
+
+vuetify@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.7.2.tgz#b2b687e519257d789a63b87c418f98099f38990f"
+  integrity sha512-qr04ww7uzAPQbpk751x4fSdjsJ+zREzjQ/rBlcQGuWS6MIMFMXcXcwvp4+/tnGsULZxPMWfQ0kmZmg5Yc/XzgQ==
 
 vuex@^3.6.1:
   version "3.6.2"

From cfb165da49fcb53bb113a25c04af1b291214f9cd Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Thu, 2 Jan 2025 00:56:59 -0400
Subject: [PATCH 2/6] `primary` does not exist on theme...

after 2.x upgrade
---
 packages/vue/src/courses/piano/NoteDisplay.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/courses/piano/NoteDisplay.vue b/packages/vue/src/courses/piano/NoteDisplay.vue
index 3a74287f..9d4faffd 100644
--- a/packages/vue/src/courses/piano/NoteDisplay.vue
+++ b/packages/vue/src/courses/piano/NoteDisplay.vue
@@ -141,7 +141,7 @@ export default class NoteDisplay extends SkldrVue {
   private style(n: number) {
     let color: string = '#ffffff';
     if (n === this.chroma) {
-      color = this.$vuetify.theme.primary.toString();
+      color = '#1976D2';
     } else if (n === 1 || n === 3 || n === 6 || n === 8 || n === 10 || n === this.black) {
       color = '#000000';
     }

From 3d8b0008ab8b6db3abfd888cbbf4209263a805f9 Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Thu, 2 Jan 2025 00:57:26 -0400
Subject: [PATCH 3/6] vuetify 1->2 migration

---
 packages/vue/src/App.vue | 82 ++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/packages/vue/src/App.vue b/packages/vue/src/App.vue
index e5cf4db6..eefd21a9 100644
--- a/packages/vue/src/App.vue
+++ b/packages/vue/src/App.vue
@@ -3,70 +3,70 @@
     <!-- class="blue darken-2 grey--text text--lighten-5" dark> -->
     <v-navigation-drawer clipped v-model="drawer" enable-resize-watcher fixed app>
       <v-list>
-        <v-list-tile value="true" :to="{ path: '/home' }">
-          <v-list-tile-action>
+        <v-list-item value="true" :to="{ path: '/home' }">
+          <v-list-item-action>
             <v-icon>home</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title> Home </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-        <v-list-tile v-if="true" value="true" :to="{ path: '/study' }">
-          <v-list-tile-action>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title> Home </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="true" value="true" :to="{ path: '/study' }">
+          <v-list-item-action>
             <v-icon>school</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title> Study </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-        <v-list-tile v-if="true" value="true" :to="{ path: '/classrooms' }">
-          <v-list-tile-action>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title> Study </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="true" value="true" :to="{ path: '/classrooms' }">
+          <v-list-item-action>
             <v-icon>people</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title> Classrooms </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-        <v-list-tile v-if="true" value="true" :to="{ path: '/quilts' }">
-          <v-list-tile-action>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title> Classrooms </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="true" value="true" :to="{ path: '/quilts' }">
+          <v-list-item-action>
             <v-icon>bookmarks</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title> Quilts </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-        <!-- <v-list-tile
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title> Quilts </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <!-- <v-list-item
           v-if='true'
           value="true"
           :to="{path: '/edit'}"
         >
-          <v-list-tile-action>
+          <v-list-item-action>
             <v-icon>add_to_queue</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>
               Edit
-            </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-navigation-drawer>
-    <v-toolbar app dense clipped-left>
-      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+    <v-app-bar app dense clipped-left>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <!-- <v-toolbar-title class="text-uppercase">
         <span class="font-weight-thin grey--text text--darken-1">edu</span>
         <span class="grey--text text--darken-2">Quilt</span>
       </v-toolbar-title> -->
       <v-spacer></v-spacer>
       <user-login-and-registration-container />
-    </v-toolbar>
-    <v-content>
+    </v-app-bar>
+    <v-main>
       <v-container>
         <v-slide-y-transition mode="out-in">
           <router-view v-if="$store.state._user" />
         </v-slide-y-transition>
       </v-container>
-    </v-content>
+    </v-main>
     <!-- <v-footer fixed app>
       <span>
        v: <router-link to='/notes'>{{build}}</router-link>

From 73d02832deea9f66ea369f21bad1ea4cc017890b Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Thu, 2 Jan 2025 01:02:32 -0400
Subject: [PATCH 4/6] vuetify 1->2 migration

---
 packages/vue/src/views/Courses.vue | 90 +++++++++---------------------
 1 file changed, 27 insertions(+), 63 deletions(-)

diff --git a/packages/vue/src/views/Courses.vue b/packages/vue/src/views/Courses.vue
index dc07fd2f..f8e6f955 100644
--- a/packages/vue/src/views/Courses.vue
+++ b/packages/vue/src/views/Courses.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid>
-    <v-layout row wrap justify-space-around>
-      <v-flex md4 sm12 xs12>
+    <v-row justify="space-around">
+      <v-col cols="12" sm="12" md="4">
         <v-card>
           <v-toolbar flat>
             <v-toolbar-title>My Registered Quilts</v-toolbar-title>
@@ -10,16 +10,16 @@
           <v-list>
             <transition-group name="component-fade" mode="out-in" key="registered">
               <template v-for="course in registeredCourses">
-                <v-list-tile :key="course._id" avatar>
-                  <v-list-tile-content>
-                    <v-list-tile-title>
+                <v-list-item :key="course._id" avatar>
+                  <v-list-item-content>
+                    <v-list-item-title>
                       <router-link :to="`/q/${course.name.replace(' ', '_')}`">
                         {{ course.name }}
                       </router-link>
                       <v-icon v-if="!course.public">visibility_off</v-icon>
-                    </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
                       small
                       color="secondary"
@@ -28,69 +28,33 @@
                     >
                       Drop
                     </v-btn>
-                  </v-list-tile-action>
-                </v-list-tile>
+                  </v-list-item-action>
+                </v-list-item>
               </template>
             </transition-group>
           </v-list>
         </v-card>
-      </v-flex>
-      <!-- <v-spacer></v-spacer> -->
-      <!-- <v-flex xs12 md4>
-      <v-card>
-        <v-toolbar >
-          <v-toolbar-title>Available Courses</v-toolbar-title>
-        </v-toolbar>
-
-        <v-list >
-            <transition-group
-              appear
-              name='component-fade'
-              mode='out-in'
-              key='available'
-              tag='div'
-            >
-          <template v-for="course in availableCourses">
-            
-            <v-list-tile
-              :key="course._id"
-              avatar
-            >
-
-              <v-list-tile-content>
-                <v-list-tile-title>
-                  {{ course.name }}
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-btn 
-                 small
-                 color="primary"
-                 @click="addCourse(course._id)"
-                 :loading="spinnerMap[course._id] !== undefined"
-                >
-                  Register
-                </v-btn>
-              </v-list-tile-action>
-              
-            </v-list-tile>
-          </template>
-          </transition-group>
-          <v-divider></v-divider>
-            
-        </v-list>
-      </v-card>
-    </v-flex> -->
-    </v-layout>
+      </v-col>
+    </v-row>
 
     <h1 class="display-1">Available Quilts:</h1>
-    <v-layout align-space-between fill-height wrap>
-      <v-flex fill-height pa-2 xs12 sm6 md4 lg3 v-for="course in availableCourses" :key="course._id">
+    <v-row align="space-between" class="fill-height" wrap>
+      <v-col
+        class="fill-height pa-2"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        v-for="course in availableCourses"
+        :key="course._id"
+      >
         <course-stub-card v-on:refresh="refreshData" :_id="course._id" />
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
     <v-dialog v-model="newCourseDialog" fullscreen transition="dialog-bottom-transition" :overlay="false">
-      <v-btn color="primary" dark slot="activator">Start a new Quilt</v-btn>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="primary" dark v-bind="attrs" v-on="on"> Start a new Quilt </v-btn>
+      </template>
       <course-editor v-on:CourseEditingComplete="processResponse($event)" />
     </v-dialog>
   </v-container>

From 519efb1b21a22d70a959e32cc6d5c273255e8936 Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Thu, 2 Jan 2025 02:12:22 -0400
Subject: [PATCH 5/6] vuetify 1->2 migration

---
 .../Components/AudioAutoPlayer.vue            | 10 ++-
 .../Components/MultipleChoiceOption.vue       |  1 +
 .../components/Courses/CourseCardBrowser.vue  | 84 +++++++++++--------
 .../src/components/Courses/CourseEditor.vue   | 82 +++++++++---------
 .../components/Courses/CourseInformation.vue  | 24 +++---
 .../src/components/Courses/CourseStubCard.vue |  6 +-
 .../src/components/Courses/EloModeration.vue  | 20 ++---
 .../src/components/Courses/TagInformation.vue | 20 +++--
 .../vue/src/components/Edit/CardBrowser.vue   | 13 +--
 .../vue/src/components/Edit/TagsInput.vue     |  2 +-
 .../FieldInputs/MediaDragDropUploader.vue     | 16 ++--
 .../vue/src/components/PaginatingToolbar.vue  |  8 +-
 packages/vue/src/components/SkMouseTrap.vue   | 16 ++--
 .../vue/src/components/SnackbarService.vue    |  4 +-
 .../vue/src/components/Study/CardViewer.vue   |  2 +-
 .../components/Study/SessionConfiguration.vue | 30 +++----
 packages/vue/src/components/UserChip.vue      | 42 +++++-----
 packages/vue/src/components/UserLogin.vue     | 18 ++--
 .../UserLoginAndRegistrationContainer.vue     | 12 ++-
 .../vue/src/components/UserRegistration.vue   | 22 +++--
 20 files changed, 229 insertions(+), 203 deletions(-)

diff --git a/packages/vue/src/base-course/Components/AudioAutoPlayer.vue b/packages/vue/src/base-course/Components/AudioAutoPlayer.vue
index e2320bca..da86faba 100644
--- a/packages/vue/src/base-course/Components/AudioAutoPlayer.vue
+++ b/packages/vue/src/base-course/Components/AudioAutoPlayer.vue
@@ -1,6 +1,12 @@
 <template>
-  <v-btn v-on:click="play" large raised icon v-bind:class="playing ? 'primary lighten-3 playing' : 'primary'">
-    <v-icon>volume_up</v-icon>
+  <v-btn
+    @click="play"
+    large
+    icon
+    v-bind:color="playing ? 'primary lighten-3' : 'primary'"
+    :class="{ playing: playing }"
+  >
+    <v-icon>mdi-volume-high</v-icon>
   </v-btn>
 </template>
 
diff --git a/packages/vue/src/base-course/Components/MultipleChoiceOption.vue b/packages/vue/src/base-course/Components/MultipleChoiceOption.vue
index 85fcee56..04d746bd 100644
--- a/packages/vue/src/base-course/Components/MultipleChoiceOption.vue
+++ b/packages/vue/src/base-course/Components/MultipleChoiceOption.vue
@@ -88,6 +88,7 @@ export default class MultipleChoiceOption extends Vue {
   padding-bottom: 5px;
   margin: 10px;
   min-width: 75px; /* prevent tiny click-btns on, eg, one-letter answers */
+  transition: all 0.2s ease-in-out;
 }
 
 .selected {
diff --git a/packages/vue/src/components/Courses/CourseCardBrowser.vue b/packages/vue/src/components/Courses/CourseCardBrowser.vue
index c44f5ebf..bc4d3b0a 100644
--- a/packages/vue/src/components/Courses/CourseCardBrowser.vue
+++ b/packages/vue/src/components/Courses/CourseCardBrowser.vue
@@ -9,52 +9,68 @@
       v-on:prev="prev"
       v-on:next="next"
       v-on:last="last"
-      v-on:set-page="n => setPage(n)"
+      v-on:set-page="(n) => setPage(n)"
     />
     <v-list v-for="c in cards" v-bind:key="c.id" v-bind:class="c.isOpen ? 'blue-grey lighten-5' : ''" two-line dense>
-      <v-list-tile v-bind:class="c.isOpen ? 'elevation-4 font-weight-black blue-grey lighten-4' : ''">
-        <v-list-tile-content>
+      <v-list-item v-bind:class="c.isOpen ? 'elevation-4 font-weight-black blue-grey lighten-4' : ''">
+        <v-list-item-content>
           <template>
-            <v-list-tile-title v-bind:class="c.isOpen ? 'blue-grey--text text--lighten-4' : ''">
+            <v-list-item-title v-bind:class="c.isOpen ? 'blue-grey--text text--lighten-4' : ''">
               {{ cardPreview[c.id] }}
-            </v-list-tile-title>
-            <v-list-tile-sub-title>
+            </v-list-item-title>
+            <v-list-item-subtitle>
               {{ c.id.split('-').length === 3 ? c.id.split('-')[2] : '' }}
-            </v-list-tile-sub-title>
+            </v-list-item-subtitle>
           </template>
-        </v-list-tile-content>
-        <!-- <v-list-tile-action> -->
+        </v-list-item-content>
         <v-speed-dial v-model="c.isOpen" direction="left" transition="slide-x-reverse-transition">
-          <v-btn v-on:click="clearSelections(c.id)" slot="activator" color="disabled" icon fab small v-model="c.isOpen">
-            <v-icon disabled>open_in_full</v-icon>
+          <v-btn
+            v-if="c.isOpen"
+            v-on:click="clearSelections(c.id)"
+            slot="activator"
+            color="disabled"
+            icon
+            fab
+            small
+            v-model="c.isOpen"
+          >
             <v-icon>close</v-icon>
           </v-btn>
+          <v-btn
+            v-else
+            v-on:click="clearSelections(c.id)"
+            slot="activator"
+            color="disabled"
+            icon
+            fab
+            small
+            v-model="c.isOpen"
+          >
+            <v-icon>open_in_full</v-icon>
+          </v-btn>
           <v-btn
             fab
             small
-            :outline="editMode != 'tags'"
+            :outlined="editMode != 'tags'"
             :dark="editMode == 'tags'"
             :color="editMode === 'tags' ? 'teal' : 'teal darken-3'"
             @click.stop="editMode = 'tags'"
           >
-            <v-icon>bookmark</v-icon>
+            <v-icon>mdi-bookmark</v-icon>
           </v-btn>
           <v-btn
             fab
             small
-            :outline="editMode != 'flag'"
+            :outlined="editMode != 'flag'"
             :dark="editMode == 'flag'"
             :color="editMode === 'flag' ? 'error' : 'error darken-3'"
             @click.stop="editMode = 'flag'"
           >
-            <v-icon>flag</v-icon>
+            <v-icon>mdi-flag</v-icon>
           </v-btn>
         </v-speed-dial>
-        <!-- </v-list-tile-action> -->
-      </v-list-tile>
-      <!-- <transition name="component-scale" mode="out-in"> -->
+      </v-list-item>
       <card-loader class="blue-grey lighten-5 elevation-1" v-if="c.isOpen" v-bind:qualified_id="c.id" />
-      <!-- </transition> -->
       <tags-input
         class="ma-3"
         v-show="c.isOpen && editMode === 'tags'"
@@ -62,7 +78,7 @@
         v-bind:cardID="c.id.split('-')[1]"
       />
       <div class="ma-3" v-show="c.isOpen && editMode === 'flag'">
-        <v-btn outline color="error" v-on:click="delBtn = true">Delete this card</v-btn>
+        <v-btn outlined color="error" v-on:click="delBtn = true">Delete this card</v-btn>
         <span v-if="delBtn">
           <span>Are you sure?</span>
           <v-btn color="error" v-on:click="deleteCard(c.id)">Confirm</v-btn>
@@ -77,7 +93,7 @@
       @prev="prev"
       @next="next"
       @last="last"
-      @set-page="n => setPage(n)"
+      @set-page="(n) => setPage(n)"
     />
   </v-card>
 </template>
@@ -140,7 +156,7 @@ export default class CourseCardBrowser extends SkldrVue {
   private delBtn: boolean = false;
 
   private clearSelections(exception: string = '') {
-    this.cards.forEach(card => {
+    this.cards.forEach((card) => {
       if (card.id !== exception) {
         card.isOpen = false;
       }
@@ -152,7 +168,7 @@ export default class CourseCardBrowser extends SkldrVue {
   private async deleteCard(c: string) {
     const res = await this.courseDB.removeCard(c.split('-')[1]);
     if (res.ok) {
-      this.cards = this.cards.filter(card => card.id != c);
+      this.cards = this.cards.filter((card) => card.id != c);
       this.clearSelections();
     }
   }
@@ -189,7 +205,7 @@ export default class CourseCardBrowser extends SkldrVue {
   private async populateTableData() {
     if (this._tag) {
       const tag = await getTag(this._id, this._tag);
-      this.cards = tag.taggedCards.map(c => {
+      this.cards = tag.taggedCards.map((c) => {
         return { id: `${this._id}-${c}`, isOpen: false };
       });
     } else {
@@ -200,7 +216,7 @@ export default class CourseCardBrowser extends SkldrVue {
           limit: 25,
           page: this.page - 1, // -1 for 0-index offset
         })
-      ).map(c => {
+      ).map((c) => {
         return {
           id: c,
           isOpen: false,
@@ -212,13 +228,13 @@ export default class CourseCardBrowser extends SkldrVue {
     const hydratedCardData = (
       await getCourseDocs<CardData>(
         this._id,
-        this.cards.map(c => c.id.split('-')[1]),
+        this.cards.map((c) => c.id.split('-')[1]),
         {
           include_docs: true,
         }
       )
     ).rows
-      .filter(r => {
+      .filter((r) => {
         if (r.doc) {
           return true;
         } else {
@@ -228,30 +244,30 @@ export default class CourseCardBrowser extends SkldrVue {
           return false;
         }
       })
-      .map(r => r.doc!);
+      .map((r) => r.doc!);
 
-    this.cards = this.cards.filter(c => !toRemove.includes(c.id.split('-')[1]));
+    this.cards = this.cards.filter((c) => !toRemove.includes(c.id.split('-')[1]));
 
-    hydratedCardData.forEach(c => {
+    hydratedCardData.forEach((c) => {
       if (c && c.id_displayable_data) {
         // this allowed display. still not finished
         this.cardData[c._id] = c.id_displayable_data;
       }
     });
 
-    this.cards.forEach(async c => {
+    this.cards.forEach(async (c) => {
       // this.log(`generating preview for ${c}`);
       const _courseID: string = c.id.split('-')[0];
       const _cardID: string = c.id.split('-')[1];
 
-      const tmpCardData = hydratedCardData.find(c => c._id == _cardID)!;
+      const tmpCardData = hydratedCardData.find((c) => c._id == _cardID)!;
       // this.log(`tmpCardData: ${JSON.stringify(tmpCardData)}`);
       const tmpView = Courses.getView(tmpCardData.id_view || 'default.question.BlanksCard.FillInView');
 
       // todo 143 / perf: this fetch is non-blocking, but is making a db
       // query for each card. much much better to batch query by allDocs
       // with keys list
-      const tmpDataDocs = tmpCardData.id_displayable_data.map(id => {
+      const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
         return getCourseDoc<DisplayableData>(_courseID, id, {
           attachments: false,
           binary: true,
@@ -260,7 +276,7 @@ export default class CourseCardBrowser extends SkldrVue {
 
       const allDocs = await Promise.all(tmpDataDocs);
       await Promise.all(
-        allDocs.map(doc => {
+        allDocs.map((doc) => {
           const tmpData = [];
           tmpData.unshift(displayableDataToViewData(doc));
 
diff --git a/packages/vue/src/components/Courses/CourseEditor.vue b/packages/vue/src/components/Courses/CourseEditor.vue
index a1ca7a69..1f35ad9a 100644
--- a/packages/vue/src/components/Courses/CourseEditor.vue
+++ b/packages/vue/src/components/Courses/CourseEditor.vue
@@ -1,53 +1,51 @@
 <template>
   <v-card>
-    <v-toolbar card dark flat color="primary">
-      <v-card-title class="title font-weight-regular" primary-title> Start a New Quilt </v-card-title>
+    <v-toolbar flat color="primary" dark>
+      <v-card-title class="text-h6 font-weight-regular"> Start a New Quilt </v-card-title>
       <v-spacer></v-spacer>
       <v-btn icon @click="clearFormAndDismiss">
         <v-icon>close</v-icon>
       </v-btn>
     </v-toolbar>
     <v-form>
-      <v-container grid-list-md>
-        <v-layout wrap column>
-          <v-flex xs12 sm6 md4>
-            <v-text-field
-              v-model="name"
-              counter="30"
-              :rules="nameRules"
-              label="Quilt Name"
-              required
-              hint="Short and descriptive"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 sm6 md4>
-            <v-textarea
-              v-model="description"
-              outline
-              counter="300"
-              :auto-grow="true"
-              label="Quilt Description"
-              hint="Describe the course. What subject is covered? Who might be interested?"
-            >
-            </v-textarea>
-          </v-flex>
-          <v-flex xs12 sm6 md4>
-            <label for="">Public or private quilt?</label>
-            <v-radio-group
-              required
-              hint="Private quilts can be shared and collaborated on with other individual users, but will not be accessable without an invitation. A private quilt can be made public later."
-              persistent-hint
-              row
-              v-model="publicCourse"
-            >
-              <v-radio label="Public" :value="true"></v-radio>
-              <v-radio label="Private" :value="false"></v-radio>
-            </v-radio-group>
-          </v-flex>
-          <v-flex xs12 sm6 md4>
-            <v-btn :loading="updatePending" color="primary" @click="submit"> Save Course Changes </v-btn>
-          </v-flex>
-        </v-layout>
+      <v-container>
+        <v-row cols="12" sm="6" md="4">
+          <v-text-field
+            v-model="name"
+            counter="30"
+            :rules="nameRules"
+            label="Quilt Name"
+            required
+            hint="Short and descriptive"
+          ></v-text-field>
+        </v-row>
+        <v-row cols="12" sm="6" md="4">
+          <v-textarea
+            v-model="description"
+            outlined
+            counter="300"
+            auto-grow
+            label="Quilt Description"
+            hint="Describe the course. What subject is covered? Who might be interested?"
+          >
+          </v-textarea>
+        </v-row>
+        <v-row cols="12" sm="6" md="4">
+          <label>Public or private quilt?</label>
+          <v-radio-group
+            required
+            hint="Private quilts can be shared and collaborated on with other individual users, but will not be accessable without an invitation. A private quilt can be made public later."
+            persistent-hint
+            row
+            v-model="publicCourse"
+          >
+            <v-radio label="Public" :value="true"></v-radio>
+            <v-radio label="Private" :value="false"></v-radio>
+          </v-radio-group>
+        </v-row>
+        <v-row cols="12" sm="6" md="4">
+          <v-btn :loading="updatePending" color="primary" @click="submit"> Save Course Changes </v-btn>
+        </v-row>
       </v-container>
     </v-form>
   </v-card>
diff --git a/packages/vue/src/components/Courses/CourseInformation.vue b/packages/vue/src/components/Courses/CourseInformation.vue
index 84084975..d81363b7 100644
--- a/packages/vue/src/components/Courses/CourseInformation.vue
+++ b/packages/vue/src/components/Courses/CourseInformation.vue
@@ -1,47 +1,47 @@
 <template>
   <div v-if="!updatePending">
-    <h1 class="display-1"><router-link to="/q">Quilts</router-link> / {{ _courseConfig.name }}</h1>
+    <h1 class="text-h4"><router-link to="/q">Quilts</router-link> / {{ _courseConfig.name }}</h1>
 
-    <p class="body-2">
+    <p class="text-body-2">
       {{ _courseConfig.description }}
     </p>
 
     <transition name="component-fade" mode="out-in">
       <div v-if="userIsRegistered">
-        <router-link :to="`/study/${_id}`">
+        <router-link :to="`/study/${_id}`" class="mr-2">
           <v-btn color="success">Start a study session</v-btn>
         </router-link>
-        <router-link :to="`/edit/${_id}`">
+        <router-link :to="`/edit/${_id}`" class="mr-2">
           <v-btn dark color="indigo lighten-1" title="Add content to this course">
-            <v-icon left>add</v-icon>
+            <v-icon left>mdi-plus</v-icon>
             Add content
           </v-btn>
         </router-link>
-        <router-link :to="`/courses/${_id}/elo`">
+        <router-link :to="`/courses/${_id}/elo`" class="mr-2">
           <v-btn dark color="green darken-2" title="Rank course content for difficulty">
-            <v-icon left>style</v-icon>
+            <v-icon left>mdi-format-list-numbered</v-icon>
             Arrange
           </v-btn>
         </router-link>
-        <v-btn color="error" small outline @click="drop">Drop this course</v-btn>
+        <v-btn color="error" small outlined @click="drop">Drop this course</v-btn>
       </div>
       <div v-else>
         <v-btn color="primary" @click="register">Register</v-btn>
         <router-link :to="`/q/${_id}/preview`">
-          <v-btn outline color="primary">Start a trial study session</v-btn>
+          <v-btn outlined color="primary">Start a trial study session</v-btn>
         </router-link>
       </div>
     </transition>
     <midi-config v-if="isPianoCourse" :_id="_id" />
 
     <v-card class="my-2">
-      <v-toolbar dense>
+      <v-app-bar dense>
         <v-toolbar-title>Tags</v-toolbar-title>
         <v-spacer></v-spacer>
         {{ tags.length }}
-      </v-toolbar>
+      </v-app-bar>
       <v-card-text>
-        <v-chip outline v-for="(tag, i) in tags" v-bind:key="i">
+        <v-chip outlined v-for="(tag, i) in tags" v-bind:key="i" class="mr-2 mb-2">
           <!-- todo: -->
           <!-- <router-link :to="`/q/${_courseConfig.name}/tags/${tag.name}`"> -->
           <router-link :to="`/q/${_id}/tags/${tag.name}`">
diff --git a/packages/vue/src/components/Courses/CourseStubCard.vue b/packages/vue/src/components/Courses/CourseStubCard.vue
index 7a01b306..ea55ab6e 100644
--- a/packages/vue/src/components/Courses/CourseStubCard.vue
+++ b/packages/vue/src/components/Courses/CourseStubCard.vue
@@ -1,12 +1,12 @@
 <template>
   <v-card v-if="!updatePending">
-    <v-toolbar dense flat>
+    <v-app-bar dense flat>
       <v-toolbar-title @click="routeToCourse">
         {{ _courseConfig.name }}
       </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-icon v-if="isPrivate">visibility_off</v-icon>
-    </v-toolbar>
+      <v-icon v-if="isPrivate">mdi-eye-off</v-icon>
+    </v-app-bar>
     <v-card-text>
       Questions: {{ questionCount }}
 
diff --git a/packages/vue/src/components/Courses/EloModeration.vue b/packages/vue/src/components/Courses/EloModeration.vue
index ed8a63ee..086b3e00 100644
--- a/packages/vue/src/components/Courses/EloModeration.vue
+++ b/packages/vue/src/components/Courses/EloModeration.vue
@@ -1,19 +1,19 @@
 <template>
-  <v-layout column v-if="!updatePending">
-    <v-flex xs1>
+  <v-row column v-if="!updatePending">
+    <v-row cols="1">
       <h1>Which seems <em>harder</em>?</h1>
-    </v-flex>
+    </v-row>
 
-    <v-layout row wrap>
-      <v-btn v-on:click="vote('a')" color="success ma-5"><v-icon>check</v-icon></v-btn>
+    <v-row>
+      <v-btn v-on:click="vote('a')" color="success" class="ma-5"><v-icon>check</v-icon></v-btn>
       <card-loader class="ma-2" v-bind:qualified_id="id1" />
-    </v-layout>
+    </v-row>
 
-    <v-layout row wrap>
-      <v-btn v-on:click="vote('b')" color="success ma-5"><v-icon>check</v-icon></v-btn>
+    <v-row>
+      <v-btn v-on:click="vote('b')" color="success" class="ma-5"><v-icon>check</v-icon></v-btn>
       <card-loader class="ma-2" v-bind:qualified_id="id2" />
-    </v-layout>
-  </v-layout>
+    </v-row>
+  </v-row>
 </template>
 
 <script lang="ts">
diff --git a/packages/vue/src/components/Courses/TagInformation.vue b/packages/vue/src/components/Courses/TagInformation.vue
index 6099e913..4f14f602 100644
--- a/packages/vue/src/components/Courses/TagInformation.vue
+++ b/packages/vue/src/components/Courses/TagInformation.vue
@@ -1,13 +1,15 @@
 <template>
   <div>
     <!-- todo: -->
-    <h1><router-link :to="`/q/${course.name}`">{{course.name}}</router-link> > Tag: {{ tag.name }}</h1>
+    <h1>
+      <router-link :to="`/q/${course.name}`">{{ course.name }}</router-link> > Tag: {{ tag.name }}
+    </h1>
     <br />
     <p>{{ tag.taggedCards.length }} card{{ tag.taggedCards.length === 1 ? '' : 's' }}</p>
 
     <v-text-field
       ref="snippetEditor"
-      box
+      outlined
       v-bind:readonly="!editingSnippet"
       v-bind:counter="editingSnippet"
       label="Brief tag description:"
@@ -17,12 +19,12 @@
     >
       <template v-slot:prepend>
         <span v-if="editingSnippet">
-          <v-icon flat icon color="primary" v-on:click="saveSnippet">save</v-icon>
+          <v-icon color="primary" @click="saveSnippet">mdi-content-save</v-icon>
         </span>
-        <v-icon v-else flat icon color="primary" v-on:click="editSnippet">edit</v-icon>
+        <v-icon v-else color="primary" @click="editSnippet">mdi-pencil</v-icon>
       </template>
       <template v-slot:append>
-        <v-icon v-if="editingSnippet" icon v-on:click="cancelEditSnippet">cancel</v-icon>
+        <v-icon v-if="editingSnippet" @click="cancelEditSnippet">mdi-cancel</v-icon>
         <v-fade-transition leave-absolute>
           <!-- spinner while awaiting async write of edits -->
           <v-progress-circular v-if="snippetSaving" size="20" color="info" indeterminate></v-progress-circular>
@@ -32,7 +34,7 @@
 
     <v-text-field
       ref="wikiEditor"
-      box
+      outlined
       v-bind:readonly="!editingWiki"
       v-bind:counter="editingWiki"
       label="Extended tag description:"
@@ -42,12 +44,12 @@
     >
       <template v-slot:prepend>
         <span v-if="editingWiki">
-          <v-icon flat icon color="primary" v-on:click="saveWiki">save</v-icon>
+          <v-icon color="primary" @click="saveWiki">mdi-content-save</v-icon>
         </span>
-        <v-icon v-else flat icon color="primary" v-on:click="editWiki">edit</v-icon>
+        <v-icon v-else color="primary" @click="editWiki">mdi-pencil</v-icon>
       </template>
       <template v-slot:append>
-        <v-icon v-if="editingWiki" icon v-on:click="cancelEditWiki">cancel</v-icon>
+        <v-icon v-if="editingWiki" @click="cancelEditWiki">mdi-cancel</v-icon>
         <v-fade-transition leave-absolute>
           <!-- spinner while awaiting async write of edits -->
           <v-progress-circular v-if="wikiSaving" size="20" color="info" indeterminate></v-progress-circular>
diff --git a/packages/vue/src/components/Edit/CardBrowser.vue b/packages/vue/src/components/Edit/CardBrowser.vue
index 5043db78..4590009e 100644
--- a/packages/vue/src/components/Edit/CardBrowser.vue
+++ b/packages/vue/src/components/Edit/CardBrowser.vue
@@ -1,13 +1,8 @@
 <template>
-  <v-layout column wrap align-center justify-center>
-    <CardViewer
-     :view="views[viewIndex]"
-     :data="data" 
-     :course_id="'[browsing]'" 
-     :card_id="'[browsing]'"
-    />
+  <v-row column align="center" justify="center">
+    <CardViewer :view="views[viewIndex]" :data="data" :course_id="'[browsing]'" :card_id="'[browsing]'" />
     <br /><br />
-    <div class="subheading pa-2">
+    <div class="text-subtitle-1 pa-2">
       <v-btn v-if="spinner" @click="decrementView" icon color="accent">
         <v-icon>chevron_left</v-icon>
       </v-btn>
@@ -16,7 +11,7 @@
         <v-icon alt="Hello">chevron_right</v-icon>
       </v-btn>
     </div>
-  </v-layout>
+  </v-row>
 </template>
 
 <script lang="ts">
diff --git a/packages/vue/src/components/Edit/TagsInput.vue b/packages/vue/src/components/Edit/TagsInput.vue
index a6be3833..9f2b9b7b 100644
--- a/packages/vue/src/components/Edit/TagsInput.vue
+++ b/packages/vue/src/components/Edit/TagsInput.vue
@@ -19,7 +19,7 @@
     </vue-tags-input>
 
     <v-btn v-if="!hideSubmit" color="success" @click="submit" :loading="loading">Save Changes</v-btn>
-  </div>
+  </div> 
 </template>
 
 <script lang="ts">
diff --git a/packages/vue/src/components/Edit/ViewableDataInputForm/FieldInputs/MediaDragDropUploader.vue b/packages/vue/src/components/Edit/ViewableDataInputForm/FieldInputs/MediaDragDropUploader.vue
index 806f6771..80cd1bd8 100644
--- a/packages/vue/src/components/Edit/ViewableDataInputForm/FieldInputs/MediaDragDropUploader.vue
+++ b/packages/vue/src/components/Edit/ViewableDataInputForm/FieldInputs/MediaDragDropUploader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <label class="headline">Add media:</label>
+  <div class="mr-2 mb-2">
+    <v-label class="text-h5">Add media:</v-label>
     <div
       class="drop-zone"
       v-bind:class="{ 'drop-zone--over': isDragging }"
@@ -15,7 +15,7 @@
         @change="handleFileInput"
         accept="image/*,audio/*"
         multiple
-        style="display: none;"
+        style="display: none"
       />
       <template>
         <div v-for="(item, index) in mediaItems" :key="index" class="media-item">
@@ -104,7 +104,7 @@ export default class MediaDragDropUploader extends FieldInput {
   }
 
   processFiles(files: FileList) {
-    Array.from(files).forEach(file => {
+    Array.from(files).forEach((file) => {
       this.addMediaItem(file);
     });
     this.updateStore();
@@ -119,7 +119,7 @@ export default class MediaDragDropUploader extends FieldInput {
     };
 
     if (type === 'image') {
-      this.createThumbnail(file).then(thumbnailUrl => {
+      this.createThumbnail(file).then((thumbnailUrl) => {
         item.thumbnailUrl = thumbnailUrl;
 
         // update render, because mediaItems.push() has likely already completed
@@ -133,7 +133,7 @@ export default class MediaDragDropUploader extends FieldInput {
   }
 
   async createThumbnail(file: File): Promise<string> {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       const reader = new FileReader();
       reader.onload = (e: ProgressEvent<FileReader>) => {
         resolve(e.target?.result as string);
@@ -149,7 +149,7 @@ export default class MediaDragDropUploader extends FieldInput {
   }
 
   public clearData() {
-    this.mediaItems.forEach(item => {
+    this.mediaItems.forEach((item) => {
       URL.revokeObjectURL(item.url);
     });
     this.mediaItems = [];
@@ -173,7 +173,7 @@ export default class MediaDragDropUploader extends FieldInput {
     // Then add current items
     let imageCount = 0;
     let audioCount = 0;
-    this.mediaItems.forEach(item => {
+    this.mediaItems.forEach((item) => {
       if (item.type === 'image') {
         imageCount++;
         this.store[`image-${imageCount}`] = {
diff --git a/packages/vue/src/components/PaginatingToolbar.vue b/packages/vue/src/components/PaginatingToolbar.vue
index 4c64b2dc..cb10e2c9 100644
--- a/packages/vue/src/components/PaginatingToolbar.vue
+++ b/packages/vue/src/components/PaginatingToolbar.vue
@@ -3,10 +3,10 @@
     <v-toolbar-title>{{ title }}</v-toolbar-title>
     &nbsp;&nbsp; {{ subtitle }}
     <v-spacer></v-spacer>
-    <v-btn v-on:click="() => $emit('first')" flat icon color="secondary" v-bind:disabled="page == 1">
+    <v-btn v-on:click="() => $emit('first')" text icon color="secondary" v-bind:disabled="page == 1">
       <v-icon>first_page</v-icon>
     </v-btn>
-    <v-btn v-on:click="() => $emit('prev')" flat icon color="secondary" v-bind:disabled="page == 1">
+    <v-btn v-on:click="() => $emit('prev')" text icon color="secondary" v-bind:disabled="page == 1">
       <v-icon>chevron_left</v-icon>
     </v-btn>
     <v-select
@@ -15,10 +15,10 @@
       v-model="page"
       class="pageSelect"
     ></v-select>
-    <v-btn v-on:click="() => $emit('next')" flat icon color="secondary" v-bind:disabled="page == pages.length">
+    <v-btn v-on:click="() => $emit('next')" text icon color="secondary" v-bind:disabled="page == pages.length">
       <v-icon>chevron_right</v-icon>
     </v-btn>
-    <v-btn v-on:click="() => $emit('last')" flat icon color="secondary" v-bind:disabled="page == pages.length">
+    <v-btn v-on:click="() => $emit('last')" text icon color="secondary" v-bind:disabled="page == pages.length">
       <v-icon>last_page</v-icon>
     </v-btn>
   </v-toolbar>
diff --git a/packages/vue/src/components/SkMouseTrap.vue b/packages/vue/src/components/SkMouseTrap.vue
index cbb6fa2d..a5f45319 100644
--- a/packages/vue/src/components/SkMouseTrap.vue
+++ b/packages/vue/src/components/SkMouseTrap.vue
@@ -1,8 +1,10 @@
 <template>
   <v-dialog max-width="500px" transition="dialog-transition" v-if="display">
-    <v-btn fab dark color="primary" slot="activator">
-      <v-icon dark>keyboard</v-icon>
-    </v-btn>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn fab dark color="primary" v-bind="attrs" v-on="on">
+        <v-icon dark>keyboard</v-icon>
+      </v-btn>
+    </template>
 
     <v-card>
       <v-toolbar color="teal" dark>
@@ -10,15 +12,15 @@
         <v-spacer></v-spacer>
       </v-toolbar>
       <v-list>
-        <v-list-tile v-for="hk in commands" :key="hk.hotkey">
-          <v-btn outline color="black">
+        <v-list-item v-for="hk in commands" :key="hk.hotkey">
+          <v-btn outlined color="black">
             {{ hk.hotkey }}
           </v-btn>
           <v-spacer></v-spacer>
-          <span justify-end>
+          <span class="text-right">
             {{ hk.command }}
           </span>
-        </v-list-tile>
+        </v-list-item>
       </v-list>
     </v-card>
   </v-dialog>
diff --git a/packages/vue/src/components/SnackbarService.vue b/packages/vue/src/components/SnackbarService.vue
index 6ce8cfeb..84233ee2 100644
--- a/packages/vue/src/components/SnackbarService.vue
+++ b/packages/vue/src/components/SnackbarService.vue
@@ -10,8 +10,8 @@
       :color="getColor(snack)"
     >
       {{ snack.text }}
-      <v-btn icon flat @click="close()">
-        <v-icon>close</v-icon>
+      <v-btn icon text @click="close()">
+        <v-icon>mdi-close</v-icon>
       </v-btn>
     </v-snackbar>
   </div>
diff --git a/packages/vue/src/components/Study/CardViewer.vue b/packages/vue/src/components/Study/CardViewer.vue
index 0d3b7f61..236b5eab 100644
--- a/packages/vue/src/components/Study/CardViewer.vue
+++ b/packages/vue/src/components/Study/CardViewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="elevation-12">
+  <v-card elevation="12">
     <transition name="component-fade" mode="out-in">
       <component
         class="cardView"
diff --git a/packages/vue/src/components/Study/SessionConfiguration.vue b/packages/vue/src/components/Study/SessionConfiguration.vue
index 73c99184..efa83c8e 100644
--- a/packages/vue/src/components/Study/SessionConfiguration.vue
+++ b/packages/vue/src/components/Study/SessionConfiguration.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasRegistrations">
-    <div class="display-1">Select your quilts</div>
+    <div class="text-h4">Select your quilts</div>
     <table width="100%">
       <th>
         <v-checkbox
@@ -39,11 +39,11 @@
       v-model="cardCount"
     /> -->
     <v-text-field
-      class="flex xs12 sm6 md4 lg3 headline"
+      class="col-12 col-sm-6 col-md-4 col-lg-3 text-h5"
       solo
-      prepend-inner-icon="access_time"
-      prepend-icon="remove"
-      append-outer-icon="add"
+      prepend-inner-icon="mdi-clock-outline"
+      prepend-icon="mdi-minus"
+      append-outer-icon="mdi-plus"
       :suffix="timeLimit > 1 ? '(minutes)' : '(minute)'"
       hint="Time Limit for this Session"
       ref="numberField"
@@ -53,9 +53,9 @@
       @click:prepend="timeLimit--"
       @click:append-outer="timeLimit++"
     />
-    <v-btn class="flex" color="success" @click="startSession">Start Studying!</v-btn>
+    <v-btn color="success" @click="startSession">Start Studying!</v-btn>
   </div>
-  <div v-else class="display-1">
+  <div v-else class="text-h4">
     <p>You don't have anything to study!</p>
     <p>Head over to the <router-link to="/quilts">Quilts</router-link> page to find something for you.</p>
   </div>
@@ -114,10 +114,10 @@ export default class SessionConfiguration extends SkldrVue {
   private toggleAll(): void {
     this.log(`Toggling all courses`);
 
-    this.activeCourses.forEach(crs => {
+    this.activeCourses.forEach((crs) => {
       crs.selected = this.allSelected;
     });
-    this.activeClasses.forEach(cl => {
+    this.activeClasses.forEach((cl) => {
       cl.selected = this.allSelected;
     });
 
@@ -127,13 +127,13 @@ export default class SessionConfiguration extends SkldrVue {
   private startSession() {
     SkldrMouseTrap.reset();
     const selectedCourses: ContentSourceID[] = this.activeCourses
-      .filter(c => c.selected)
-      .map(c => {
+      .filter((c) => c.selected)
+      .map((c) => {
         return { type: 'course', id: c.courseID };
       });
     const selectedClassrooms: ContentSourceID[] = this.activeClasses
-      .filter(cl => cl.selected)
-      .map(cl => {
+      .filter((cl) => cl.selected)
+      .map((cl) => {
         return { type: 'classroom', id: cl.classID };
       });
 
@@ -157,7 +157,7 @@ export default class SessionConfiguration extends SkldrVue {
     this.log(`Active classes: ${JSON.stringify(classes)}`);
 
     await Promise.all(
-      classes.map(c =>
+      classes.map((c) =>
         (async (classID: string) => {
           const classDb = await StudentClassroomDB.factory(classID);
           activeClasses.push({
@@ -173,7 +173,7 @@ export default class SessionConfiguration extends SkldrVue {
   }
 
   private async getActiveCourses() {
-    this.activeCourses = (await this.$store.state._user!.getActiveCourses()).map(c => {
+    this.activeCourses = (await this.$store.state._user!.getActiveCourses()).map((c) => {
       return {
         ...c,
         selected: true,
diff --git a/packages/vue/src/components/UserChip.vue b/packages/vue/src/components/UserChip.vue
index 81dc0fda..98ca8502 100644
--- a/packages/vue/src/components/UserChip.vue
+++ b/packages/vue/src/components/UserChip.vue
@@ -1,37 +1,41 @@
 <template>
   <v-badge overlap color="accent" v-model="hasNewItems">
-    <span slot="badge" dark small>{{ items.length }}</span>
+    <template v-slot:badge>
+      <span dark small>{{ items.length }}</span>
+    </template>
 
     <v-menu offset-y transition="scale-transition">
-      <v-chip slot="activator">
-        <v-avatar class="primary">
-          <v-icon dark>school</v-icon>
-        </v-avatar>
-        {{ username }}
-      </v-chip>
+      <template v-slot:activator="{ on, attrs }">
+        <v-chip v-bind="attrs" v-on="on">
+          <v-avatar class="primary">
+            <v-icon dark>school</v-icon>
+          </v-avatar>
+          {{ username }}
+        </v-chip>
+      </template>
 
       <v-list>
         <!-- eventual notifications bar -->
-        <v-list-tile v-for="item in items" :key="item" @click="dismiss(item)">
-          <v-list-tile-title>{{ item }}</v-list-tile-title>
-        </v-list-tile>
+        <v-list-item v-for="item in items" :key="item" @click="dismiss(item)">
+          <v-list-item-title>{{ item }}</v-list-item-title>
+        </v-list-item>
 
         <v-divider v-if="items.length" />
 
-        <v-list-tile @click="gotoStats">
+        <v-list-item @click="gotoStats">
           <v-icon left>trending_up</v-icon>
-          <v-list-tile-title>Stats</v-list-tile-title>
-        </v-list-tile>
+          <v-list-item-title>Stats</v-list-item-title>
+        </v-list-item>
 
-        <v-list-tile @click="gotoSettings">
+        <v-list-item @click="gotoSettings">
           <v-icon left>settings</v-icon>
-          <v-list-tile-title>Settings</v-list-tile-title>
-        </v-list-tile>
+          <v-list-item-title>Settings</v-list-item-title>
+        </v-list-item>
 
-        <v-list-tile @click="logout">
+        <v-list-item @click="logout">
           <v-icon left>launch</v-icon>
-          <v-list-tile-title>Log out</v-list-tile-title>
-        </v-list-tile>
+          <v-list-item-title>Log out</v-list-item-title>
+        </v-list-item>
       </v-list>
     </v-menu>
   </v-badge>
diff --git a/packages/vue/src/components/UserLogin.vue b/packages/vue/src/components/UserLogin.vue
index 8c7b2e9f..4dcf7b08 100644
--- a/packages/vue/src/components/UserLogin.vue
+++ b/packages/vue/src/components/UserLogin.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- <v-container grid-list-xs align-center class='login'> -->
 
-  <v-layout row wrap align-center>
-    <v-flex>
+  <v-row align="center">
+    <v-col>
       <v-card>
         <v-card-title v-if="!loginRoute" class="headline grey lighten-2" primary-title> Log In </v-card-title>
 
@@ -24,23 +24,23 @@
               hint=""
               min="0"
               :append-icon="passwordVisible ? 'visibility_off' : 'visibility'"
-              :append-icon-cb="() => (passwordVisible = !passwordVisible)"
+              @click:append="() => (passwordVisible = !passwordVisible)"
               :type="passwordVisible ? 'text' : 'password'"
               v-model="password"
             ></v-text-field>
-            <v-btn type="submit" :loading="awaitingResponse" @click="login" :color="buttonStatus.color">
+            <v-btn class="mr-2" type="submit" :loading="awaitingResponse" @click="login" :color="buttonStatus.color">
               <v-icon left dark>lock_open</v-icon>
               Log In
             </v-btn>
             <router-link v-if="loginRoute" to="signup">
-              <v-btn flat>Create New Account</v-btn>
+              <v-btn text>Create New Account</v-btn>
             </router-link>
-            <v-btn v-else @click="toggle" flat> Create New Account </v-btn>
+            <v-btn v-else @click="toggle" text> Create New Account </v-btn>
           </v-form>
         </v-card-text>
       </v-card>
-    </v-flex>
-  </v-layout>
+    </v-col>
+  </v-row>
   <!-- </v-container> -->
 </template>
 
@@ -86,7 +86,7 @@ export default class UserLogin extends SkldrVue {
     try {
       // #172 starting point - why is the pre-existing _user being referenced here?
       const res = await this.$store.state._user!.login(this.username, this.password);
-      this.$store.state._user!.getConfig().then(cfg => {
+      this.$store.state._user!.getConfig().then((cfg) => {
         this.$store.state.config = cfg;
       });
       this.$store.state.userLoginAndRegistrationContainer.loggedIn = true;
diff --git a/packages/vue/src/components/UserLoginAndRegistrationContainer.vue b/packages/vue/src/components/UserLoginAndRegistrationContainer.vue
index 6aafc380..8f450c60 100644
--- a/packages/vue/src/components/UserLoginAndRegistrationContainer.vue
+++ b/packages/vue/src/components/UserLoginAndRegistrationContainer.vue
@@ -1,12 +1,16 @@
 <template>
   <transition v-if="$store.state._user && display" name="component-fade" mode="out-in">
     <div v-if="guestMode">
-      <v-dialog v-model="regDialog" width="500px" lazy>
-        <v-btn small slot="activator" color="success"> Sign Up </v-btn>
+      <v-dialog v-model="regDialog" width="500px">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn class="mr-2" small color="success" v-bind="attrs" v-on="on">Sign Up</v-btn>
+        </template>
         <UserRegistration @toggle="toggle" />
       </v-dialog>
-      <v-dialog lazy v-model="loginDialog" width="500px">
-        <v-btn small slot="activator" color="success"> Log In </v-btn>
+      <v-dialog v-model="loginDialog" width="500px">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small color="success" v-bind="attrs" v-on="on">Log In</v-btn>
+        </template>
         <UserLogin @toggle="toggle" />
       </v-dialog>
     </div>
diff --git a/packages/vue/src/components/UserRegistration.vue b/packages/vue/src/components/UserRegistration.vue
index 4329db1d..1152a91c 100644
--- a/packages/vue/src/components/UserRegistration.vue
+++ b/packages/vue/src/components/UserRegistration.vue
@@ -1,8 +1,6 @@
 <template>
   <v-card>
-    <v-card-title v-if="!registrationRoute" class="headline grey lighten-2" primary-title>
-      Create an Account
-    </v-card-title>
+    <v-card-title v-if="!registrationRoute" class="text-h5 grey lighten-2"> Create an Account </v-card-title>
 
     <v-card-text>
       <v-form onsubmit="return false;">
@@ -14,24 +12,24 @@
           label="Choose a Username"
           id=""
           v-model="username"
-          prepend-icon="account_circle"
+          prepend-icon="mdi-account-circle"
           :error="usernameError"
           :hint="usernameHint"
         ></v-text-field>
         <v-text-field
-          prepend-icon="lock"
+          prepend-icon="mdi-lock"
           name="name"
           hover="Show password"
           label="Create a password"
           hint=""
           min="4"
-          :append-icon="passwordVisible ? 'visibility_off' : 'visibility'"
+          :append-icon="passwordVisible ? 'mdi-eye-off' : 'mdi-eye'"
           @click:append="() => (passwordVisible = !passwordVisible)"
           :type="passwordVisible ? 'text' : 'password'"
           v-model="password"
         ></v-text-field>
         <v-text-field
-          prepend-icon="lock"
+          prepend-icon="mdi-lock"
           name="name"
           hover="Show password"
           label="Retype your password"
@@ -47,16 +45,16 @@
 
         <v-snackbar v-model="badLoginAttempt" bottom right :timeout="5000">
           Username or password was incorrect.
-          <v-btn color="pink" flat @click="badLoginAttempt = false"> Close </v-btn>
+          <v-btn color="pink" text @click="badLoginAttempt = false"> Close </v-btn>
         </v-snackbar>
-        <v-btn type="submit" :loading="awaitingResponse" @click="createUser" :color="buttonStatus.color">
-          <v-icon left dark>lock_open</v-icon>
+        <v-btn class="mr-2" type="submit" :loading="awaitingResponse" @click="createUser" :color="buttonStatus.color">
+          <v-icon left>mdi-lock-open</v-icon>
           Create Account
         </v-btn>
         <router-link v-if="registrationRoute" to="login">
-          <v-btn flat>Log In</v-btn>
+          <v-btn text>Log In</v-btn>
         </router-link>
-        <v-btn v-else flat @click="toggle"> Log In </v-btn>
+        <v-btn v-else text @click="toggle"> Log In </v-btn>
       </v-form>
     </v-card-text>
   </v-card>

From 3328632bd71591931a496c26110e72bd3055d228 Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Thu, 2 Jan 2025 02:16:28 -0400
Subject: [PATCH 6/6] remove non-package @types/vuetify

---
 packages/vue/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vue/package.json b/packages/vue/package.json
index 9e8e9833..5f49bf71 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -55,7 +55,6 @@
         "@types/pouchdb-browser": "^6.1.3",
         "@types/pouchdb-find": "^6.3.4",
         "@types/simplemde": "^1.11.7",
-        "@types/vuetify": "^2.0.0",
         "@types/wavesurfer.js": "^5.1.0",
         "@types/webmidi": "^2.0.4",
         "@typescript-eslint/eslint-plugin": "^4.18.0",