TopBanner Final HTML

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="content">
       <div class="messages">
-        <div class="spacer" style="height: 1rem;"></div>
+        <div class="spacer" style="height: 4rem;"></div>
         <message msg="Hey :D" />
         <message msg="Du bist blööööd xD" />
         <messageReceive msg="Du auch" />
@@ -24,6 +24,21 @@
         <message msg="und Kuchen :P" />
         <message msg="und Kuchen :P" />
         <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
+        <message msg="und Kuchen :P" />
         <div class="spacer" style="height: 1rem;"></div>
       </div>
       <newMessage />

src/components/topBanner.vue

@@ -1,8 +1,8 @@
 <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 = "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/placeholder.png"></div>
+      <div id = "picTop"><img alt="Bild" id="picTopPic" src="../sym/supervisor_account-24px.svg"></div>
       <div id="container">
         <div id = "chatName"> OpenChat</div>
         <div id = "users">9 Mitglieder</div>
@@ -11,13 +11,11 @@
     </div>
   </div>
 </template>
-
+<script >
-<script>
+  export default {
-export default {
+    name: "topBanner"
-name: "topBanner"
+  }
-}
 </script>
-
 <style scoped>
 #icon-arrow{
   position: absolute;
@@ -28,9 +26,9 @@ name: "topBanner"
   max-height: 2.3rem;
   max-width: 2.3rem;
   border-radius: 1.5rem;
-  border: #ededed solid 2px;
   text-align: center;
-  background-color: #3a8d9c;
+  background-color: #2d2d2d;
+
 }
 .arrow-Top-Left{
   margin-top: 0.2rem;
@@ -47,8 +45,7 @@ name: "topBanner"
   width: 2.3rem;
   height: 2.3rem;
   border-radius: 1.5rem;
-  border: #ededed solid 2px;
+  background-color: #2d2d2d;
-  background-color: #3a8d9c;
 }
 #container{
   position: absolute;
@@ -72,19 +69,19 @@ name: "topBanner"
   max-height: 2.3rem;
   max-width: 2.3rem;
   border-radius: 1.5rem;
-  border: #ededed solid 2px;
   text-align: center;
-  background-color: #3a8d9c;
+  background-color: #2d2d2d;
+
 }
 .menu-Top-Right {
   margin-top: 0.2rem;
   height: 2rem;
   width: 2rem;
 }
- .topBanner{
+.topBanner{
-   position: absolute;
+  position: absolute;
-   width: 100%;
+  width: 100%;
-   height: 3rem;
+  height: 3rem;
-   background-color: #1d1d1d;
+  background-color: #1d1d1d;
- }
+}
 </style>

src/sym/arrow_back-24px.svg

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

src/sym/menu-24px.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path fill="#fff" d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>

src/sym/supervisor_account-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 fill="#fff" d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></svg>