From e58a0cd2ed521a0df5cac3581b383dfb34e0fae9 Mon Sep 17 00:00:00 2001
From: Pablo Lopez <pflopez@gmail.com>
Date: Thu, 22 Aug 2024 15:34:52 -0300
Subject: [PATCH] remove legacy dialog usage and fix conflicting dependencies 
 (#1684)

* remove legacy dialog usage

* updated more styles related to dialog

* updating more modal styles

* using mixin for legacy dialog styles
---
 .../delete-account-dialog.component.scss      |  6 ++++++
 .../delete-account-dialog.component.spec.ts   | 11 ++++++-----
 .../delete-account-dialog.component.ts        |  6 ++----
 .../delete-account.component.spec.ts          |  3 ++-
 .../delete-account.component.ts               |  2 +-
 src/interface/src/app/app.module.ts           |  2 +-
 .../plan-table/plan-table.component.spec.ts   |  3 ++-
 .../home/plan-table/plan-table.component.ts   |  6 ++----
 .../share-plan-dialog.component.spec.ts       |  6 ++----
 .../share-plan-dialog.component.ts            |  6 ++----
 .../invalid-link-dialog.component.scss        |  1 +
 .../invalid-link-dialog.component.spec.ts     |  2 +-
 .../invalid-link-dialog.component.ts          |  2 +-
 .../src/app/map/map.component.spec.ts         |  6 ++----
 src/interface/src/app/map/map.component.ts    |  3 ++-
 .../outside-region-dialog.component.scss      |  5 +++++
 .../outside-region-dialog.component.spec.ts   |  2 +-
 .../outside-region-dialog.component.ts        |  2 +-
 .../plan-create-dialog.component.html         |  2 +-
 .../plan-create-dialog.component.scss         | 12 ++++++++++++
 .../plan-create-dialog.component.spec.ts      |  5 +----
 .../plan-create-dialog.component.ts           |  5 +----
 .../sign-in-dialog.component.html             |  2 +-
 .../sign-in-dialog.component.scss             |  9 +++++++++
 .../sign-in-dialog.component.spec.ts          |  2 +-
 .../sign-in-dialog.component.ts               |  2 +-
 .../app/material/legacy-material.module.ts    |  3 ++-
 .../area-notes/area-notes.component.spec.ts   |  3 ++-
 .../plan/area-notes/area-notes.component.ts   |  3 ++-
 .../delete-note-dialog.component.spec.ts      |  5 +----
 .../delete-note-dialog.component.ts           |  3 ++-
 .../map-layer-select-dialog.component.spec.ts |  8 ++++----
 .../map-layer-select-dialog.component.ts      |  8 ++++----
 .../app/plan/plan-map/plan-map.component.ts   |  3 ++-
 .../app/shared/nav-bar/nav-bar.component.ts   |  3 ++-
 .../share-explore-dialog.component.scss       |  4 ++--
 .../share-explore-dialog.component.spec.ts    |  2 +-
 .../share-explore-dialog.component.ts         |  3 ++-
 .../delete-dialog.component.spec.ts           |  5 +----
 .../delete-dialog/delete-dialog.component.ts  |  5 +----
 .../forget-password.component.spec.ts         |  2 +-
 .../forget-password.component.ts              |  2 +-
 ...word-confirmation-dialog.component.spec.ts |  6 ++----
 .../password-confirmation-dialog.component.ts |  3 ++-
 .../password-reset.component.spec.ts          |  3 ++-
 .../password-reset.component.ts               |  2 +-
 .../planning-area-menu.component.spec.ts      |  5 +++--
 ...nning-area-titlebar-menu.component.spec.ts |  5 +++--
 .../reset-password.component.scss             |  4 ++++
 .../reset_password_dialog.component.ts        |  3 ++-
 src/interface/src/styles.scss                 |  1 +
 src/interface/src/styles/_mixins.scss         |  8 ++++++++
 src/interface/src/styles/material.scss        | 19 +++++++++++++++++++
 53 files changed, 144 insertions(+), 90 deletions(-)
 create mode 100644 src/interface/src/app/standalone/reset-password-dialog/reset-password.component.scss

diff --git a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.scss b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.scss
index 845cc3e2f..97cbd337b 100644
--- a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.scss
+++ b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.scss
@@ -1,3 +1,9 @@
+@import "mixins";
+
+:host {
+  @include legacy-dialog-margin();
+}
+
 .delete-account-dialog {
   align-items: center;
   display: flex;
diff --git a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts
index 1443e01df..8f1b81cc7 100644
--- a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts
+++ b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts
@@ -3,17 +3,18 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { AuthService } from '@services';
 
 import { DeleteAccountDialogComponent } from './delete-account-dialog.component';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog';
 
 describe('DeleteAccountDialogComponent', () => {
   let component: DeleteAccountDialogComponent;
diff --git a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.ts b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.ts
index 2069fe524..b0cd57ff8 100644
--- a/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.ts
+++ b/src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.ts
@@ -1,11 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { AuthService } from '@services';
 import { User } from '@types';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-delete-account-dialog',
diff --git a/src/interface/src/app/account/delete-account/delete-account.component.spec.ts b/src/interface/src/app/account/delete-account/delete-account.component.spec.ts
index 95818b78f..ae8feb783 100644
--- a/src/interface/src/app/account/delete-account/delete-account.component.spec.ts
+++ b/src/interface/src/app/account/delete-account/delete-account.component.spec.ts
@@ -2,10 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DeleteAccountComponent } from './delete-account.component';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { MockProvider } from 'ng-mocks';
 import { AuthService } from '@services';
 import { Router } from '@angular/router';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('DeleteAccountComponent', () => {
   let component: DeleteAccountComponent;
diff --git a/src/interface/src/app/account/delete-account/delete-account.component.ts b/src/interface/src/app/account/delete-account/delete-account.component.ts
index c94af17ab..12c288141 100644
--- a/src/interface/src/app/account/delete-account/delete-account.component.ts
+++ b/src/interface/src/app/account/delete-account/delete-account.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { AuthService } from '@services';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { DeleteAccountDialogComponent } from '../delete-account-dialog/delete-account-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-delete-account',
diff --git a/src/interface/src/app/app.module.ts b/src/interface/src/app/app.module.ts
index d58eb7abc..1947a05a9 100644
--- a/src/interface/src/app/app.module.ts
+++ b/src/interface/src/app/app.module.ts
@@ -23,7 +23,6 @@ import { FeaturesModule } from './features/features.module';
 import { HomeComponent } from './home/home.component';
 import { JwtInterceptor, WINDOW_PROVIDERS } from '@services';
 import { MapModule } from './map/map.module';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 
 import { LegacyMaterialModule } from './material/legacy-material.module';
 
@@ -37,6 +36,7 @@ import { environment } from 'src/environments/environment';
 import { DeleteDialogComponent } from './standalone/delete-dialog/delete-dialog.component';
 import { LegacyPlanningAreasComponent } from './home/legacy-planning-areas/legacy-planning-areas.component';
 import { PlanningAreasComponent } from './standalone/planning-areas/planning-areas.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [
diff --git a/src/interface/src/app/home/plan-table/plan-table.component.spec.ts b/src/interface/src/app/home/plan-table/plan-table.component.spec.ts
index 20a2d3be3..7de70958c 100644
--- a/src/interface/src/app/home/plan-table/plan-table.component.spec.ts
+++ b/src/interface/src/app/home/plan-table/plan-table.component.spec.ts
@@ -6,13 +6,14 @@ import { DeleteDialogComponent } from '../../standalone/delete-dialog/delete-dia
 import { FeaturesModule } from '../../features/features.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MOCK_PLAN } from '@services/mocks';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockComponent } from 'ng-mocks';
 import { Plan } from '@types';
 import { PlanTableComponent } from './plan-table.component';
 import { Router } from '@angular/router';
 import { SectionLoaderComponent } from '@shared';
+import { MatDialog } from '@angular/material/dialog';
 
 describe('PlanTableComponent', () => {
   const fakePlan1: Plan = MOCK_PLAN;
diff --git a/src/interface/src/app/home/plan-table/plan-table.component.ts b/src/interface/src/app/home/plan-table/plan-table.component.ts
index 63ba2ffbd..300e84738 100644
--- a/src/interface/src/app/home/plan-table/plan-table.component.ts
+++ b/src/interface/src/app/home/plan-table/plan-table.component.ts
@@ -1,8 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatSort } from '@angular/material/sort';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
@@ -19,6 +16,7 @@ import {
 } from '../../plan/permissions';
 import { Plan, PreviewPlan } from '@types';
 import { DeleteDialogComponent } from '../../standalone/delete-dialog/delete-dialog.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-plan-table',
diff --git a/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts b/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts
index 954ad3b4f..847d3f76e 100644
--- a/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts
+++ b/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts
@@ -3,16 +3,14 @@ import { SharePlanDialogComponent } from './share-plan-dialog.component';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockComponents, MockProvider } from 'ng-mocks';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { AuthService, InvitesService, PlanStateService } from '@services';
 import { BehaviorSubject, NEVER, of } from 'rxjs';
 import { User } from '@types';
 import { ChipInputComponent } from '../chip-input/chip-input.component';
 import { SectionLoaderComponent } from '@shared';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('SharePlanDialogComponent', () => {
   let component: SharePlanDialogComponent;
diff --git a/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.ts b/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.ts
index 36923b49f..52535491b 100644
--- a/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.ts
+++ b/src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.ts
@@ -1,13 +1,11 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { FormMessageType, Invite, INVITE_ROLE, User } from '@types';
 import { SNACK_BOTTOM_NOTICE_CONFIG } from '@shared';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { AuthService, InvitesService, PlanStateService } from '@services';
 import { filter, map, shareReplay, switchMap, tap } from 'rxjs';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 const Roles: Record<INVITE_ROLE, INVITE_ROLE> = {
   Viewer: 'Viewer',
diff --git a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.scss b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.scss
index 28051e382..8740e78bc 100644
--- a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.scss
+++ b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.scss
@@ -2,6 +2,7 @@
 @import "colors";
 
 :host {
+  @include legacy-dialog-margin();
   display: block;
   max-width: 535px;
 }
diff --git a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts
index 2ea596a5b..5e514f064 100644
--- a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts
+++ b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts
@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { InvalidLinkDialogComponent } from './invalid-link-dialog.component';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('InvalidLinkDialogComponent', () => {
   let component: InvalidLinkDialogComponent;
diff --git a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.ts b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.ts
index f98171532..3e100bc31 100644
--- a/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.ts
+++ b/src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-invalid-link-dialog',
diff --git a/src/interface/src/app/map/map.component.spec.ts b/src/interface/src/app/map/map.component.spec.ts
index 236aa7106..109fa2a47 100644
--- a/src/interface/src/app/map/map.component.spec.ts
+++ b/src/interface/src/app/map/map.component.spec.ts
@@ -11,10 +11,7 @@ import {
 } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Router } from '@angular/router';
 import { featureCollection, point } from '@turf/helpers';
@@ -57,6 +54,7 @@ import {
 import * as esri from 'esri-leaflet';
 import { MockProvider } from 'ng-mocks';
 import { MOCK_FEATURE_COLLECTION, MOCK_PLAN } from '@services/mocks';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 describe('MapComponent', () => {
   let component: MapComponent;
diff --git a/src/interface/src/app/map/map.component.ts b/src/interface/src/app/map/map.component.ts
index a65638ee3..f353ffe63 100644
--- a/src/interface/src/app/map/map.component.ts
+++ b/src/interface/src/app/map/map.component.ts
@@ -15,7 +15,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Feature, FeatureCollection, Geometry } from 'geojson';
@@ -78,6 +78,7 @@ import { getPlanPath } from '../plan/plan-helpers';
 import { InvalidLinkDialogComponent } from './invalid-link-dialog/invalid-link-dialog.component';
 import { Location } from '@angular/common';
 import { HomeParametersStorageService } from '@services/local-storage.service';
+import { MatDialog } from '@angular/material/dialog';
 
 @UntilDestroy()
 @Component({
diff --git a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.scss b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.scss
index e69de29bb..26cba914e 100644
--- a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.scss
+++ b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.scss
@@ -0,0 +1,5 @@
+@import "mixins";
+
+:host {
+  @include legacy-dialog-margin();
+}
diff --git a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts
index de57377cb..fdbfca684 100644
--- a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts
+++ b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts
@@ -5,7 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { DialogModule } from '@angular/cdk/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('OutsideRegionDialogComponent', () => {
   let component: OutsideRegionDialogComponent;
diff --git a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.ts b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.ts
index dba82d59b..e448d5cb1 100644
--- a/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.ts
+++ b/src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-outside-region-dialog',
diff --git a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.html b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.html
index 8d2c4fb9e..085317441 100644
--- a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.html
+++ b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.html
@@ -1,4 +1,4 @@
-<h3 mat-dialog-title>Name your plan</h3>
+<h3 mat-dialog-title class="title">Name your plan</h3>
 <form [formGroup]="planForm" (ngSubmit)="submit()">
   <mat-dialog-content>
     <div class="info">
diff --git a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.scss b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.scss
index e68ebbde7..afef6162c 100644
--- a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.scss
+++ b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.scss
@@ -1,3 +1,7 @@
+:host {
+  display: block;
+}
+
 mat-form-field {
   min-width: 480px;
 }
@@ -18,3 +22,11 @@ mat-form-field {
 mat-icon {
   flex-shrink: 0;
 }
+
+.title {
+  margin: 24px 24px 0;
+}
+
+mat-dialog-actions {
+  padding: 0 24px 16px;
+}
diff --git a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts
index 0e4b87815..fdf757fc8 100644
--- a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts
+++ b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts
@@ -5,10 +5,6 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 
 import {
   PlanCreateDialogComponent,
@@ -23,6 +19,7 @@ import { DialogModule } from '@angular/cdk/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Region, regionToString } from '@types';
 import { Geometry } from 'geojson';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('PlanCreateDialogComponent', () => {
   let component: PlanCreateDialogComponent;
diff --git a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.ts b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.ts
index 65d5bbd2b..8b49b35fb 100644
--- a/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.ts
+++ b/src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.ts
@@ -1,7 +1,3 @@
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Component, Inject } from '@angular/core';
 import { PlanService, SessionService } from '@services';
@@ -11,6 +7,7 @@ import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack
 import { Region, regionToString } from '@types';
 import { isValidTotalArea } from '../../plan/plan-helpers';
 import { Geometry } from 'geojson';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 export interface PlanCreateDialogData {
   shape: Geometry;
diff --git a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.html b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.html
index fd5f00cbe..0855ce61a 100644
--- a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.html
+++ b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Sign in or create an account to continue</h1>
+<h3 mat-dialog-title>Sign in or create an account to continue</h3>
 
 <div mat-dialog-content>
   <p>You must be signed in to save plans and collaborate with others.</p>
diff --git a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.scss b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.scss
index e69de29bb..e9b6ac4ee 100644
--- a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.scss
+++ b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.scss
@@ -0,0 +1,9 @@
+@import "mixins";
+
+:host {
+  @include legacy-dialog-margin();
+}
+
+.mdc-dialog__content {
+  padding: 0 0 32px;
+}
diff --git a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.spec.ts b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.spec.ts
index 70e8617ae..a2a23ec34 100644
--- a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.spec.ts
+++ b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 
 import { SignInDialogComponent } from './sign-in-dialog.component';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('SignInCardComponent', () => {
   let component: SignInDialogComponent;
diff --git a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.ts b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.ts
index 627e8e94f..661f86f8c 100644
--- a/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.ts
+++ b/src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-sign-in-dialog',
diff --git a/src/interface/src/app/material/legacy-material.module.ts b/src/interface/src/app/material/legacy-material.module.ts
index eed08a14f..136b55f0d 100644
--- a/src/interface/src/app/material/legacy-material.module.ts
+++ b/src/interface/src/app/material/legacy-material.module.ts
@@ -3,7 +3,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
@@ -27,6 +27,7 @@ import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-t
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatTreeModule } from '@angular/material/tree';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   exports: [
diff --git a/src/interface/src/app/plan/area-notes/area-notes.component.spec.ts b/src/interface/src/app/plan/area-notes/area-notes.component.spec.ts
index 2ce98ea72..db9425704 100644
--- a/src/interface/src/app/plan/area-notes/area-notes.component.spec.ts
+++ b/src/interface/src/app/plan/area-notes/area-notes.component.spec.ts
@@ -1,11 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AuthService, PlanNotesService } from '@services';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 
 import { AreaNotesComponent } from './area-notes.component';
 import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('AreaNotesComponent', () => {
   let component: AreaNotesComponent;
diff --git a/src/interface/src/app/plan/area-notes/area-notes.component.ts b/src/interface/src/app/plan/area-notes/area-notes.component.ts
index 85ced99a6..caf51d631 100644
--- a/src/interface/src/app/plan/area-notes/area-notes.component.ts
+++ b/src/interface/src/app/plan/area-notes/area-notes.component.ts
@@ -1,11 +1,12 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { DeleteNoteDialogComponent } from '../delete-note-dialog/delete-note-dialog.component';
 import { take } from 'rxjs';
 import { Plan } from '@types';
 import { AuthService, Note, PlanNotesService } from '@services';
 import { SNACK_ERROR_CONFIG, SNACK_NOTICE_CONFIG } from '@shared';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-area-notes',
diff --git a/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.spec.ts b/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.spec.ts
index 8f5f58fd4..aeab750a5 100644
--- a/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.spec.ts
+++ b/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.spec.ts
@@ -1,9 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DeleteNoteDialogComponent } from './delete-note-dialog.component';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('DeleteNoteDialogComponent', () => {
   let component: DeleteNoteDialogComponent;
diff --git a/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.ts b/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.ts
index be59b699f..9d7d2d09e 100644
--- a/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.ts
+++ b/src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-delete-note-dialog',
@@ -8,6 +8,7 @@ import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dia
 })
 export class DeleteNoteDialogComponent {
   disableDeleteButton = false;
+
   constructor(private dialogRef: MatDialogRef<DeleteNoteDialogComponent>) {}
 
   cancel(): void {
diff --git a/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.spec.ts b/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.spec.ts
index e72ee9655..d2d6a530b 100644
--- a/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.spec.ts
+++ b/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.spec.ts
@@ -1,10 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MapLayerSelectDialogComponent } from './map-layer-select-dialog.component';
 import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog';
 
 describe('MapLayerSelectDialogComponent', () => {
   let component: MapLayerSelectDialogComponent;
diff --git a/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.ts b/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.ts
index 75e2c7908..fab96da37 100644
--- a/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.ts
+++ b/src/interface/src/app/plan/map-layer-select-dialog/map-layer-select-dialog.component.ts
@@ -1,9 +1,6 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { BaseLayerType } from '@types';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-map-layer-select-dialog',
@@ -12,6 +9,7 @@ import { BaseLayerType } from '@types';
 })
 export class MapLayerSelectDialogComponent {
   disableDeleteButton = false;
+
   constructor(
     @Inject(MatDialogRef)
     private dialogRef: MatDialogRef<MapLayerSelectDialogComponent>,
@@ -20,6 +18,7 @@ export class MapLayerSelectDialogComponent {
       selectedLayer: number;
     }
   ) {}
+
   givenLayer = this.data.selectedLayer;
   currentLayer = this.givenLayer;
   baseLayerTypes: number[] = [
@@ -28,6 +27,7 @@ export class MapLayerSelectDialogComponent {
     BaseLayerType.Satellite,
   ];
   readonly BaseLayerType = BaseLayerType;
+
   cancel(): void {
     this.dialogRef.close(undefined);
   }
diff --git a/src/interface/src/app/plan/plan-map/plan-map.component.ts b/src/interface/src/app/plan/plan-map/plan-map.component.ts
index 6e37e1b1f..b0fda7fb2 100644
--- a/src/interface/src/app/plan/plan-map/plan-map.component.ts
+++ b/src/interface/src/app/plan/plan-map/plan-map.component.ts
@@ -23,9 +23,10 @@ import { getColorForProjectPosition } from '../plan-helpers';
 import polylabel from 'polylabel';
 import { environment } from '../../../environments/environment';
 import { MapLayerSelectDialogComponent } from '../map-layer-select-dialog/map-layer-select-dialog.component';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { satelliteTiles, terrainTiles } from 'src/app/map/map.tiles';
 import { MapLayerControlComponent } from './map-layer-control/map-layer-control-component';
+import { MatDialog } from '@angular/material/dialog';
 
 // Needed to keep references to div elements to remove
 export interface MapRef {
diff --git a/src/interface/src/app/shared/nav-bar/nav-bar.component.ts b/src/interface/src/app/shared/nav-bar/nav-bar.component.ts
index 8ac5c1e4b..47ebb4c21 100644
--- a/src/interface/src/app/shared/nav-bar/nav-bar.component.ts
+++ b/src/interface/src/app/shared/nav-bar/nav-bar.component.ts
@@ -7,13 +7,14 @@ import {
   Output,
 } from '@angular/core';
 import { PlanStateService, WINDOW } from '@services';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { ShareExploreDialogComponent } from '../share-explore-dialog/share-explore-dialog.component';
 import { SharePlanDialogComponent } from '../../home/share-plan-dialog/share-plan-dialog.component';
 import { ActivatedRoute, Params } from '@angular/router';
 import { map, of } from 'rxjs';
 import { canViewCollaborators } from '../../plan/permissions';
 import { HomeParametersStorageService } from '@services/local-storage.service';
+import { MatDialog } from '@angular/material/dialog';
 
 export interface Breadcrumb {
   name: string;
diff --git a/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.scss b/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.scss
index 7ff1562c4..7c8d388c3 100644
--- a/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.scss
+++ b/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.scss
@@ -1,8 +1,8 @@
 @import "colors";
+@import "mixins";
 
 :host {
-  display: block;
-  min-width: 480px;
+  @include legacy-dialog-margin();
   position: relative;
 }
 
diff --git a/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.spec.ts b/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.spec.ts
index d0b9eeca3..27d02c004 100644
--- a/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.spec.ts
+++ b/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.spec.ts
@@ -2,8 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ShareExploreDialogComponent } from './share-explore-dialog.component';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockProvider } from 'ng-mocks';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { ShareMapService } from '@services';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('ShareExploreDialogComponent', () => {
   let component: ShareExploreDialogComponent;
diff --git a/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.ts b/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.ts
index 73b92b47d..41673b45a 100644
--- a/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.ts
+++ b/src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.ts
@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+
 import { SessionService, ShareMapService } from '@services';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { SNACK_ERROR_CONFIG, SNACK_NOTICE_CONFIG } from '@shared';
 import { firstValueFrom } from 'rxjs';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-share-explore-dialog',
diff --git a/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.spec.ts b/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.spec.ts
index 00abf63a1..36d00cc96 100644
--- a/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.spec.ts
+++ b/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.spec.ts
@@ -1,9 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DeleteDialogComponent } from './delete-dialog.component';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('DeleteDialogComponent', () => {
   let component: DeleteDialogComponent;
diff --git a/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.ts b/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.ts
index a1edf126c..69d814c5d 100644
--- a/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.ts
+++ b/src/interface/src/app/standalone/delete-dialog/delete-dialog.component.ts
@@ -1,10 +1,7 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 import { CommonModule } from '@angular/common';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-delete-dialog',
diff --git a/src/interface/src/app/standalone/forget-password/forget-password.component.spec.ts b/src/interface/src/app/standalone/forget-password/forget-password.component.spec.ts
index 00f9dab94..df6c63d2f 100644
--- a/src/interface/src/app/standalone/forget-password/forget-password.component.spec.ts
+++ b/src/interface/src/app/standalone/forget-password/forget-password.component.spec.ts
@@ -1,13 +1,13 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BehaviorSubject } from 'rxjs';
 
 import { AuthService } from '@services';
 import { ForgetPasswordComponent } from './forget-password.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('ForgetPasswordComponent', () => {
   let component: ForgetPasswordComponent;
diff --git a/src/interface/src/app/standalone/forget-password/forget-password.component.ts b/src/interface/src/app/standalone/forget-password/forget-password.component.ts
index 7846ee5e1..dc189bca6 100644
--- a/src/interface/src/app/standalone/forget-password/forget-password.component.ts
+++ b/src/interface/src/app/standalone/forget-password/forget-password.component.ts
@@ -8,7 +8,6 @@ import {
 import { Router } from '@angular/router';
 
 import { AuthService } from '@services';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ResetPasswordDialogComponent } from '../reset-password-dialog/reset_password_dialog.component';
 
 import {
@@ -20,6 +19,7 @@ import { FormMessageType } from '@types';
 import { CommonModule } from '@angular/common';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { AboutComponent } from '../about/about.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-forget-password',
diff --git a/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.spec.ts b/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.spec.ts
index a50654e34..6c2b3b7ab 100644
--- a/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.spec.ts
+++ b/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.spec.ts
@@ -3,14 +3,12 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { PasswordConfirmationDialogComponent } from './password-confirmation-dialog.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 describe('ConfirmationDialogComponent', () => {
   let component: PasswordConfirmationDialogComponent;
diff --git a/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.ts b/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.ts
index 71d254385..c500c1770 100644
--- a/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.ts
+++ b/src/interface/src/app/standalone/password-confirmation-dialog/password-confirmation-dialog.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+
 import { CommonModule } from '@angular/common';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-password-confirmation-dialog',
diff --git a/src/interface/src/app/standalone/password-reset/password-reset.component.spec.ts b/src/interface/src/app/standalone/password-reset/password-reset.component.spec.ts
index 91a10c4b0..3c0b950b4 100644
--- a/src/interface/src/app/standalone/password-reset/password-reset.component.spec.ts
+++ b/src/interface/src/app/standalone/password-reset/password-reset.component.spec.ts
@@ -1,7 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
@@ -9,6 +9,7 @@ import { of } from 'rxjs';
 import { AuthService, PasswordResetToken } from '@services';
 import { PasswordResetComponent } from './password-reset.component';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('PasswordResetComponent', () => {
   let component: PasswordResetComponent;
diff --git a/src/interface/src/app/standalone/password-reset/password-reset.component.ts b/src/interface/src/app/standalone/password-reset/password-reset.component.ts
index 71e7123b7..49e20eb4e 100644
--- a/src/interface/src/app/standalone/password-reset/password-reset.component.ts
+++ b/src/interface/src/app/standalone/password-reset/password-reset.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/forms';
 import { ActivatedRoute, Data, Router, RouterModule } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { FormMessageType } from '@types';
 import { AuthService, PasswordResetToken } from '@services';
@@ -20,6 +19,7 @@ import { PasswordStateMatcher } from '../../validators/error-matchers';
 import { passwordsMustMatchValidator } from '../../validators/passwords';
 import { PasswordConfirmationDialogComponent } from '../password-confirmation-dialog/password-confirmation-dialog.component';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
+import { MatDialog } from '@angular/material/dialog';
 
 @UntilDestroy()
 @Component({
diff --git a/src/interface/src/app/standalone/planning-area-menu/planning-area-menu.component.spec.ts b/src/interface/src/app/standalone/planning-area-menu/planning-area-menu.component.spec.ts
index c6e1b8624..6b5d6331f 100644
--- a/src/interface/src/app/standalone/planning-area-menu/planning-area-menu.component.spec.ts
+++ b/src/interface/src/app/standalone/planning-area-menu/planning-area-menu.component.spec.ts
@@ -2,10 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PlanningAreaMenuComponent } from './planning-area-menu.component';
 import { MockProvider } from 'ng-mocks';
 import { AuthService, PlanService } from '@services';
-import { MatLegacyDialogModule } from '@angular/material/legacy-dialog';
+
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MOCK_PLAN } from '@services/mocks';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('PlanningAreaMenuComponent', () => {
   let component: PlanningAreaMenuComponent;
@@ -16,7 +17,7 @@ describe('PlanningAreaMenuComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         PlanningAreaMenuComponent,
-        MatLegacyDialogModule,
+        MatDialogModule,
         RouterTestingModule,
       ],
       providers: [
diff --git a/src/interface/src/app/standalone/planning-area-titlebar-menu/planning-area-titlebar-menu.component.spec.ts b/src/interface/src/app/standalone/planning-area-titlebar-menu/planning-area-titlebar-menu.component.spec.ts
index dea0dc2ea..e1d4e1ba8 100644
--- a/src/interface/src/app/standalone/planning-area-titlebar-menu/planning-area-titlebar-menu.component.spec.ts
+++ b/src/interface/src/app/standalone/planning-area-titlebar-menu/planning-area-titlebar-menu.component.spec.ts
@@ -2,10 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PlanningAreaTitlebarMenuComponent } from './planning-area-titlebar-menu.component';
 import { MockProvider } from 'ng-mocks';
 import { AuthService, PlanService } from '@services';
-import { MatLegacyDialogModule } from '@angular/material/legacy-dialog';
+
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MOCK_PLAN } from '@services/mocks';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('PlanningAreaMenuComponent', () => {
   let component: PlanningAreaTitlebarMenuComponent;
@@ -16,7 +17,7 @@ describe('PlanningAreaMenuComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         PlanningAreaTitlebarMenuComponent,
-        MatLegacyDialogModule,
+        MatDialogModule,
         RouterTestingModule,
       ],
       providers: [
diff --git a/src/interface/src/app/standalone/reset-password-dialog/reset-password.component.scss b/src/interface/src/app/standalone/reset-password-dialog/reset-password.component.scss
new file mode 100644
index 000000000..f66e98564
--- /dev/null
+++ b/src/interface/src/app/standalone/reset-password-dialog/reset-password.component.scss
@@ -0,0 +1,4 @@
+
+.mat-mdc-dialog-actions {
+  padding: 8px 24px 16px;
+}
diff --git a/src/interface/src/app/standalone/reset-password-dialog/reset_password_dialog.component.ts b/src/interface/src/app/standalone/reset-password-dialog/reset_password_dialog.component.ts
index ad6a2573a..b45e80bb5 100644
--- a/src/interface/src/app/standalone/reset-password-dialog/reset_password_dialog.component.ts
+++ b/src/interface/src/app/standalone/reset-password-dialog/reset_password_dialog.component.ts
@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { CommonModule } from '@angular/common';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**  Component for reset password confirmation dialog. */
 @Component({
   selector: 'app-reset-password-dialog',
   templateUrl: './reset_password_dialog.component.html',
+  styleUrls: ['./reset-password.component.scss'],
   standalone: true,
   imports: [CommonModule, LegacyMaterialModule],
 })
diff --git a/src/interface/src/styles.scss b/src/interface/src/styles.scss
index 1e3d938da..83f45fa53 100644
--- a/src/interface/src/styles.scss
+++ b/src/interface/src/styles.scss
@@ -20,6 +20,7 @@
 //  you can delete this line and instead use:
 //    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
 @include mat.all-legacy-component-typographies($planscape-typography);
+@include mat.all-component-typographies($planscape-typography);
 @include mat.legacy-core();
 
 // Include theme styles for core and each component used in your app.
diff --git a/src/interface/src/styles/_mixins.scss b/src/interface/src/styles/_mixins.scss
index 6f482de9e..054c8c686 100644
--- a/src/interface/src/styles/_mixins.scss
+++ b/src/interface/src/styles/_mixins.scss
@@ -108,3 +108,11 @@ Declare mixins based on styleguide and apply to classes
   color: $color-text-gray;
   border: 1px $color-text-gray solid;
 }
+
+// mixin to back fill some differences between material dialog styles.
+// remove once we moved all dialogs to use our styleguide modal component
+@mixin legacy-dialog-margin {
+  min-width: 480px;
+  display: block;
+  margin: 24px;
+}
diff --git a/src/interface/src/styles/material.scss b/src/interface/src/styles/material.scss
index 948b80475..22073772f 100644
--- a/src/interface/src/styles/material.scss
+++ b/src/interface/src/styles/material.scss
@@ -32,8 +32,27 @@ body {
   --mat-menu-item-label-text-tracking: 0;
   --mat-menu-item-label-text-line-height: 22px;
   --mat-menu-item-label-text-weight: 400;
+
+
+  --mat-table-header-headline-size: 14px;
 }
 
+.mat-mdc-dialog-container {
+  // dialog
+  --mdc-dialog-supporting-text-color: $color-black;
+  --mdc-dialog-subhead-line-height: 24px;
+  --mdc-dialog-subhead-size: 22px;
+  --mdc-dialog-subhead-weight: 600;
+  --mdc-dialog-supporting-text-size: 14px;
+
+  .mdc-dialog__title {
+    padding: 0;
+
+    &::before {
+      display: none
+    }
+  }
+}
 
 mat-checkbox:not([disabled]) .mdc-label:hover,
 mat-radio-button:not([disabled]) .mdc-label:hover {