Dialogs and Vuetify styling changes

src/components/ReportRoomDialog.vue

@@ -1,7 +1,6 @@
 <template>
   <v-dialog
     v-model="showDialog"
-    v-show="room"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
   >
@@ -39,37 +38,16 @@
   </v-dialog>
 </template>
 <script>
-import roomInfoMixin from "./roomInfoMixin";
+import RoomDialogBase from "./RoomDialogBase.vue";
 
 export default {
   name: "ReportRoomDialog",
-  mixins: [roomInfoMixin],
-  props: {
-    show: {
-      type: Boolean,
-      default: function () {
-        return false;
-      },
-    },
-  },
+  extends: RoomDialogBase,
   data() {
     return {
-      showDialog: false,
       reason: ""
     };
   },
-  watch: {
-    show: {
-      handler(newVal, ignoredOldVal) {
-        this.showDialog = newVal;
-      },
-    },
-    showDialog() {
-      if (!this.showDialog) {
-        this.$emit("close");
-      }
-    },
-  },
 
   methods: {
     onReport() {