Dialogs and Vuetify styling changes

src/components/RoomDialogBase.vue

@@ -0,0 +1,43 @@
+<template><div></div></template>
+<script>
+import roomInfoMixin from "./roomInfoMixin";
+
+export default {
+  name: "RoomDialogBase",
+  mixins: [roomInfoMixin],
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  watch: {
+    room() {
+      this.showDialog = this.shouldShow();
+    },
+    modelValue() {
+      this.showDialog = this.shouldShow();
+    },
+    showDialog() {
+      if (!this.showDialog) {
+        this.$emit('update:modelValue', false)
+      } else {
+        this.onOpenDialog();
+      }
+    },
+  },
+
+  methods: {
+    shouldShow() {
+      return this.modelValue && this.room ? true : false;
+    },
+    onOpenDialog() {      
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>