From bd60f9ebd4a122465a0760a8035920c2c0083b54 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Wed, 17 Feb 2021 10:49:54 +0100
Subject: [PATCH] Add topic to rom info

Issue #59.
---
 src/assets/css/main.scss    | 8 ++++++++
 src/components/RoomInfo.vue | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index afd0d33..bad1de2 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -29,6 +29,14 @@ $chat-button-height: 50px;
     color: black;
 }
 
+.h3 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-size: 18 * $chat-text-size;
+    text-align: center;
+    color: #505050;
+}
+
 .v-btn.outlined-button {
     font-family: 'Inter', sans-serif;
     font-weight: 700;
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 6b5b3a8..6bbfaad 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -24,6 +24,7 @@
           }}</span>
         </v-avatar>
         <div class="h1">{{ roomName }}</div>
+        <div class="h3">{{ roomTopic }}</div>
         <div class="small">Created by {{ creator }}</div>
         <canvas class="qr" id="room-qr"></canvas>
       </div>
@@ -191,6 +192,13 @@ export default {
       return "";
     },
 
+    roomTopic() {
+      if (this.room) {
+        return this.room.topic;
+      }
+      return "";
+    },
+
     anyoneCanJoin() {
       // TODO: fix this! For now, just return true of we have a canonical alias.
       if (this.room && this.room.getCanonicalAlias() && this.room.getCanonicalAlias().startsWith('#')) {