Use button group for styled buttons

components/dialog.js

@@ -51,6 +51,11 @@ export class Dialog extends HTMLElement {
       dialog.closing::backdrop {
         visibility: visible;
       }
+      .header, .footer, .body {
+        display: flex;
+        align-items: stretch;
+        flex-direction: column;
+      }
     `
     this.shadowRoot.append(style)
     this.headerEl.setAttribute('part', 'header')

components/header.js

@@ -150,7 +150,6 @@ export class Header extends HTMLElement {
       }
       m-dialog::part(footer) {
         padding-top: 15px;
-        text-align: right;
       }
     `
     this.shadowRoot.append(style)
@@ -219,23 +218,19 @@ export class Header extends HTMLElement {
       input.value = this.path
       input.style.minWidth = '300px'
       dialog.bodyEl.appendChild(input)
-      const cancelBtn = document.createElement('button')
-      cancelBtn.innerText = this.text.cancel
-      cancelBtn.addEventListener('click', () => {
-        dialog.close()
-      })
-      const confirmBtn = document.createElement('button')
-      confirmBtn.innerText = this.text.rename
-      confirmBtn.style.marginLeft = '3px'
       let errorEl
-      confirmBtn.addEventListener('click', () => {
+      const bGroup = document.createElement(
+        'm-forms-button-group'
+      )
+      bGroup.addPrimary(this.text.rename, () => {
         const newPath = input.value
         const v = localStorage.getItem(newPath)
         if (v !== null || newPath === this.path) {
           if (!errorEl) {
             errorEl = document.createElement('p')
             errorEl.style.color = 'red'
-            errorEl.innerText = this.text.alreadyExists
+            const errText = this.text.alreadyExists
+            errorEl.innerText = errText
             dialog.bodyEl.appendChild(errorEl)
           }
           return
@@ -248,9 +243,10 @@ export class Header extends HTMLElement {
         dialog.close()
         location.hash = newPath
       })
-      dialog.footerEl.replaceChildren(
+      bGroup.addCancel(this.text.cancel, () => {
-        cancelBtn, confirmBtn
+        dialog.close()
-      )
+      })
+      dialog.footerEl.appendChild(bGroup)
       dialog.open()
     })
     this.pageMenu.add(this.text.delete, () => {
@@ -261,22 +257,19 @@ export class Header extends HTMLElement {
         JSON.stringify(this.path)
       )
       dialog.bodyEl.appendChild(p)
-      const cancelBtn = document.createElement('button')
+
-      cancelBtn.innerText = this.text.cancel
+      const bGroup = document.createElement(
-      cancelBtn.addEventListener('click', () => {
+        'm-forms-button-group'
-        dialog.close()
+      )
-      })
+      bGroup.addPrimary(this.text.delete, () => {
-      const confirmBtn = document.createElement('button')
-      confirmBtn.innerText = this.text.delete
-      confirmBtn.style.marginLeft = '3px'
-      confirmBtn.addEventListener('click', () => {
         localStorage.removeItem(this.path)
         location.hash = '/'
         dialog.close()
       })
-      dialog.footerEl.replaceChildren(
+      bGroup.addCancel(this.text.cancel, () => {
-        cancelBtn, confirmBtn
+        dialog.close()
-      )
+      })
+      dialog.footerEl.appendChild(bGroup)
       dialog.open()
     })
     this.pageMenu.addEventListener('close-menu', () => {
@@ -325,22 +318,18 @@ export class Header extends HTMLElement {
     input.value = '/'
     input.style.minWidth = '300px'
     dialog.bodyEl.appendChild(input)
-    const cancelBtn = document.createElement('button')
+    const bGroup = document.createElement(
-    cancelBtn.innerText = this.text.cancel
+      'm-forms-button-group'
-    cancelBtn.addEventListener('click', () => {
+    )
-      dialog.close()
+    bGroup.addPrimary(this.text.createPage, () => {
-    })
-    const confirmBtn = document.createElement('button')
-    confirmBtn.innerText = this.text.createPage
-    confirmBtn.style.marginLeft = '3px'
-    confirmBtn.addEventListener('click', () => {
       const newPath = this.encodePath(input.value)
       location.hash = newPath
       dialog.close()
     })
-    dialog.footerEl.replaceChildren(
+    bGroup.addCancel(this.text.cancel, () => {
-      cancelBtn, confirmBtn
+      dialog.close()
-    )
+    })
+    dialog.footerEl.appendChild(bGroup)
     dialog.open()
   }