Tailwind eingebaut

client/src/app/modules/keys/components/archive/archive.component.scss

@@ -1,3 +0,0 @@
-mat-dialog-content{
-
-}

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html

@@ -8,7 +8,7 @@
 <mat-tab-group mat-stretch-tabs="true" mat-align-tabs="start" [dynamicHeight]="true" >
   <mat-tab label="Neue Übergabe"  >
     <mat-dialog-content>
-    <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 12px;">
+    <form [formGroup]="handoverForm" class="flex flex-col items-stretch justify-stretch">
       <!-- <h6>Neue Übergabe anlegen:</h6> -->
   
       <mat-form-field>
@@ -27,7 +27,7 @@
   
       <div style="margin: 24px 0;">
         Der Schlüssel wurde
-        <mat-radio-group formControlName="direction" class="flex-column" style="align-items: flex-start; justify-content: flex-start;">
+        <mat-radio-group formControlName="direction" class="flex flex-col justify-items-start items-start">
           <mat-radio-button  [value]="'out'">Ausgegeben</mat-radio-button>
           <mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
         </mat-radio-group>
@@ -49,8 +49,8 @@
   </mat-tab>
 
   <mat-tab label="Historie">
-  <mat-dialog-content class="no-padding">
-    <div style="height: 300px; padding: 12px 0 0 0;">
+  <mat-dialog-content class="p-0">
+    <div style="height: 300px;" class="pt-3 px-0 pr-0">
       <ag-grid-angular
       style="width: 100%; height: 100%;"
       (gridReady)="onGridReady($event)"

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.scss

@@ -3,26 +3,9 @@
   max-height: calc(100vh - 24px);
   display: flex;
   flex-direction: column;
-}
-
-form {
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-:host {
   position: relative;
 }
 
-.handouts{
-  //margin-top: 32px;
-  width: 100%;
-}
-
 th, td {
   text-align: start;
-}
-
-.no-padding {
-  padding: 0 !important;
 }

client/src/app/modules/keys/create/create.component.html

@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Neuen Schlüssel anlegen</h2>
 <mat-dialog-content>
-  <form [formGroup]="createForm" >
+  <form [formGroup]="createForm" class="flex flex-col gap-3">
 
     <mat-form-field>
       <mat-label>Name</mat-label>

client/src/app/modules/keys/create/create.component.scss

@@ -1,5 +0,0 @@
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}

client/src/styles.scss

@@ -3,6 +3,12 @@
 @import "ag-grid-community/styles/ag-grid.css";
 /* Quartz Theme Specific CSS */
 @import 'ag-grid-community/styles/ag-theme-quartz.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
 html, body {
   height: 100vh;
   width: 100vw;
@@ -13,18 +19,6 @@ html, body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-column {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
 
 .icon-btn-sm {
   // box-shadow: 0 0 0 4px transparent,0 1px 2px #0c111d11;