From 110f8f2595d092e06c8b701939e57716604fe972 Mon Sep 17 00:00:00 2001
From: Tim Herbst <tim.herbst@adesso.de>
Date: Sun, 27 Dec 2020 11:44:34 +0100
Subject: [PATCH] change dashboard user-input alignment

---
 .../app/dashboard/dashboard.component.html    | 70 ++++++++++---------
 .../app/dashboard/dashboard.component.scss    |  2 +
 .../src/app/dashboard/dashboard.component.ts  |  2 +
 3 files changed, 41 insertions(+), 33 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 11c914f..736ad2a 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -18,39 +18,43 @@
   <mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
     <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
 
-      <div class="user-input" fxFlex="20%" fxLayout="column" fxLayoutAlign="space-between">
-        <mat-card class="mat-card-info" fxFlex>
-          <mat-card-content>
-            <form [formGroup]="form">
-              <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
-                <mat-label>Enter a range</mat-label>
-                <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
-                                      formGroupName="daterange">
-                  <input formControlName="start" matStartDate placeholder="Start date">
-                  <input formControlName="end" matEndDate placeholder="End date">
-                </mat-date-range-input>
-                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-                <mat-date-range-picker #picker></mat-date-range-picker>
-              </mat-form-field>
-            </form>
-            <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
-              <button (click)="onSubmit()" color="primary" mat-raised-button>
-                <mat-icon>dashboard</mat-icon>
-                <span id="submit-date-span"> reload dashboard</span>
-              </button>
-            </div>
-          </mat-card-content>
-        </mat-card>
-        <div class="container-info">
-          <mat-card fxFlex>
-            <mat-card-header>
-              <div class="example-header-image" mat-card-avatar></div>
-              <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-              <p>{{bikePoint?.status.NbBikes}}</p>
-            </mat-card-content>
-          </mat-card>
+      <div class="input-container" fxFlex="25%" fxLayout="column">
+        <div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
+          <div class="container-info" fxFlex="60%">
+            <mat-card fxFlex="100%">
+              <mat-card-header>
+                <div class="example-header-image" mat-card-avatar></div>
+                <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
+              </mat-card-header>
+              <mat-card-content>
+                <p>{{bikePoint?.status.NbBikes}}</p>
+              </mat-card-content>
+            </mat-card>
+          </div>
+          <div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center">
+            <mat-card>
+              <mat-card-content>
+                <form [formGroup]="form">
+                  <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
+                    <mat-label>Enter a range</mat-label>
+                    <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
+                                          formGroupName="daterange">
+                      <input formControlName="start" matStartDate placeholder="Start date">
+                      <input formControlName="end" matEndDate placeholder="End date">
+                    </mat-date-range-input>
+                    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                  </mat-form-field>
+                </form>
+                <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
+                  <button (click)="onSubmit()" color="primary" mat-raised-button>
+                    <mat-icon>dashboard</mat-icon>
+                    <span id="submit-date-span"> reload dashboard</span>
+                  </button>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </div>
         </div>
       </div>
 
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 2e06df3..ac8afd9 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
@@ -24,6 +24,8 @@ a {
 
 .datepicker {
   margin-top: 2em;
+  margin-left: 1em;
+  margin-right: 1em
 }
 
 .submit-date {
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
index 7191ebe..a7e698d 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
@@ -140,6 +140,7 @@ export class DashboardComponent implements OnInit {
           type: 'bar',
           height: chartHeight
         },
+        colors: ['#017bfe'],
         plotOptions: {
           bar: {
             horizontal: false,
@@ -202,6 +203,7 @@ export class DashboardComponent implements OnInit {
             enabled: true
           }
         },
+        colors: ['#017bfe', '#51ca49'],
         dataLabels: {
           enabled: false
         },