Add play/pause buttons, logo

frontend/src/app/main-page/main-page.component.css

@@ -11,8 +11,19 @@
 .heading {
     color: white;
     background-color: #009bdf;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     height: 5em;
-    padding: 1em;
+}
+
+.logo {
+    min-width: 250px;
+}
+
+.start-stop {
+    cursor: pointer;
 }
 
 .heading .title {
@@ -76,4 +87,9 @@
     background-color: #eeeeee;
     flex: auto 1;
     padding: 1em;
+}
+
+.autoplay {
+    margin-right: 1em;
+    margin-left: auto;
 }

frontend/src/app/main-page/main-page.component.html

@@ -2,14 +2,27 @@
 <div class="page">
     <div class="heading">
         <span class="logo">
-
+            <img src="/assets/trondheim_kommune.png">
         </span>
         <span class="title">
-            PAX
+            PAX - Persontelling
+        </span>
+        <span class="autoplay">
+            <svg *ngIf="this.autoPlayEnabled" fill="white" class="start-stop" (click)="autoPlay(false)" height="32px"
+                width="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 512 512" xml:space="preserve">
+                <path d="M256,0C114.615,0,0,114.615,0,256s114.615,256,256,256s256-114.615,256-256S397.385,0,256,0z M336,320
+	c0,8.837-7.163,16-16,16H192c-8.837,0-16-7.163-16-16V192c0-8.837,7.163-16,16-16h128c8.837,0,16,7.163,16,16V320z" />
+            </svg>
+            <svg *ngIf="!this.autoPlayEnabled" fill="white" class="start-stop" (click)="autoPlay(true)" height="32px"
+                width="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 512 512" xml:space="preserve">
+                <path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M344.48,269.57l-128,80
+               c-2.59,1.617-5.535,2.43-8.48,2.43c-2.668,0-5.34-0.664-7.758-2.008C195.156,347.172,192,341.82,192,336V176
+               c0-5.82,3.156-11.172,8.242-13.992c5.086-2.836,11.305-2.664,16.238,0.422l128,80c4.676,2.93,7.52,8.055,7.52,13.57
+               S349.156,266.641,344.48,269.57z" />
+            </svg>
         </span>
-        <a [href]="" (click)="autoPlay(!this.autoPlayEnabled)">Play</a>
-        <span *ngIf="this.autoPlayEnabled">[Playing]</span>
-        <span *ngIf="!this.autoPlayEnabled">[Stopped]</span>
     </div>
     <div class="content">
         <div class="list">