feat: GlobalDialog

src/components/GlobalDialog.vue

@@ -13,38 +13,65 @@ defineProps<{
 </script>
 <template>
   <q-dialog ref="dialogRef" :persistent="persistent || false">
-    <q-card class="q-pa-sm" style="min-width: 300px; max-width: 80%">
-      <q-card-section class="row q-pa-sm">
-        <div
-          class="q-pr-md"
-          v-if="icon"
-          style="display: flex; align-items: center"
+    <q-card
+      class="q-pt-sm"
+      style="overflow: visible; min-width: 300px; max-width: 80%"
+    >
+      <div
+        class="box-icon q-pa-sm"
+        v-if="icon"
+        style="display: flex; align-items: center"
+      >
+        <q-avatar
+          size="60px"
+          font-size="25px"
+          style="background-color: var(--surface-1)"
+          :text-color="color || 'primary'"
         >
-          <q-avatar
-            :icon="icon"
-            size="xl"
-            font-size="25px"
-            color="grey-2"
-            :text-color="color || 'primary'"
+          <q-icon
+            style="padding: 12px; border: 2px solid; border-radius: 50%"
+            :name="icon"
           />
-        </div>
-        <div class="col text-dark">
+        </q-avatar>
+      </div>
+
+      <div class="text-right q-px-sm">
+        <q-btn
+          flat
+          size="sm"
+          padding="none"
+          color="grey"
+          icon="mdi-close"
+          v-close-popup
+        />
+      </div>
+
+      <q-card-section class="column items-center q-pa-sm">
+        <div class="column q-mt-md items-center">
           <span class="text-bold block">{{ title }}</span>
           <span class="block">{{ message }}</span>
         </div>
       </q-card-section>
-      <q-card-actions align="right" v-if="action || cancel">
+
+      <q-card-actions
+        :class="{ 'no-padding': !action || !cancel }"
+        align="right"
+        v-if="action || cancel"
+      >
         <q-btn
           id="btn-cancel-dialog"
           v-if="cancel"
+          :class="{ 'full-width': !action }"
           @click="cancel"
           :label="cancelText || $t('cancel')"
           :color="color || 'primary'"
           v-close-popup
           flat
         />
+
         <q-btn
           id="btn-ok-dialog"
+          :class="{ 'full-width': !cancel }"
           v-if="action"
           @click="action"
           :label="actionText || $t('ok')"
@@ -56,4 +83,15 @@ defineProps<{
   </q-dialog>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.box-icon {
+  position: absolute;
+  top: -40px;
+  right: 37.5%;
+  z-index: 999;
+}
+
+.full-width {
+  width: 100%;
+}
+</style>

src/css/quasar.variables.scss

@@ -39,6 +39,11 @@ $separator-dark-color: var(--border-color);
   }
 }
 
-.q-menu {
+.q-menu,
+.q-card {
   box-shadow: var(--shadow-2) !important;
 }
+
+.q-dialog__backdrop {
+  background-color: hsla(0 0 60% / 0.4) !important;
+}