topBanner styling and implementation

src/components/icon.vue

@@ -28,7 +28,8 @@ name: "icon",
     position: absolute;
     height: 1.5rem;
     width: auto;
-    top: 0.75rem;
-    left: 0.75rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 </style>

src/components/newMessage.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="newMessageBanner">
     <label for="newMessageInput"></label>
-    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
-    <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
+    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
+              autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
+    <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;"
+          ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
@@ -30,7 +32,7 @@ export default {
       id.style.height = `${id.scrollHeight}px`
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.style.height
-          = `calc(100% - ${id.parentElement.clientHeight}px)`
+          = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
       //msgContainer.scrollTo(0, msgContainer.scrollHeight)
     }
   },

src/components/topBanner.vue

@@ -1,50 +1,60 @@
 <template>
   <div class="topBanner">
     <div>
-      <div id = "icon-arrow" ><img alt="arrow" class="arrow-Top-Left" src="../sym/arrow_back-24px.svg"></div>
-      <div id = "picTop"><img alt="Bild" id="picTopPic" src="../sym/supervisor_account-24px.svg"></div>
+      <icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      <icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
       <div id="container">
-        <div id = "chatName"> OpenChat</div>
-        <div id = "users">9 Mitglieder</div>
+        <div id="chatName">{{roomInfo.name}}</div>
+        <div id="users">{{roomInfo.user.length}} members</div>
       </div>
-      <div id = "icon-menu"><img alt="menu" class="menu-Top-Right" src="../sym/menu-24px.svg"></div>
+      <icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
     </div>
   </div>
 </template>
 <script>
+import icon from '@/components/icon.vue';
+
 export default {
-    name: "topBanner"
+  name: "topBanner",
+  components:{
+    icon
+  },
+  data(){
+    return {
+      roomInfo: {
+        name: "open chat",
+        user: []
+      }
+    }
+  }
 }
 </script>
 <style scoped>
-#icon-arrow{
+.topBanner{
   position: absolute;
-  top: 0.24rem;
-  left: 1rem;
   width: 100%;
-  height: 100%;
-  max-height: 2.3rem;
-  max-width: 2.3rem;
-  border-radius: 1.5rem;
-  text-align: center;
+  height: 3rem;
+  background-color: #1d1d1d;
+  box-shadow: 0 3px 10px #111;
+}
+.smallIcon{
+  top: 0.25rem;
   background-color: #2d2d2d;
-
+  height: 2.5rem;
+  width: 2.5rem;
 }
-.arrow-Top-Left{
-  margin-top: 0.2rem;
-  height: 2rem;
-  width: 2rem;
+#icon-arrow{
+  position: absolute;
+  left: 1rem;
 }
 #picTop{
-  top: 0.24rem;
   position: absolute;
-  fill: #42a7b9;
   left: 4rem;
+  background-color: #42a7b9;
 }
-#picTopPic{
-  width: 2.3rem;
-  height: 2.3rem;
-  border-radius: 1.5rem;
+#icon-menu{
+  position: absolute;
+  right: 1rem;
   background-color: #2d2d2d;
 }
 #container{
@@ -53,35 +63,11 @@
   left: 7.5rem;
 }
 #chatName{
-  font-size: medium;
+  font-size: 1rem;
   color: #ededed;
 }
 #users{
-  font-size: x-small;
+  font-size: 0.75rem;
   color: #9c9c9c;
 }
-#icon-menu{
-  position: absolute;
-  top: 0.24rem;
-  right: 1rem;
-  width: 100%;
-  height: 100%;
-  max-height: 2.3rem;
-  max-width: 2.3rem;
-  border-radius: 1.5rem;
-  text-align: center;
-  background-color: #2d2d2d;
-
-}
-.menu-Top-Right {
-  margin-top: 0.2rem;
-  height: 2rem;
-  width: 2rem;
-}
-.topBanner{
-  position: absolute;
-  width: 100%;
-  height: 3rem;
-  background-color: #1d1d1d;
-}
 </style>

src/views/chat.vue

@@ -26,6 +26,7 @@
       </div>
     </div>
     <newMessage />
+    <topBanner />
   </div>
 </template>
 
@@ -33,13 +34,15 @@
 import message from '@/components/message.vue';
 import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
+import topBanner from "@/components/topBanner";
 
 export default {
   name: 'chat',
   components: {
     message,
     messageReceive,
-    newMessage
+    newMessage,
+    topBanner
   }
 }
 </script>
@@ -49,8 +52,8 @@ export default {
   position: absolute;
   margin: 0;
   left: 0;
-  top: 0;
-  height: calc(100% - 4rem);
+  top: 3rem;
+  height: calc(100% - 7rem);
   width: 100%;
   overflow-y: auto;
 }