adding topBanner

src/components/topBanner.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="topBanner">
     <div>
-      <div id = "icon-arrow"><img id="arrow-Top-Left" src="../sym/arrow_back-24px.svg"></div>
-      <div id = "point-point"></div>
-      <div id = "chatName"> OpenChat</div>
+      <div id = "icon-arrow"><img alt="arrow" id="arrow-Top-Left" src="../sym/arrow_back-24px.svg"></div>
+      <div id = "picTop"><img alt="Bild" id="picTopPic" src="../sym/placeholder.png"></div>
+      <div id="container">
+        <div id = "chatName"> OpenChat</div>
+        <div id = "users">9 Mitglieder</div>
+      </div>
     </div>
   </div>
 </template>
@@ -17,7 +20,7 @@ name: "topBanner"
 <style scoped>
 #icon-arrow{
   position: absolute;
-  top: 0.3rem;
+  top: 0.24rem;
   left: 1rem;
   width: 100%;
   height: 100%;
@@ -29,12 +32,34 @@ name: "topBanner"
 }
 #arrow-Top-Left{
   margin-top: 0.4rem;
+  fill: #42a7b9;
+}
+#picTop{
+  top: 0.24rem;
+  position: absolute;
+  fill: #42a7b9;
+  left: 4rem;
+}
+#picTopPic{
+  width: 2.3rem;
+  height: 2.3rem;
+  border-radius: 1.5rem;
+  border: #ededed solid 2px;
+  background-color: #313131;
+}
+#container{
+
+}
+#chatName{
+
+}
+#users{
+
 }
  .topBanner{
    position: absolute;
    width: 100%;
    height: 3rem;
    background-color: #1d1d1d;
-
  }
 </style>

src/sym/arrow_back-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>