Add name and avatar to room info

src/assets/css/chat.scss

@@ -444,6 +444,33 @@ $admin-fg: white;
         background-color: transparent;
         border: none;
     }
+    .room-avatar {
+        background-color: #ededed;
+        width: 100px !important;
+        height: 100px !important;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        .headline {
+            font-size: 80 * $chat-text-size !important;
+        }
+    }
+    
+    .room-title {
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        font-family: "Poppins", sans-serif;
+        font-style: normal;
+        font-weight: 800;
+        font-size: 40 * $chat-text-size;
+        line-height: 108.5%;
+        /* or 43px */
+        text-align: center;
+        letter-spacing: -0.8px;
+        
+        color: #000000;
+        overflow-wrap: break-word;
+    }
+
     .room-name {
         text-align: center;
         margin-top: 15px;

src/components/RoomInfo.vue

@@ -2,8 +2,8 @@
   <div v-if="room" class="room-info">
     <div class="chat-header">
       <v-container fluid>
-        <div class="room-name" v-if="room">
+        <div class="room-name">
-          {{ room.summary.info.title }}
+          Info
         </div>
         <v-btn
           text
@@ -17,6 +17,18 @@
       </v-container>
     </div>
 
+    <v-card class="members ma-3" flat>
+        <div class="text-center">
+        <v-avatar class="room-avatar">
+          <v-img v-if="roomAvatar" :src="roomAvatar" />
+          <span v-else class="white--text headline">{{
+            roomName.substring(0, 1).toUpperCase()
+          }}</span>
+        </v-avatar>
+        </div>
+        <div class="room-title">{{ roomName }}</div>
+    </v-card>
+
     <v-card class="members ma-3" flat>
       <v-card-title
         >Members<v-spacer></v-spacer>
@@ -61,27 +73,35 @@
 
     <v-card class="account ma-3" flat>
       <v-card-text>
-          <v-btn color="red" block class="filled-button" @click.stop="showLeaveConfirmation = true"
+        <v-btn
-            >Leave group</v-btn
+          color="red"
-          >
+          block
-          <div>
+          class="filled-button"
-            Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.
+          @click.stop="showLeaveConfirmation = true"
-          </div>
+          >Leave group</v-btn
+        >
+        <div>
+          Note: This step cannot be undone. Make sure you want to logout and
+          delete the chat forever.
+        </div>
       </v-card-text>
     </v-card>
 
-    <LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
+    <LeaveRoomDialog
-
+      :show="showLeaveConfirmation"
+      :room="room"
+      @close="showLeaveConfirmation = false"
+    />
   </div>
 </template>
 
 <script>
-import LeaveRoomDialog from '../components/LeaveRoomDialog';
+import LeaveRoomDialog from "../components/LeaveRoomDialog";
 
 export default {
   name: "RoomInfo",
   components: {
-    LeaveRoomDialog
+    LeaveRoomDialog,
   },
   data() {
     return {
@@ -89,7 +109,7 @@ export default {
       user: null,
       displayName: "",
       showAllMembers: false,
-      showLeaveConfirmation: false
+      showLeaveConfirmation: false,
     };
   },
   mounted() {
@@ -108,6 +128,20 @@ export default {
       return this.$matrix.currentRoom;
     },
 
+    roomName() {
+      if (this.room) {
+        return this.room.name;
+      }
+      return "";
+    },
+
+    roomAvatar() {
+      if (this.room) {
+        return this.room.avatar;
+      }
+      return "";
+    },
+
     joinedMembers() {
       if (!this.room) {
         return [];