Some work on issue #43

src/assets/css/chat.scss

@@ -3,6 +3,27 @@
 $admin-bg: black;
 $admin-fg: white;
 
+.home {
+    .v-card {
+        background-color: white;
+        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 {
+            /* divider */
+            position: absolute;
+            content: " ";
+            display: block;
+            bottom: 0px;
+            height: 1px;
+            left: 0px;
+            right: 0px;
+            min-height: 1px;
+            background-color: #e1e1e1;
+        }
+    }
+}
+
 .chat-header {
     margin: 0;
     padding: 0;
@@ -975,6 +996,10 @@ $admin-fg: white;
     padding-top: 10px;
 }
 
+.avatar-22 {
+    font-size: 14 * $chat-text-size !important;
+}
+
 .avatar-32 {
     font-size: 18 * $chat-text-size !important;
 }
@@ -984,7 +1009,8 @@ $admin-fg: white;
 }
 
 .avatar-32.clickable,
-.avatar-48.clickable {
+.avatar-48.clickable,
+.clickable {
     cursor: pointer;
     &:hover {
         opacity: 0.7;

src/components/Home.vue

@@ -1,13 +1,24 @@
 <template>
-  <div class="pa-4">
-    <RoomList showInvites showCreate :title="$t('room.room_list_rooms')" :invitesTitle="$t('room.room_list_invites')" v-on:newroom="createRoom" />
-    <v-btn block depressed class="outlined-button" @click.stop="logout">{{$t('menu.logout')}}</v-btn>
+  <div class="home">
+    <YouAre class="mt-4" v-if="!loading" />
+    <v-card class="members ma-3" flat>
+      <v-card-title class="h2">{{ $t("room.room_list_rooms") }}</v-card-title>
+      <v-card-text class="pa-0">
+        <RoomList
+          showInvites
+          showCreate
+          title=""
+          :invitesTitle="$t('room.room_list_invites')"
+          v-on:newroom="createRoom"
+        />
+      </v-card-text>
+    </v-card>
 
     <!-- Loading indicator -->
     <v-container
       fluid
       fill-height
-      style="position: absolute;background-color:rgba(0,0,0,0.2)"
+      style="position: absolute; background-color: rgba(0, 0, 0, 0.2)"
       v-if="loading"
     >
       <v-row align="center" justify="center">
@@ -23,30 +34,32 @@
 </template>
 
 <script>
-import RoomList from '../components/RoomList';
+import RoomList from "../components/RoomList";
+import YouAre from "../components/YouAre.vue";
 
 export default {
   components: {
-    RoomList
+    RoomList,
+    YouAre,
   },
   computed: {
     loading() {
       return !this.$matrix.ready;
-    }
+    },
   },
   methods: {
     logout() {
       //TODO - For guest accounts, show warning about not being able to rejoin.
       this.$store.dispatch("logout");
       this.$nextTick(() => {
-        this.$navigation.push({path: "/login"}, -1);
-      })
+        this.$navigation.push({ path: "/login" }, -1);
+      });
     },
-    
+
     createRoom() {
       this.$navigation.push({ name: "CreateRoom" });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/YouAre.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="d-flex flex-row-reverse">
+    <v-chip
+      @click="viewProfile"
+      class="ma-2"
+      :color="dark ? 'black' : '#ededed'"
+      :text-color="dark ? 'white' : 'black'"
+      :outlined="!dark"
+      style="white-space: pre"
+      >{{ $t("profile_info_popup.you_are") }}&nbsp;
+      <span v-if="$matrix.currentUser.is_guest">
+        <i18n path="profile_info_popup.identity_temporary" tag="span">
+          <template v-slot:displayName>
+            <b>{{ displayName }}</b>
+          </template>
+        </i18n>
+      </span>
+      <span v-else>
+        <i18n path="profile_info_popup.identity" tag="span">
+          <template v-slot:displayName>
+            <b>{{ displayName }}</b>
+          </template>
+        </i18n>
+      </span>
+      <v-avatar color="#e0e0e0" right @click.stop="showProfileInfo = true">
+        <img v-if="userAvatar" :src="userAvatar" />
+        <span v-else class="white--text">{{ userAvatarLetter }}</span>
+      </v-avatar>
+    </v-chip>
+  </div>
+</template>
+<script>
+import profileInfoMixin from "./profileInfoMixin";
+
+export default {
+  name: "YouAre",
+  mixins: [profileInfoMixin],
+  props: {
+    dark: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    viewProfile() {
+      this.$navigation.push({ name: "Profile" }, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>