Fix "YouAre" component

src/assets/css/chat.scss

@@ -37,7 +37,7 @@ body {
     box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25) !important;
     border-radius: 18px;
     padding-bottom: 10px;
-    .v-item-group > div:not(:last-of-type):after {
+    .v-list > .v-list-item:not(:last-of-type):before {
       /* divider */
       position: absolute;
       content: " ";
@@ -905,6 +905,7 @@ body {
 .room-list {
   .room-list-room {
     color: white; // Used as selected item background
+    min-height: 58px;
     .v-avatar:not(.round) {
       // Make avatars rounded squares!
       border-radius: 8px;

src/components/RoomList.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list dense class="room-list">
+  <v-list class="room-list">
     <v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
       <template v-slot:prepend>
         <v-avatar class="round" size="42" color="#d9d9d9">

src/components/UserProfileDialog.vue

@@ -39,21 +39,21 @@
       <DeviceList :member="activeMember" />
       <div class="py-3" v-if="activeMember.userId != $matrix.currentUserId">
         <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, activeMember.userId)" class="start-private-chat clickable d-block text-none justify-start" @click="startPrivateChat(activeMember.userId)">
-          <v-icon left>$vuetify.icons.direct_chat</v-icon>  {{ $t("menu.direct_chat") }}
+          <v-icon start>$vuetify.icons.direct_chat</v-icon>  {{ $t("menu.direct_chat") }}
         </v-btn>
         <div v-if="canBanUserComp">
           <v-btn text x-large block v-if="activeMember.userId != $matrix.currentUserId && canBanUserComp" class="start-private-chat clickable d-block text-none justify-start" @click="banUser(activeMember)">
-            <v-icon left>$vuetify.icons.kickout</v-icon> {{ $t("menu.user_kick_and_ban") }}
+            <v-icon start>$vuetify.icons.kickout</v-icon> {{ $t("menu.user_kick_and_ban") }}
           </v-btn>
         </div>
         <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isAdminComp && canMakeAdminComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeAdmin(activeMember)">
-          <v-icon left>$vuetify.icons.make_admin</v-icon> {{ $t("menu.user_make_admin") }}
+          <v-icon start>$vuetify.icons.make_admin</v-icon> {{ $t("menu.user_make_admin") }}
         </v-btn>
         <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isModeratorComp && !isAdminComp && canMakeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeModerator(activeMember)">
-          <v-icon left>$vuetify.icons.make_moderator</v-icon> {{ $t("menu.user_make_moderator") }}
+          <v-icon start>$vuetify.icons.make_moderator</v-icon> {{ $t("menu.user_make_moderator") }}
         </v-btn>
         <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && isModeratorComp && canRevokeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="revokeModerator(activeMember)">
-          <v-icon left>$vuetify.icons.revoke</v-icon> {{ $t("menu.user_revoke_moderator") }}
+          <v-icon start>$vuetify.icons.revoke</v-icon> {{ $t("menu.user_revoke_moderator") }}
         </v-btn>
       </div>
     </div>

src/components/YouAre.vue

@@ -3,9 +3,9 @@
     <v-chip
       @click="viewProfile"
       class="ma-2 white-space-pre"
-      :color="dark ? 'black' : '#ededed'"
+      color="#ededed"
-      :text-color="dark ? 'white' : 'black'"
+      style="color:black"
-      :variant="!dark ? 'ouelined' : 'tonal'"
+      variant="outlined"
       >{{ $t("profile_info_popup.you_are") }}&nbsp;
       <span v-if="$matrix.currentUser.is_guest">
         <i18n-t keypath="profile_info_popup.identity_temporary" tag="span">
@@ -21,10 +21,12 @@
           </template>
         </i18n-t>
       </span>
-      <v-avatar color="#e0e0e0" right @click.stop="viewProfile">
+      <template v-slot:append>
-        <AuthedImage v-if="userAvatar" :src="userAvatar" />
+        <v-avatar color="#e0e0e0" end @click.stop="viewProfile">
-        <span v-else class="text-white">{{ userAvatarLetter }}</span>
+          <AuthedImage v-if="userAvatar" :src="userAvatar" />
-      </v-avatar>
+          <span v-else class="text-white">{{ userAvatarLetter }}</span>
+        </v-avatar>
+      </template>
     </v-chip>
   </div>
 </template>
@@ -36,14 +38,6 @@ export default {
   name: "YouAre",
   mixins: [profileInfoMixin],
   components: { AuthedImage },
-  props: {
-    dark: {
-      type: Boolean,
-      default: function () {
-        return false;
-      },
-    },
-  },
   data() {
     return {};
   },