change dashboard user-input alignment

projects/project-3/frontend/src/app/dashboard/dashboard.component.html

@@ -18,8 +18,21 @@
   <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">
+      <div class="input-container" fxFlex="25%" fxLayout="column">
-        <mat-card class="mat-card-info" fxFlex>
+        <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">
@@ -41,16 +54,7 @@
                 </div>
               </mat-card-content>
             </mat-card>
-        <div class="container-info">
+          </div>
-          <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>
       </div>
 

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 {

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
         },