Added alert dialog logic and disabled header text translation

ClientApp/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { MatRippleModule } from '@angular/material/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { AlertDialogComponent } from './home/alert-dialog/alert-dialog.component';
 
 
 
@@ -30,7 +31,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     AppComponent,
     NavMenuComponent,
     HomeComponent,
-    LockinDialogComponent
+    LockinDialogComponent,
+    AlertDialogComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

ClientApp/src/app/home/alert-dialog/alert-dialog.component.html

@@ -0,0 +1,9 @@
+<div style="padding: 20px;">
+  <p style="font-weight: bold;">One-Time Disclaimer!</p>
+  <p>This site is un-official & not affiliated with GameStop Corp.
+  <br />(since I see it asked alot)</p>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="true" style="background-color: rgba(255,255,255,.4);"><span style="color: white; font-weight:500; opacity:1;">Continue to Build Controller!</span></button>
+</div>

ClientApp/src/app/home/alert-dialog/alert-dialog.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertDialogComponent } from './alert-dialog.component';
+
+describe('AlertDialogComponent', () => {
+  let component: AlertDialogComponent;
+  let fixture: ComponentFixture<AlertDialogComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlertDialogComponent]
+    });
+    fixture = TestBed.createComponent(AlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ClientApp/src/app/home/alert-dialog/alert-dialog.component.ts

@@ -0,0 +1,15 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-alert-dialog',
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.scss']
+})
+export class AlertDialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<AlertDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+}

ClientApp/src/app/home/home.component.ts

@@ -7,6 +7,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { LockinDialogComponent } from './lockin-dialog/lockin-dialog.component';
 import { MatDrawerMode } from '@angular/material/sidenav';
+import { AlertDialogComponent } from './alert-dialog/alert-dialog.component';
 
 type ColorDictionary = {
   [key: string]: string;
@@ -133,7 +134,7 @@ export class HomeComponent {
   };
 
 
-  constructor(private themeService: ThemeService, public dialog: MatDialog) {
+  constructor(private themeService: ThemeService, public dialog: MatDialog, public alertDialog: MatDialog) {
     this.adjustSidenavMode();
   }
 
@@ -150,6 +151,14 @@ export class HomeComponent {
 
   ngOnInit(): void {
 
+    // Initial alert
+    /*
+    this.alertDialog.open(AlertDialogComponent, {
+      width: '600px',
+      panelClass: 'alert-dialog'
+    });
+    */
+
     // Pre-instantiate Lock In dialog
     this.dialogRef = this.dialog.open(LockinDialogComponent, { disableClose: true });
     this.dialogRef.close(); // immediately close

ClientApp/src/app/nav-menu/nav-menu.component.html

@@ -5,7 +5,7 @@
     <div class="container" style="margin-left: 0px; min-width: -webkit-fill-available; z-index: 1000; background-color: black; font-color: white; text-align: end; flex-wrap:nowrap;">
       <a class="navbar-brand" [routerLink]="['/']" style="white-space: nowrap;">
         <img style="padding-right: 5px; filter: brightness(50%) sepia(100) saturate(100) hue-rotate(325deg);" width="45" src="assets/candycon_minimal_light.png" alt="CandyConLab">
-        <span style="font-family:Impact">Candy Con
+        <span style="font-family:Impact" translate="no">Candy Con
           <img width="42" height="26" style="transform:scale(.9); margin-left: -2px;" src="assets/lab_icon.png" alt="Lab"></span> 
       </a>
       <button

ClientApp/src/app/theme.scss

@@ -826,6 +826,14 @@ $light-red-theme: mat.define-light-theme((
     overflow: visible !important;
   }
 
+  .alert-dialog .mat-mdc-dialog-container .mdc-dialog__surface {
+    //background-color: deeppink !important;
+    background-color: transparent !important;
+    backdrop-filter: blur(35px) brightness(4);
+    box-shadow: 0 0 8px 10px rgba(255, 255, 255, 0.1);
+    overflow: visible !important;
+  }
+
   .mdc-menu-surface {
     background-color: map-get($primary, 600) !important;
     //background-color: #5e5e5e !important;