Enhancements to confirm and alert dialogs

lib/ui/elements/alert.mjs

@@ -30,24 +30,29 @@ mapp.ui.elements.alert({
 @property {string} [params.data_id='alert'] The data-id attribute value for the dialog.
 @property {string} [params.title] Text to display in the alert header. Defaults to 'Information'.
 @property {string} [params.text] Text to display in the alert content. 
+@property {HTMLElement} [params.innerContent] custom HTML fragment to display in the dialog, optional. Overrides text.
+@property {string} [params.icon] Custom Material Symbols icon name to use in the header for message clarity. Defaults to 'info'.
 @returns {HTMLElement} alert The alert element.
 */
 export default function alert(params) {
-  params.title ??= `${mapp.dictionary.information}`;
+  params.title ??= mapp.dictionary.information;
+
+  params.icon ??= 'info';
 
   params.data_id ??= 'alert';
 
   params.class ??= 'alert-confirm';
 
-  params.header = mapp.utils.html`
-    <h4>${params.title}`;
+  params.header = mapp.utils
+    .html`<span class="material-symbols-outlined notranslate">${params.icon}</span>${params.title}`;
+
+  params.innerContent ??= mapp.utils.html`<p>${params.text}</p>`;
 
   params.content = mapp.utils.html`
-    <p>${params.text}</p>
+    ${params.innerContent}
     <div class="buttons">
       <button 
-        class="raised bold"
-        style="grid-column: 1/3; margin: 0 5em;"
+        class="action outlined bold"
         onclick=${(e) => {
           e.target.closest('dialog').close();
         }}>${mapp.dictionary.ok}`;

lib/ui/elements/confirm.mjs

@@ -36,15 +36,20 @@ if(confirm) {
 @property {string} [params.data_id='confirm'] The data-id attribute value for the dialog.
 @property {string} [params.title] Text to display in the confirm header. Defaults to 'Confirm'.
 @property {string} [params.text] Text to display in the confirm content.
+@property {HTMLElement} [params.innerContent] custom HTML fragment to display in the dialog, optional. Overrides text. 
+@property {string} [params.icon] Custom Material Symbols icon name to use in the header for message clarity. Defaults to 'warning'.
 @returns {Promise<boolean>} Returns promise which resolves to true or false whether the question was confirmed.
 */
 export default function confirm(params) {
   return new Promise((resolve, reject) => {
-    params.title ??= `${mapp.dictionary.confirm}`;
+    params.title ??= mapp.dictionary.confirm;
+
+    params.icon ??= 'warning';
 
     params.data_id ??= 'confirm';
 
-    params.header = mapp.utils.html`<h4>${params.title}`;
+    params.header = mapp.utils
+      .html`<span class="material-symbols-outlined notranslate">${params.icon}</span>${params.title}`;
 
     delete params.minimizeBtn;
 
@@ -55,19 +60,21 @@ export default function confirm(params) {
         e.target.closest('dialog').close();
         resolve(true);
       }}
-      class="raised bold">
+      class="action outlined bold">
       ${mapp.dictionary.ok}`;
 
     const btn_false = mapp.utils.html`<button
       onclick=${(e) => {
         e.target.closest('dialog').close();
         resolve(false);
       }}
-      class="raised bold">
+      class="action outlined bold">
       ${mapp.dictionary.cancel}`;
 
-    params.content ??= mapp.utils.html`
-      <p>${params.text}</p>
+    params.innerContent ??= mapp.utils.html`<p>${params.text}</p>`;
+
+    params.content = mapp.utils.html`
+      ${params.innerContent}
       <div class="buttons">
         ${btn_true}  
         ${btn_false}`;

public/css/base/_button.css

@@ -19,6 +19,10 @@ button {
     cursor: pointer;
   }
 
+  &:active {
+    scale: 0.96; /* scaling effect as response to click event */
+  }
+
   &:disabled {
     opacity: 0.3;
     &:hover {

public/css/elements/_alert_confirm.css

@@ -6,6 +6,7 @@ dialog.alert-confirm {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  padding: 0.5em;
 
   &::-webkit-scrollbar {
     display: none;
@@ -15,12 +16,10 @@ dialog.alert-confirm {
     outline: none;
   }
 
-  h4 {
-    padding: 0.5em 1em;
-    background-color: var(--color-primary);
-    border-bottom: solid 2px var(--color-border);
-    color: var(--color-font-contrast);
-    width: 100%;
+  h2 {
+    display: flex;
+    gap: 0.2em;
+    align-items: center;
   }
 
   .content {
@@ -30,21 +29,18 @@ dialog.alert-confirm {
   p {
     white-space: pre;
     text-wrap: pretty;
-    text-align: center;
     margin: 0 1em 1em;
   }
 
   .buttons {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 0.2em;
+    margin-top: 2em;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5em;
   }
 
   button {
-    float: right;
-    font-size: 0.9em;
-    color: var(--color-primary);
-    z-index: 1005;
+    min-width: 100px;
   }
 }
 

public/css/mapp.css

@@ -172,6 +172,7 @@ body {
       }
       &.nowrap {
         flex-wrap: nowrap;
+        overflow: scroll;
         & .contents {
           justify-content: flex-start;
           & .label {

public/css/ui.css

@@ -132,6 +132,9 @@ button {
   &:hover {
     cursor: pointer;
   }
+  &:active {
+    scale: 0.96;
+  }
   &:disabled {
     opacity: 0.3;
     &:hover {
@@ -425,38 +428,34 @@ dialog.alert-confirm {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  padding: 0.5em;
   &::-webkit-scrollbar {
     display: none;
   }
   &:focus {
     outline: none;
   }
-  h4 {
-    padding: 0.5em 1em;
-    background-color: var(--color-primary);
-    border-bottom: solid 2px var(--color-border);
-    color: var(--color-font-contrast);
-    width: 100%;
+  h2 {
+    display: flex;
+    gap: 0.2em;
+    align-items: center;
   }
   .content {
     padding: 1em;
   }
   p {
     white-space: pre;
     text-wrap: pretty;
-    text-align: center;
     margin: 0 1em 1em;
   }
   .buttons {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 0.2em;
+    margin-top: 2em;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5em;
   }
   button {
-    float: right;
-    font-size: 0.9em;
-    color: var(--color-primary);
-    z-index: 1005;
+    min-width: 100px;
   }
 }
 @media only screen and (max-width: 768px) {

public/dictionaries/en.mjs

@@ -3,7 +3,7 @@ export default {
   circle_config: 'Circle configuration',
   confirm: 'Confirm',
   confirm_delete:
-    'Are you sure you want to delete this feature? This cannot be undone.',
+    'Are you sure you want to delete this feature? \nThis cannot be undone.',
   create: 'Create',
   csv_upload_failed: 'Data import failed, please try again.',
   csv_upload_import: 'Import From CSV',