From ebc9756a8dda06a6b1d7265be68d2f93f76eaa91 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 11 Jul 2022 16:27:46 +0800
Subject: [PATCH] perf: refine dialog component

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../src/components/dialog/Dialog.vue          | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/dialog/Dialog.vue b/packages/components/src/components/dialog/Dialog.vue
index a534cef0..37ea55b0 100644
--- a/packages/components/src/components/dialog/Dialog.vue
+++ b/packages/components/src/components/dialog/Dialog.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { VModal } from "@/components/modal";
-import { VSpace } from "@/components/space";
 import { VButton } from "@/components/button";
 import {
   IconCheckboxCircle,
@@ -94,35 +93,30 @@ const handleClose = () => {
 <template>
   <VModal :visible="visible" :width="450" @close="handleCancel()">
     <div class="flex justify-between items-start py-2 mb-2">
-      <div>
-        <div
-          :class="`ring-${icon.color}-100`"
-          class="inline-flex rounded-full bg-teal-50 p-1.5 ring-4"
-        >
-          <component
-            :is="icon.icon"
-            :class="`text-${icon.color}-500`"
-            class="w-5 h-5"
-          ></component>
-        </div>
+      <div class="flex flex-row items-center gap-3">
+        <component
+          :is="icon.icon"
+          :class="`text-${icon.color}-500`"
+          class="w-6 h-6"
+        ></component>
+        <div class="text-base text-gray-900 font-bold">{{ title }}</div>
       </div>
       <div>
         <IconClose class="cursor-pointer" @click="handleCancel" />
       </div>
     </div>
     <div class="flex items-center gap-4">
-      <div class="flex-1 flex flex-col items-stretch gap-2">
-        <div class="text-base text-gray-900 font-bold">{{ title }}</div>
+      <div class="flex-1 flex items-stretch">
         <div class="text-sm text-gray-700">{{ description }}</div>
       </div>
     </div>
     <template #footer>
-      <VSpace>
+      <div class="flex flex-col sm:flex-row gap-[10px]">
         <VButton :loading="loading" type="secondary" @click="handleConfirm">
           {{ confirmText }}
         </VButton>
         <VButton @click="handleCancel">{{ cancelText }}</VButton>
-      </VSpace>
+      </div>
     </template>
   </VModal>
 </template>