(@asegers) Improve form styles

src/app/pages/account/account.component.html

-<mat-card [style.width.px]="400" [style.margin-left]="'auto'" [style.margin-top.px]="40">
+<mat-card [style.width.px]="400" [style.height.%]="90" [style.margin-left]="'auto'" [style.margin-top.px]="40">
   <mat-card-header>
-    <mat-card-title>
-      <h4>Create An Account</h4>
-    </mat-card-title>
+    <mat-card-title><h4>Create An Account</h4></mat-card-title>
   </mat-card-header>
   <mat-card-content class="register-container">
-    <form [formGroup]="accountForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="32px">
-      <mat-form-field appearance="fill">
+    <form [formGroup]="accountForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="15px">
+      <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
         <input matInput formControlName="username" autocomplete="username" required>
         <mat-icon matSuffix>account_circle</mat-icon>
         <mat-error *ngIf="accountForm.controls.username.errors">Must be at least 4 characters</mat-error>
       </mat-form-field>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="outline">
         <mat-label>Email</mat-label>
         <input matInput formControlName="email" type="email" autocomplete="email" required>
         <mat-icon matSuffix>email</mat-icon>
         <mat-error *ngIf="accountForm.controls.email.errors">Invalid email address</mat-error>
       </mat-form-field>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="outline">
         <mat-label>Password</mat-label>
-        <input matInput formControlName="password" autocomplete="new-password" required>
-        <mat-icon matSuffix>lock</mat-icon>
+        <input matInput formControlName="password" [type]="hidePassword ? 'password' : 'text'" autocomplete="new-password" required>
+        <mat-icon matSuffix (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
         <mat-error *ngIf="accountForm.controls.password.errors">
           Must be at least 8 characters &
           should contain one number, one character, and one special character
         </mat-error>
+        <mat-hint>Reveal password by clicking the eye icon</mat-hint>
       </mat-form-field>
       <div>
         <button type="submit" [disabled]="accountForm.invalid || loading" mat-flat-button color="primary" >

src/app/pages/account/account.component.ts

@@ -20,6 +20,7 @@ export class AccountComponent {
     ]),
   });
   loading = false;
+  hidePassword = true;
   onSubmit(): void {
     this.accountForm.disable();
     this.loading = true;

src/app/pages/contact/contact.component.html

-<mat-card [style.width.px]="400" [style.margin-left]="'auto'" [style.margin-top.px]="40">
+<mat-card [style.width.px]="400" [style.height.%]="90" [style.margin-left]="'auto'" [style.margin-top.px]="40">
   <mat-card-header>
-    <mat-card-title>
-      <h4>Send Us A Message</h4>
-    </mat-card-title>
+    <mat-card-title><h4>Send Us A Message</h4></mat-card-title>
   </mat-card-header>
   <mat-card-content class="register-container">
-    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="20px">
-      <mat-form-field appearance="fill">
+    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="15px">
+      <mat-form-field appearance="outline">
         <mat-label>First Name</mat-label>
         <input matInput formControlName="firstName" autocomplete="given-name" required>
-        <mat-icon matSuffix>account_circle</mat-icon>
+        <mat-icon matSuffix>badge</mat-icon>
         <mat-error *ngIf="contactForm.controls.firstName.errors">Required</mat-error>
       </mat-form-field>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="outline">
         <mat-label>Last Name</mat-label>
         <input matInput formControlName="lastName" autocomplete="family-name" required>
-        <mat-icon matSuffix>account_circle</mat-icon>
         <mat-error *ngIf="contactForm.controls.lastName.errors">Required</mat-error>
       </mat-form-field>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="outline">
         <mat-label>Email</mat-label>
         <input matInput formControlName="email" type="email" autocomplete="email" required>
         <mat-icon matSuffix>email</mat-icon>
         <mat-error *ngIf="contactForm.controls.email.errors">Invalid email address</mat-error>
       </mat-form-field>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="outline">
         <mat-label>Comments</mat-label>
-        <textarea matInput formControlName="comments" autocomplete="off">
+        <textarea matInput formControlName="comments" autocomplete="off" rows="4" cols="50">
         </textarea>
-        <mat-icon matSuffix>lock</mat-icon>
+        <mat-icon matSuffix>insert_comment</mat-icon>
       </mat-form-field>
       <div>
         <button type="submit" [disabled]="contactForm.invalid || loading" mat-flat-button color="primary" >