feat: add Angular Material theming

package.json

@@ -23,6 +23,8 @@
     "@angular/platform-browser-dynamic": "15.2.6",
     "@angular/platform-server": "15.2.6",
     "@angular/router": "15.2.6",
+    "@angular/material": "15.2.6",
+    "@angular/cdk": "15.2.6",
     "@sendgrid/mail": "^7.2.1",
     "@stripe/stripe-js": "^1.54.1",
     "ag-charts-angular": "^9.3.1",

src/app/app.module.ts

@@ -2,6 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -54,6 +59,7 @@ export const firebaseConfig = {
     BrowserModule,
     FormsModule,
     HttpClientModule,
+    BrowserAnimationsModule,
     AngularFireModule.initializeApp(firebaseConfig),
     AngularFirestoreModule.enablePersistence({synchronizeTabs:true}),
     AngularFireStorageModule,
@@ -64,6 +70,10 @@ export const firebaseConfig = {
     Ng2ImgMaxModule,
     PipeModule.forRoot(),
     AgChartsAngular,
+    MatButtonModule,
+    MatInputModule,
+    MatToolbarModule,
+    MatFormFieldModule,
   ],
   providers: [
     UserInterfaceService,

src/app/login.component.ts

@@ -14,33 +14,41 @@ import { first } from 'rxjs/operators';
     <div class="module form-module" style="max-width:450px">
       <div class="form">
         <form #f="ngForm">
-          <div class="buttonBlack" [hidden]="action=='register'" style="font-size:12px;line-height:15px;width:150px;padding:4px;margin:10px auto" (click)="action='register';messageUser=''">New member</div>
-          <div class="buttonBlack" [hidden]="action=='login'" style="font-size:12px;line-height:15px;width:150px;padding:4px;margin:10px auto" (click)="action='login';messageUser=''">Existing member</div>
-          <div *ngIf="action=='login' || action=='register'">
-            <input maxlength="500" [(ngModel)]="email" name="email" type="text" placeholder="Email *" (keyup)="messageUser=''" autofocus required #e="ngModel"/>
-            <label class="password">
-              <input maxlength="500" [(ngModel)]="password" name="password" [type]="passwordVisibility" [style]="focusPassword" placeholder="Password *" (keyup)="messageUser=''" required #p="ngModel"/>
-              <div class="password-icon" (mousedown)="toggleField('password','show')" (touchstart)="toggleField('password','show')" (mouseup)="toggleField('password','hide')" (touchend)="toggleField('password','hide')">
-                <span class="material-icons-outlined" id="visibility-outlined" [style]="iconOutlined">visibility</span>
-                <span class="material-icons" id="visibility" [style]="icon">visibility</span>
-              </div>
-            </label>
-          </div>
-          <div *ngIf="action=='login'">
-            <button class="buttonWhite" style="font-size:14px;line-height:25px;width:200px;padding:4px;margin:10px auto" (click)="login(email,password)" [disabled]="f.invalid">Login</button>
-            <div class="buttonBlack" style="width:125px;font-size:10px;margin:10px auto" (click)="resetPassword(email)">Forgot password?</div>
-          </div>
-          <div *ngIf="action=='register'">
-            <label class="password">
-              <input maxlength="500" [(ngModel)]="passwordConfirm" name="passwordConfirm" [type]="passwordConfirmVisibility" [style]="focusPasswordConfirm" type="password" placeholder="Confirm password *" (keyup)="messageUser=''" #c="ngModel" required/>
-              <div class="password-icon" (mousedown)="toggleField('passwordConfirm','show')" (touchstart)="toggleField('passwordConfirm','show')" (mouseup)="toggleField('passwordConfirm','hide')" (touchend)="toggleField('passwordConfirm','hide')">
-                <span class="material-icons-outlined" id="visibilityConfirm-outlined" [style]="iconOutlinedConfirm">visibility</span>
-                <span class="material-icons" id="visibilityConfirm" [style]="iconConfirm">visibility</span>
-              </div>
-            </label>
-            <input maxlength="500" [(ngModel)]="name" name="name" type="text" placeholder="First name (one word) *" (keyup)="messageUser=''" #n="ngModel" pattern="[A-Za-z0-9]{2,}" required/>
-            <button type="button" class="buttonWhite" style="font-size:14px;text-align:center;line-height:25px;width:200px;padding:4px;margin:10px auto" (click)="register(email,password,passwordConfirm,name)" [disabled]="f.invalid">Register</button>
-          </div>
+            <button mat-stroked-button [hidden]="action=='register'" style="font-size:12px;line-height:15px;width:150px;padding:4px;margin:10px auto" (click)="action='register';messageUser=''">New member</button>
+            <button mat-stroked-button [hidden]="action=='login'" style="font-size:12px;line-height:15px;width:150px;padding:4px;margin:10px auto" (click)="action='login';messageUser=''">Existing member</button>
+            <div *ngIf="action=='login' || action=='register'">
+              <mat-form-field appearance="fill">
+                <mat-label>Email</mat-label>
+                <input matInput maxlength="500" [(ngModel)]="email" name="email" type="email" placeholder="Email *" (keyup)="messageUser=''" autofocus required #e="ngModel">
+              </mat-form-field>
+              <mat-form-field appearance="fill">
+                <mat-label>Password</mat-label>
+                <input matInput maxlength="500" [(ngModel)]="password" name="password" [type]="passwordVisibility" [style]="focusPassword" placeholder="Password *" (keyup)="messageUser=''" required #p="ngModel">
+                <div class="password-icon" (mousedown)="toggleField('password','show')" (touchstart)="toggleField('password','show')" (mouseup)="toggleField('password','hide')" (touchend)="toggleField('password','hide')">
+                  <span class="material-icons-outlined" id="visibility-outlined" [style]="iconOutlined">visibility</span>
+                  <span class="material-icons" id="visibility" [style]="icon">visibility</span>
+                </div>
+              </mat-form-field>
+            </div>
+            <div *ngIf="action=='login'">
+              <button mat-raised-button color="primary" style="font-size:14px;line-height:25px;width:200px;padding:4px;margin:10px auto" (click)="login(email,password)" [disabled]="f.invalid">Login</button>
+              <button mat-stroked-button style="width:125px;font-size:10px;margin:10px auto" (click)="resetPassword(email)">Forgot password?</button>
+            </div>
+            <div *ngIf="action=='register'">
+              <mat-form-field appearance="fill">
+                <mat-label>Confirm password</mat-label>
+                <input matInput maxlength="500" [(ngModel)]="passwordConfirm" name="passwordConfirm" [type]="passwordConfirmVisibility" [style]="focusPasswordConfirm" placeholder="Confirm password *" (keyup)="messageUser=''" #c="ngModel" required>
+                <div class="password-icon" (mousedown)="toggleField('passwordConfirm','show')" (touchstart)="toggleField('passwordConfirm','show')" (mouseup)="toggleField('passwordConfirm','hide')" (touchend)="toggleField('passwordConfirm','hide')">
+                  <span class="material-icons-outlined" id="visibilityConfirm-outlined" [style]="iconOutlinedConfirm">visibility</span>
+                  <span class="material-icons" id="visibilityConfirm" [style]="iconConfirm">visibility</span>
+                </div>
+              </mat-form-field>
+              <mat-form-field appearance="fill">
+                <mat-label>First name (one word)</mat-label>
+                <input matInput maxlength="500" [(ngModel)]="name" name="name" type="text" placeholder="First name (one word) *" (keyup)="messageUser=''" #n="ngModel" pattern="[A-Za-z0-9]{2,}" required>
+              </mat-form-field>
+              <button mat-raised-button color="primary" type="button" style="font-size:14px;text-align:center;line-height:25px;width:200px;padding:4px;margin:10px auto" (click)="register(email,password,passwordConfirm,name)" [disabled]="f.invalid">Register</button>
+            </div>
           <div *ngIf="messageUser" style="text-align:center;padding:10px;color:#D85140">{{messageUser}}</div>
         </form>
       </div>

src/app/profile.component.ts

@@ -41,7 +41,7 @@ import { ChangeDetectorRef } from '@angular/core'
             <span style="font-size:10px">{{focusUserLastMessageObj?.userPresentation}}</span>
             <span *ngIf="focusUserLastMessageObj?.contract?.signed" style="font-size:10px"> Level {{focusUserLastMessageObj?.contract?.levelTimeAdjusted|number:'1.1-1'}}</span>
             <span *ngIf="focusUserLastMessageObj?.contract?.createdTimestamp&&!focusUserLastMessageObj?.contract?.signed" style="margin:15px;font-size:10px">Waiting for contract signature (Level {{focusUserLastMessageObj?.contract?.level|number:'1.1-1'}})</span>
-            <div class="buttonBlack" *ngIf="focusUserLastMessageObj?.contract?.createdTimestamp&&!focusUserLastMessageObj?.contract?.signed&&UI.currentUser=='QYm5NATKa6MGD87UpNZCTl6IolX2'" style="margin:15px;font-size:10px" (click)=signContract()>Sign contract</div>
+              <button mat-stroked-button *ngIf="focusUserLastMessageObj?.contract?.createdTimestamp&&!focusUserLastMessageObj?.contract?.signed&&UI.currentUser=='QYm5NATKa6MGD87UpNZCTl6IolX2'" style="margin:15px;font-size:10px" (click)=signContract()>Sign contract</button>
             <br>
             <span style="font-size:10px">Created in {{focusUserLastMessageObj?.createdTimestamp|date:'MMMM yyyy'}}</span>
             <br>
@@ -52,11 +52,11 @@ import { ChangeDetectorRef } from '@angular/core'
           </div>
         </div>
       </div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='inbox'?'#B0BAC0':'black'" (click)="mode='inbox';refreshMessages()">inbox</div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='history'?'#B0BAC0':'black'" (click)="mode='history';refreshMessages();refreshChart()">history</div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='chain'?'#B0BAC0':'black'" (click)="mode='chain';refreshMessages()">chain</div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='forecast'?'#B0BAC0':'black'" (click)="mode='forecast';refreshMessages()">forecast</div>
-      <div class="buttonBlack" *ngIf="UI.currentUser&&UI.currentUser!=focusUserLastMessageObj?.user" (click)="newMessageToUser()" style="clear:both;width:250px;margin:5px;font-size:11px">New message to {{focusUserLastMessageObj?.name}}</div>
+        <button mat-stroked-button style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='inbox'?'#B0BAC0':'black'" (click)="mode='inbox';refreshMessages()">inbox</button>
+        <button mat-stroked-button style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='history'?'#B0BAC0':'black'" (click)="mode='history';refreshMessages();refreshChart()">history</button>
+        <button mat-stroked-button style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='chain'?'#B0BAC0':'black'" (click)="mode='chain';refreshMessages()">chain</button>
+        <button mat-stroked-button style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='forecast'?'#B0BAC0':'black'" (click)="mode='forecast';refreshMessages()">forecast</button>
+        <button mat-raised-button color="primary" *ngIf="UI.currentUser&&UI.currentUser!=focusUserLastMessageObj?.user" (click)="newMessageToUser()" style="clear:both;width:250px;margin:5px;font-size:11px">New message to {{focusUserLastMessageObj?.name}}</button>
       <div class="separator" style="width:100%;margin:0px"></div>
     </div>
     <div *ngIf="scope=='all'">
@@ -78,7 +78,7 @@ import { ChangeDetectorRef } from '@angular/core'
           (click)="router.navigate(['chat',message.payload.doc.data()?.chain])">
           <div *ngIf="scope=='all'||mode=='inbox'">
             <div *ngIf="message.payload.doc.data()?.eventDateEnd/60000>UI.nowSeconds/60">
-            <span *ngIf="message.payload.doc.data()?.eventLocation" class="buttonBlack" style="float:right;padding:5px;margin:10px;line-height:13px" (click)="UI.openWindow(message.payload.doc.data()?.eventLocation)">Join</span>
+              <button *ngIf="message.payload.doc.data()?.eventLocation" mat-stroked-button style="float:right;padding:5px;margin:10px;line-height:13px" (click)="UI.openWindow(message.payload.doc.data()?.eventLocation);$event.stopPropagation()">Join</button>
             <div style="float:left;min-width:90px;min-height:40px">
               <span class="material-icons-outlined" style="float:left;margin:7px 4px 7px 4px;font-size:40px;cursor:pointer">event</span>
             </div>

src/styles.css

@@ -1,3 +1,11 @@
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+/* Customize Material components to match app palette */
+.mat-toolbar {
+  background-color: #222C32;
+  color: #B0BAC0;
+}
+
 *, *:before, *:after {
   box-sizing: border-box;
   font-family: verdana;