feat: add global theme, implement all styles on contact person form

projects/ng-hoepel-common/src/lib/tenant-contact/tenant-contact-dumb/tenant-contact-dumb.component.html

@@ -1,14 +1,14 @@
 <form fxLayout="column" fxLayoutAlign="start"
       fxFlex="1 0 auto" name="form" [formGroup]="form">
 
-  <div class="h2 mb-24">Naam</div>
+  <h2 class="mb-24">Naam</h2>
 
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto" class="mb-8">
 
     <mat-form-field appearance="outline" fxFlex="100">
       <mat-label>Naam organisatie</mat-label>
       <input matInput formControlName="name">
-      <mat-icon matSuffix class="disabled-text">domain</mat-icon>
+      <mat-icon matSuffix class="muted-text">domain</mat-icon>
       <mat-error>Gelieve een organisatienaam in te vullen (bv. "Speelplein Huppel VZW")</mat-error>
     </mat-form-field>
 
@@ -19,13 +19,13 @@
     <mat-form-field appearance="outline" fxFlex="100">
       <mat-label>Algemeen emailadres (bv. [email protected])</mat-label>
       <input matInput formControlName="email">
-      <mat-icon matSuffix class="disabled-text">alternate_email</mat-icon>
+      <mat-icon matSuffix class="muted-text">alternate_email</mat-icon>
       <mat-error>Gelieve een algemeen emailadres in te vullen</mat-error>
     </mat-form-field>
 
   </div>
 
-  <div class="h2 mb-24">Postadres</div>
+  <h2 class="mb-24">Postadres</h2>
 
   <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto" class="mb-8">
 
@@ -38,27 +38,27 @@
     <mat-form-field appearance="outline" fxFlex="50">
       <mat-label>Postcode</mat-label>
       <input matInput formControlName="zipCode">
-      <mat-icon matSuffix class="secondary-text">markunread_mailbox</mat-icon>
+      <mat-icon matSuffix class="muted-text">markunread_mailbox</mat-icon>
       <mat-error>Gelieve een postcode in te vullen</mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="outline" fxFlex="50" class="pl-8">
       <mat-label>Stad</mat-label>
       <input matInput formControlName="city">
-      <mat-icon matSuffix class="secondary-text">location_city</mat-icon>
+      <mat-icon matSuffix class="muted-text">location_city</mat-icon>
       <mat-error>Gelieve een stad of gemeente in te vullen</mat-error>
     </mat-form-field>
 
   </div>
 
-  <div class="h2 mb-24">Contactpersoon</div>
+  <h2 class="mb-24">Contactpersoon</h2>
 
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto" class="mb-8">
 
     <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
       <mat-label>Naam contactpersoon</mat-label>
       <input matInput formControlName="contactPersonName" required>
-      <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
+      <mat-icon matSuffix class="muted-text">account_circle</mat-icon>
       <mat-error>Gelieve de naam in te vullen van de contactpersoon</mat-error>
     </mat-form-field>
 
@@ -69,7 +69,7 @@
     <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
       <mat-label>Telefoonnummer contactpersoon</mat-label>
       <input matInput formControlName="contactPersonPhone">
-      <mat-icon matSuffix class="secondary-text">phone</mat-icon>
+      <mat-icon matSuffix class="muted-text">phone</mat-icon>
     </mat-form-field>
 
   </div>
@@ -79,7 +79,7 @@
     <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
       <mat-label>Emailadres contactpersoon</mat-label>
       <input matInput formControlName="contactPersonEmail">
-      <mat-icon matSuffix class="secondary-text">alternate_email</mat-icon>
+      <mat-icon matSuffix class="muted-text">alternate_email</mat-icon>
     </mat-form-field>
 
   </div>

projects/ng-hoepel-common/src/theme.scss

@@ -0,0 +1,16 @@
+@mixin hoepel-angular-common-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .secondary-text {
+    color: map-get($foreground, secondary-text);
+  }
+
+  .disabled-text {
+    color: map-get($foreground, disabled-text);
+  }
+
+  .muted-text {
+    color: map-get($foreground, disabled-text);
+  }
+}