minor modifications to summary view

src/app/app.module.ts

@@ -50,6 +50,7 @@ import { MatTreeModule } from '@angular/material/tree'
 import { FormDialogComponent } from './module/components/customUX/forms/form-dialog/form-dialog.component'
 import { AlertComponent } from './module/components/customUX/alert/alert.component'
 import { MatSnackBarModule } from '@angular/material/snack-bar'
+import { MatButtonToggleModule } from '@angular/material/button-toggle'
 
 const MY_DATE_FORMATS: MatDateFormats = {
     parse: {
@@ -113,6 +114,7 @@ const MY_DATE_FORMATS: MatDateFormats = {
         MomentDateModule,
         MatTreeModule,
         MatSnackBarModule,
+        MatButtonToggleModule,
     ],
     //Todo remove old swagger client
     providers: [

src/app/module/pages/home/summary/summary.component.html

 <div class='w-full flex flex-col'>
-  <div class='flex flex-wrap justify-between pt-3 mx-[15px]'>
-    <div class='sm:w-1/2 w-full'>
-      <!--Input field -->
-      <div class='flex flex-col sm:flex-row min-h-min w-full'>
+    <div class='flex flex-wrap justify-between pt-3 mx-[15px] items-center'>
+        <div class='sm:w-1/3 w-full'>
+            <!--Input field -->
+            <div class='flex flex-col sm:flex-row min-h-min w-full items-center'>
+                <div class='mat-headline-5 m-0'>Sensor Tageswerte</div>
+            </div>
+        </div>
+        <div class='sm:w-2/3 w-full sm:mt-0 mt-3'>
+            <div
+                class='flex flex-col sm:flex-row w-full justify-end items-center'
+            >
+                <mat-form-field class='sm:mr-5 mr-0'>
+                    <mat-select [formControl]='stationControl' placeholder='Station'>
+                        <mat-option *ngFor='let topping of availableStation' [value]='topping'
+                        >{{ topping }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+                <mat-form-field class='sm:mr-5 mr-0'>
+                    <mat-label>Wählen Sie ein Datum</mat-label>
+                    <input [formControl]='dateControl' [matDatepicker]='picker' matInput />
+                    <mat-hint>DD/MM/YYYY</mat-hint>
+                    <mat-datepicker-toggle
+                        [for]='picker'
+                        matIconSuffix
+                    ></mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </mat-form-field>
+                <!-- Margin bottom to respect the hint height -->
+                <mat-button-toggle-group style='margin-bottom: 21px'>
+                    <mat-button-toggle (click)='isGrid = true' [checked]='isGrid'
+                                       class='w-full h-full inline-flex justify-center items-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800 rounded-l'
+                                       type='button'>
+                        <mat-icon>grid_view</mat-icon>
+                    </mat-button-toggle>
+
+                    <mat-button-toggle
+                        (click)='isGrid = false'
+                        class='w-full h-full inline-flex justify-center items-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800 rounded-r'
+                        type='button'
+                    >
+                        <mat-icon>table_rows</mat-icon>
+                    </mat-button-toggle>
+                </mat-button-toggle-group>
+            </div>
+        </div>
+    </div>
+    <div class='flex justify-between pt-3 mx-[15px]'>
         <div
-          class='flex min-h-full w-full sm:w-full justify-center sm:justify-start float-left'
+            *ngIf='!levelOne || levelOne.avgMinMax?.length == 0'
+            class='flex border border-gray-200 dark:border-gray-700 min-h-min w-full justify-center items-center font-bold'
         >
-          <div
-            class='flex items-center pl-2 rounded h-14 border border-indigo-600 text-base'
-          >
-            Sensor Tageswerte
-            <button
-              (click)='isGrid = true'
-              class='ml-8 h-full px-4 inline-flex justify-center items-center gap-2 border-2 border-indigo-200 font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800 rounded-l'
-              type='button'
-            >
-              <mat-icon>grid_view</mat-icon>
-            </button>
-            <button
-              (click)='isGrid = false'
-              class='h-full px-4 inline-flex justify-center items-center gap-2 border-2 border-indigo-200 font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800 rounded-r'
-              type='button'
-            >
-              <mat-icon>table_rows</mat-icon>
-            </button>
-          </div>
+            Bitte Station und Datum auswählen
         </div>
-      </div>
     </div>
-    <div class='sm:w-1/2 w-full sm:mt-0 mt-3'>
-      <div
-        class='flex flex-col sm:flex-row  w-full float-right justify-end'
-      >
-        <mat-form-field appearance='outline' class='sm:mr-5 mr-0'>
-          <mat-select [formControl]='stationControl' placeholder='Station'>
-            <mat-option *ngFor='let topping of availableStation' [value]='topping'
-            >{{ topping }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+    <app-list-icon
+        [avgMinMax]='avgMinMax'
+        [dentrometerDailyValue]='dentrometerDailyValue'
+        [isGrid]='isGrid'
+        [sumOrAvg]='sumOrAvg'
+    ></app-list-icon>
 
-        <mat-form-field appearance='outline' class=''>
-          <mat-label>Wählen Sie ein Datum</mat-label>
-          <input [formControl]='dateControl' [matDatepicker]='picker' matInput />
-          <mat-hint>DD/MM/YYYY</mat-hint>
-          <mat-datepicker-toggle
-            [for]='picker'
-            matIconSuffix
-          ></mat-datepicker-toggle>
-          <mat-datepicker #picker></mat-datepicker>
-        </mat-form-field>
-      </div>
+    <div class='fixed top-0 left-1/2 transition duration-500 ease-in-out -translate-x-1/2 z-50'>
+        <app-alert *ngIf='toastVisible' message='{{toastType}}' type='{{toastMessage}}'></app-alert>
     </div>
-  </div>
-  <div class='flex justify-between pt-3 mx-[15px]'>
-    <div
-      *ngIf='!levelOne || levelOne.avgMinMax?.length == 0'
-      class='flex border border-gray-200 dark:border-gray-700 min-h-min w-full justify-center items-center font-bold'
-    >
-      Bitte Station und Datum auswählen
-    </div>
-  </div>
-  <app-list-icon
-    [avgMinMax]='avgMinMax'
-    [dentrometerDailyValue]='dentrometerDailyValue'
-    [isGrid]='isGrid'
-    [sumOrAvg]='sumOrAvg'
-  ></app-list-icon>
-
-  <div  class="fixed top-0 left-1/2 transition duration-500 ease-in-out -translate-x-1/2 z-50">
-    <app-alert *ngIf="toastVisible" type="{{toastMessage}}" message="{{toastType}}" ></app-alert>
-  </div>
 </div>