a bit styling

src/App.vue

@@ -22,6 +22,21 @@ export default {
 body{
   margin: 0;
 }
+*{
+  scrollbar-width: thin;
+  scrollbar-color: #42b983 #2220;
+}
+*::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+*::-webkit-scrollbar-track {
+  background: none;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #42b983;
+  border-radius: 0.25rem;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   position: absolute;

src/components/chatInformation.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="chatInformation">
-    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
     <div id="box">
+      <div class="scrollContainer">
         <div class="informationBox">
-      <div class="picBoxBig"><div class="placeholderBig"><p>{{session.currentRoom.name.substr(0,2)}}</p></div></div>
+        <div class="picBoxBig"><div class="placeholderBig">{{session.currentRoom.name.substr(0,2)}}</div></div>
         <div class="roomInformation">
           <div class="roomName">{{session.currentRoom.name}}</div>
           <div class="users">{{session.currentRoom.members.length}} members</div>
@@ -23,6 +23,8 @@
         </div>
       </div>
     </div>
+    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
+  </div>
 </template>
 <script>
 import icon from './icon.vue';
@@ -65,6 +67,12 @@ export default {
     height: 100%;
   }
 }
+@media (max-height: 40rem) {
+  #chatInformation{
+    top: 0;
+    height: 100%;
+  }
+}
 .closeBtn{
   position: absolute;
   top: 0;
@@ -73,28 +81,25 @@ export default {
   box-shadow: none;
 }
 #box{
-  position: relative;
+  position: absolute;
+  top: 0;
   width: calc(100% - 2rem);
-  padding: 0.001rem 1rem 1rem;
+  padding: 0 1rem 0 1rem;
   overflow-y: auto;
-  max-height: calc(100% - 8rem);
+  overflow-x: hidden;
-  margin-top: 2rem;
+  height: 100%;
 }
-.informationBox{
+.scrollContainer{
-  margin-top: 0.2rem;
+  padding: 1rem 0 1rem 0;
-  height: 5rem;
-  padding: 0.2rem;
 }
 .picBoxBig{
   text-align: center;
-  background-color: #42b983 ;
+  background-color: #42a7b9;
+  padding-top: 1.5rem;
   width: 5rem;
-  height: 5rem;
+  height: 3.5rem;
   border-radius: 5rem;
-}
+  font-size: 2rem;
-.placeholderBig{
-  padding-top: 1rem;
-  margin-bottom: 1rem;
 }
 .roomInformation{
   position: relative;
@@ -119,7 +124,7 @@ export default {
 .picBox{
   position: absolute;
   left: 1rem;
-  background-color: #00BCD4;
+  background-color: #42a7b9;
   width: 3rem;
   height:3rem;
   border-radius: 2rem;

src/components/topBanner.vue

@@ -2,7 +2,7 @@
   <div class="topBanner">
     <div>
       <icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
-      <icon v-on:click.native="showChatInfo()" class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
+      <div @click="showChatInfo()" class="smallIcon" id="picTop">{{session.currentRoom.name.substr(0,2)}}</div>
       <div id="container">
         <div id="chatName">{{session.currentRoom.name}}</div>
         <div id="users">{{session.currentRoom.members.length}} members</div>
@@ -45,10 +45,17 @@ export default {
 .smallIcon{
   top: 0.25rem;
   background-color: #2d2d2d;
-  height: 2.5rem;
+  padding-top: 0.75rem;
+  height: 1.75rem;
   width: 2.5rem;
+  box-shadow: none;
+  border-radius: 1.25rem;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
 }
 #icon-arrow{
+  height: 2.5rem;
   position: absolute;
   left: 0.5rem;
   background-color: unset;

src/views/rooms.vue

@@ -12,7 +12,7 @@
       <h1>[c]</h1>
       <h2>—</h2>
       <div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
-        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+        <div class="roomImgPlaceholder small">{{room.name.substr(0,2)}}</div>
       </div>
     </div>
     <chat class="chat" v-if="session.currentRoom" />
@@ -38,7 +38,7 @@ export default {
       this.$router.push(`/rooms/${room.roomId}`)
       this.$forceUpdate()
       let msgContainer = document.getElementById("messagesContainer")
-      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 10)
+      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 20)
     }
   },
   data(){
@@ -71,7 +71,7 @@ export default {
 .roomListElement{
   position: relative;
   height: 3rem;
-  margin-top: 0.5rem;
+  margin: 0.5rem 0 0.5rem 0;
   font-size: 1.2rem;
   cursor: pointer;
   background-color: #222;
@@ -92,6 +92,7 @@ export default {
   text-align: center;
   display: none;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 .noRoomSelected{
   position: absolute;
@@ -103,14 +104,15 @@ export default {
 .roomImgPlaceholder{
   position: absolute;
   left: 1rem;
-  top: 0;
   height: 2rem;
   width: 3rem;
   padding-top: 1rem;
   background-color: #42a7b9;
   border-radius: 1.5rem;
   text-align: center;
-  vertical-align: middle;
+}
+.roomImgPlaceholder.small{
+  margin-left: calc(50% - 2rem);
 }
 
 @media (max-width: 48rem) {