From 575dad8646b23e6f256abe42ec9e814b581f1d00 Mon Sep 17 00:00:00 2001
From: Tim Herbst <tim.herbst@adesso.de>
Date: Wed, 23 Dec 2020 14:31:44 +0100
Subject: [PATCH] adjust overall style to match common applications

---
 .../app/dashboard/dashboard.component.html    | 94 ++++++++-----------
 .../app/dashboard/dashboard.component.scss    | 31 +++---
 2 files changed, 57 insertions(+), 68 deletions(-)

diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
index 0146f69..62b04c4 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -36,28 +36,21 @@
       </button>
     </div>
   </mat-sidenav>
-  <mat-sidenav-content>
-    <div class="container containter-map"
-         fxLayout
-         fxLayout.xs="column"
-         fxLayoutAlign="center"
-         fxLayoutGap="10px"
-         fxLayoutGap.xs="0"
-    >
-      <div class="mini-map"
-           fxFlex
-      >
-        <div class="map-frame" fxFlex>
-          <div fxFill id="map"></div>
+  <mat-sidenav-content fxFlex fxLayout="column" fxLayoutAlign="center">
+
+    <div class="container-map" fxFlex="100%" fxLayout="column">
+      <mat-card class="mat-card-map" fxFlex fxLayout="column">
+        <div class="mini-map" fxFlex fxLayout="column">
+          <div class="map-frame" fxFill>
+            <div fxFill id="minimap"></div>
+          </div>
         </div>
-      </div>
+      </mat-card>
     </div>
-    <div class="container container-top"
-         fxLayout
-         fxLayout.xs="column"
-         fxLayoutAlign="center"
-         fxLayoutGap="10px"
-         fxLayoutGap.xs="0"
+
+
+    <div class="container container-table"
+         fxFlex fxLayout="row" fxLayoutAlign="center"
     >
       <div class="dashboard-table-to"
            fxFlex="40%"
@@ -74,7 +67,7 @@
           </ng-container>
 
           <ng-container matColumnDef="avgDuration">
-            <th *matHeaderCellDef mat-header-cell> average Lend duration</th>
+            <th *matHeaderCellDef mat-header-cell> average lend duration</th>
             <td *matCellDef="let element" mat-cell> {{element.avgDuration}} </td>
           </ng-container>
 
@@ -107,43 +100,30 @@
       </div>
 
     </div>
-    <div class="container container-middle"
-         fxLayout
-         fxLayout.xs="column"
-         fxLayoutAlign="center center"
-         fxLayoutGap="10px"
-         fxLayoutGap.xs="0"
-    >
-      <div class="dashboard-chart-borrow-duration"
-           fxFlex="80%"
+
+    <div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
+      <mat-card fxFlex="90%" fxLayout="column"
       >
-        <div id="Station-Dashboard-Borrow-Duration">
-          <apx-chart
-            [chart]="durationChartOptions.chart"
-            [dataLabels]="durationChartOptions.dataLabels"
-            [fill]="durationChartOptions.fill"
-            [legend]="durationChartOptions.legend"
-            [plotOptions]="durationChartOptions.plotOptions"
-            [series]="durationChartOptions.series"
-            [stroke]="durationChartOptions.stroke"
-            [xaxis]="durationChartOptions.xaxis"
-            [yaxis]="durationChartOptions.yaxis"
-          ></apx-chart>
-        </div>
-      </div>
-    </div>
-    <div class="container container-bottom"
-         fxLayout
-         fxLayout.xs="column"
-         fxLayoutAlign="center"
-         fxLayoutGap="10px"
-         fxLayoutGap.xs="0"
-    >
-      <div class="dashboard-chart-borrow-time"
-           fxFlex
-      >
-        dashboard-chart-borrow-time
-      </div>
+        <mat-card-header>
+          <mat-card-title>Borrow Duration</mat-card-title>
+        </mat-card-header>
+        <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
+          <div fxFlex="80%" fxLayout="column" id="Station-Dashboard-Borrow-Duration">
+            <apx-chart
+              [chart]="durationChartOptions.chart"
+              [dataLabels]="durationChartOptions.dataLabels"
+              [fill]="durationChartOptions.fill"
+              [legend]="durationChartOptions.legend"
+              [plotOptions]="durationChartOptions.plotOptions"
+              [series]="durationChartOptions.series"
+              [stroke]="durationChartOptions.stroke"
+              [xaxis]="durationChartOptions.xaxis"
+              [yaxis]="durationChartOptions.yaxis"
+            ></apx-chart>
+          </div>
+        </mat-card-content>
+      </mat-card>
     </div>
+
   </mat-sidenav-content>
 </mat-sidenav-container>
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
index 05ad4d9..239c5aa 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
@@ -1,3 +1,7 @@
+mat-sidenav-content {
+  background: #2f2f2f;
+}
+
 .toolbar-spacer {
   flex: 1 1 auto;
 }
@@ -28,15 +32,28 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
   margin-top: 100px;
 }
 
-.containter-map {
+.mat-card {
+  padding: 1em 1em 1em;
+  margin: 3em;
+}
+.mat-card-map {
+  padding: 1px;
+}
+
+.mat-card-header {
+  display: flex;
+  justify-content: center;
+}
+
+.container-map {
   height: 40vh;
 }
 
-.container-top {
+.container-table {
   height: 20vh;
 }
 
-.container-middle {
+.container-borrow-duration {
   height: 40vh
 }
 
@@ -52,14 +69,6 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
   margin: 5px;
 }
 
-.mini-map {
-  margin: 5px;
-}
-
-.dashboard-chart-borrow-duration {
-  margin: 5px;
-}
-
 .dashboard-chart-borrow-time {
   margin: 5px;
   background: chartreuse;