updated more styles related to dialog

src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.scss

@@ -1,3 +1,8 @@
+:host {
+  margin: 24px;
+  display: block;
+}
+
 .delete-account-dialog {
   align-items: center;
   display: flex;

src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.scss

@@ -4,6 +4,7 @@
 :host {
   display: block;
   width: 530px;
+
 }
 
 .main {

src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.scss

@@ -4,6 +4,7 @@
 :host {
   display: block;
   max-width: 535px;
+  margin: 24px;
 }
 
 h4 {

src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.scss

@@ -1,4 +1,4 @@
 :host {
   display: block;
-  padding: 20px;
+  margin: 24px;
 }

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">

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;
+}

src/interface/src/app/shared/share-explore-dialog/share-explore-dialog.component.scss

@@ -4,6 +4,7 @@
   display: block;
   min-width: 480px;
   position: relative;
+  margin: 24px;
 }
 
 section {

src/interface/src/styles/material.scss

@@ -32,8 +32,26 @@ body {
   --mat-menu-item-label-text-tracking: 0;
   --mat-menu-item-label-text-line-height: 22px;
   --mat-menu-item-label-text-weight: 400;
+
+
 }
 
+.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 {