Move gr-overlay to dialog element for delete-project plugin

Change-Id: I2936af2ae7f663291e91d867898597946ee619fe

web/gr-delete-repo.ts

diff --git a/web/gr-delete-repo.ts b/web/gr-delete-repo.ts
index 55995fd..0bad785 100644
--- a/web/gr-delete-repo.ts
+++ b/web/gr-delete-repo.ts
@@ -20,15 +20,9 @@
   ConfigInfo,
   RepoName,
 } from '@gerritcodereview/typescript-api/rest-api';
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators.js';
 
-// TODO: This should be defined and exposed by @gerritcodereview/typescript-api
-type GrOverlay = Element & {
-  open(): void;
-  close(): void;
-};
-
 declare global {
   interface HTMLElementTagNameMap {
     'gr-delete-repo': GrDeleteRepo;
@@ -40,8 +34,8 @@
 
 @customElement('gr-delete-repo')
 export class GrDeleteRepo extends LitElement {
-  @query('#deleteRepoOverlay')
-  deleteRepoOverlay?: GrOverlay;
+  @query('#deleteRepoModal')
+  deleteRepoModal?: HTMLDialogElement;
 
   @query('#preserveGitRepoCheckBox')
   preserveGitRepoCheckBox?: HTMLInputElement;
@@ -64,20 +58,26 @@
   @state()
   private error?: string;
 
-  static override styles = css`
-    :host {
-      display: block;
-      margin-bottom: var(--spacing-xxl);
-    }
-    /* TODO: Find a way to use shared styles in lit elements in plugins. */
-    h3 {
-      font: inherit;
-      margin: 0;
-    }
-    .error {
-      color: red;
-    }
-  `;
+  static override get styles() {
+    return [
+      window.Gerrit.styles.font as CSSResult,
+      window.Gerrit.styles.modal as CSSResult,
+      css`
+        :host {
+          display: block;
+          margin-bottom: var(--spacing-xxl);
+        }
+        /* TODO: Find a way to use shared styles in lit elements in plugins. */
+        h3 {
+          font: inherit;
+          margin: 0;
+        }
+        .error {
+          color: red;
+        }
+      `,
+    ];
+  }
 
   get action(): ActionInfo | undefined {
     return this.config.actions?.[this.actionId];
@@ -101,18 +101,18 @@
         ?disabled="${!this.action.enabled}"
         @click="${() => {
           this.error = undefined;
-          this.deleteRepoOverlay?.open();
+          this.deleteRepoModal?.showModal();
         }}"
       >
         ${this.action.label}
       </gr-button>
       ${this.renderError()}
-      <gr-overlay id="deleteRepoOverlay" with-backdrop>
+      <dialog id="deleteRepoModal">
         <gr-dialog
           id="deleteRepoDialog"
           confirm-label="Delete"
           @confirm="${this.deleteRepo}"
-          @cancel="${() => this.deleteRepoOverlay?.close()}"
+          @cancel="${() => this.deleteRepoModal?.close()}"
         >
           <div class="header" slot="header">
             Are you really sure you want to delete the repo: "${this.repoName}"?
@@ -136,19 +136,19 @@
             </div>
           </div>
         </gr-dialog>
-      </gr-overlay>
+      </dialog>
     `;
   }
 
   private deleteRepo() {
     if (!this.action) {
       this.error = 'delete action undefined';
-      this.deleteRepoOverlay?.close();
+      this.deleteRepoModal?.close();
       return;
     }
     if (!this.action.method) {
       this.error = 'delete action does not have a HTTP method set';
-      this.deleteRepoOverlay?.close();
+      this.deleteRepoModal?.close();
       return;
     }
     this.error = undefined;
@@ -165,12 +165,12 @@
       .send(this.action.method, endpoint, json)
       .then(_ => {
         this.plugin.restApi().invalidateReposCache();
-        this.deleteRepoOverlay?.close();
+        this.deleteRepoModal?.close();
         window.location.href = `${this.getBaseUrl()}/admin/repos`;
       })
       .catch(e => {
         this.error = e;
-        this.deleteRepoOverlay?.close();
+        this.deleteRepoModal?.close();
       });
   }