From 59bf1c2aa0ca26b24abc08405295077d02e2903a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 5 May 2023 02:48:41 +0200
Subject: [PATCH] Added close button to the modal's header.

---
 .../http/webapp/src/components/Modal.vue      | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/Modal.vue b/platypush/backend/http/webapp/src/components/Modal.vue
index e822f4b34..896cf1344 100644
--- a/platypush/backend/http/webapp/src/components/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/Modal.vue
@@ -2,7 +2,12 @@
   <div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}" :style="{'--z-index': zIndex}" @click="close">
     <div class="modal" :class="$attrs.class">
       <div class="content" :style="{'--width': width, '--height': height}" @click="$event.stopPropagation()">
-        <div class="header" v-text="title" v-if="title"></div>
+        <div class="header" v-if="title">
+          <div class="title" v-text="title" v-if="title" />
+          <button title="Close" alt="Close" @click="close">
+            <i class="fas fa-xmark" />
+          </button>
+        </div>
         <div class="body">
           <slot @modal-close="close" />
         </div>
@@ -145,6 +150,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$icon-size: 1.5em;
+$icon-margin: 0.5em;
+
 .modal-container {
   position: fixed;
   display: flex;
@@ -171,6 +179,7 @@ export default {
 
     .header {
       display: flex;
+      position: relative;
       border-bottom: $modal-header-border;
       border-radius: 0.5em 0.5em 0 0;
       padding: 0.5em;
@@ -179,6 +188,21 @@ export default {
       align-items: center;
       background: $modal-header-bg;
       text-transform: uppercase;
+
+      button {
+        width: $icon-size;
+        height: $icon-size;
+        position: absolute;
+        right: 0;
+        margin: auto $icon-margin;
+        padding: 0;
+        border: 0;
+        background: transparent;
+
+        &:hover {
+          color: $default-hover-fg;
+        }
+      }
     }
 
     .body {