Add header and logo

src/app/dashboard/dashboard.component.html

@@ -1,8 +1,13 @@
 <!--<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer"
   gdGap="16px" gdRows="auto auto auto"> -->
 <!--<div class="grid-container" fxLayout="row" fxLayoutGap="16px grid" fxLayoutAlign="stretch">-->
+<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
+  <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center">
+    <img src="assets/logo-horizontal.svg" width="150px" />
+    <span>Tech UI</span>
+  </div>
+</div>
 <div fxLayout="column" fxLayoutGap="16px" class="grid-container">
-  <h1>Tech UI</h1>
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
     <app-chart [type]=folderChart fxFlex="50"></app-chart>
     <app-chart [type]=deviceChart fxFlex="50"></app-chart>

src/app/dashboard/dashboard.component.scss

@@ -1,3 +1,7 @@
+.header {
+  margin: 20px 3vw 20px 3vw;
+}
 .grid-container {
-  margin: 20px;
+  margin: 10px calc(10px + 3.3vw);
+  min-width: 600px;
 }

src/app/device.ts

@@ -50,13 +50,13 @@ namespace Device {
     export function stateTypeToColor(s: StateType): string {
         switch (s) {
             case StateType.Insync:
-                return colors.get("green");
+                return colors.get("blue");
             case StateType.UnusedInsync:
                 return colors.get("grey");
             case StateType.Unknown:
                 return colors.get("grey");
             case StateType.Syncing:
-                return colors.get("blue");
+                return colors.get("green");
             case StateType.Paused:
                 return colors.get("grey");
             case StateType.UnusedPaused:

src/app/folder.ts

@@ -82,7 +82,7 @@ namespace Folder {
             case StateType.Scanning:
                 return colors.get("grey");
             case StateType.Idle:
-                return colors.get("green");
+                return colors.get("blue");
             case StateType.LocalAdditions:
                 return colors.get("grey");
             case StateType.WaitingToScan:
@@ -90,7 +90,7 @@ namespace Folder {
             case StateType.PreparingToSync:
                 return colors.get("grey");
             case StateType.Syncing:
-                return colors.get("blue");
+                return colors.get("green");
             case StateType.OutOfSync:
                 return colors.get("grey");
             case StateType.FailedItems:

src/app/lists/status-list/status-list.component.html

@@ -1,6 +1,6 @@
 <div class="{{elevation}} tui-card">
     <div fxLayout="row" fxLayoutAlign="space-between start">
-        <div class="tui-card-title">Status</div>
+        <div class="tui-card-title">{{title | uppercase}}</div>
         <app-list-toggle (listTypeEvent)="onToggle($event)" class="tui-card-content"></app-list-toggle>
     </div>
     <div class="tui-card-content">

src/app/lists/status-list/status-list.component.ts

@@ -12,6 +12,7 @@ export class StatusListComponent implements OnInit {
   currentListType: ListType = ListType.Folders;
   listType = ListType; // used in html
   elevation: string = cardElevation;
+  title: string = 'Status';
 
   constructor() { }