Dialogs and Vuetify styling changes

src/components/LeaveRoomDialog.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%'"
   >
@@ -69,41 +68,21 @@
   </v-dialog>
 </template>
 <script>
+import RoomDialogBase from "./RoomDialogBase.vue";
 import roomInfoMixin from "./roomInfoMixin";
 
 export default {
   name: "LeaveRoomDialog",
-  mixins: [roomInfoMixin],
-  props: {
-    show: {
-      type: Boolean,
-      default: function () {
-        return false;
-      },
-    },
-  },
+  extends: RoomDialogBase,
   data() {
     return {
-      showDialog: false,
       lastRoom: false,
     };
   },
-  watch: {
-    show: {
-      handler(newVal, ignoredOldVal) {
-        this.showDialog = newVal;
-      },
-    },
-    showDialog() {
-      if (!this.showDialog) {
-        this.$emit("close");
-      } else {
-        this.lastRoom = this.onlyJoinedToThisRoom();
-      }
-    },
-  },
-
   methods: {
+    onOpenDialog() {  
+      this.lastRoom = this.onlyJoinedToThisRoom();
+    },
     onlyJoinedToThisRoom() {
       const joinedRooms = this.$matrix.joinedRooms;
       if (