From 9a626b0d4f186a82f4a647de1340346d676d6038 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 12 Aug 2023 19:11:56 +0800
Subject: [PATCH] modify dialog style

---
 .../desktop/DateRangeSelectionDialog.vue      |  43 ++++---
 .../desktop/SwitchToMobileDialog.vue          |  37 ++++--
 src/styles/desktop/global.scss                |   4 +
 .../categories/list/dialogs/EditDialog.vue    | 120 +++++++++---------
 .../categories/list/dialogs/PresetDialog.vue  |  32 +++--
 .../desktop/statistics/TransactionPage.vue    |   4 +-
 .../cards/AccountFilterSettingsCard.vue       |  67 +++++-----
 .../cards/CategoryFilterSettingsCard.vue      |  65 +++++-----
 8 files changed, 203 insertions(+), 169 deletions(-)

diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index 5cc46c7f..d6b24f47 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -1,19 +1,23 @@
 <template>
-    <v-dialog width="460" :persistent="!!persistent" v-model="showState">
-        <v-card>
-            <v-toolbar color="primary">
-                <v-toolbar-title>{{ title }}</v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="pa-4">
-                <p v-if="hint">{{ hint }}</p>
-                <span v-if="beginDateTime && endDateTime">
+    <v-dialog class="date-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h5 class="text-h5">{{ $t(title) }}</h5>
+                </div>
+            </template>
+            <template #subtitle>
+                <div class="text-body-1 text-center text-wrap mt-6">
+                    <p v-if="hint">{{ hint }}</p>
+                    <span v-if="beginDateTime && endDateTime">
                     <span>{{ beginDateTime }}</span>
                     <span> - </span>
                     <span>{{ endDateTime }}</span>
                 </span>
-                <slot></slot>
-            </v-card-text>
-            <v-card-text class="pa-4 w-100 d-flex justify-center">
+                    <slot></slot>
+                </div>
+            </template>
+            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
                 <vue-date-picker range inline enable-seconds auto-apply
                                  ref="datetimepicker"
                                  month-name-format="long"
@@ -35,11 +39,12 @@
                     </template>
                 </vue-date-picker>
             </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
-                <v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ $t('OK') }}</v-btn>
-            </v-card-actions>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ $t('OK') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
         </v-card>
     </v-dialog>
 </template>
@@ -196,3 +201,9 @@ export default {
     }
 }
 </script>
+
+<style>
+.date-range-selection-dialog .dp__preset_ranges {
+    white-space: nowrap !important;
+}
+</style>
diff --git a/src/components/desktop/SwitchToMobileDialog.vue b/src/components/desktop/SwitchToMobileDialog.vue
index 0960012c..044dee49 100644
--- a/src/components/desktop/SwitchToMobileDialog.vue
+++ b/src/components/desktop/SwitchToMobileDialog.vue
@@ -1,20 +1,29 @@
 <template>
-    <v-dialog width="400" v-model="showState">
-        <v-card>
-            <v-toolbar color="primary">
-                <v-toolbar-title>{{ $t('global.app.title') }}</v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="pa-4">
-                <p>{{ $t('You can scan the below QR code on your mobile device.') }}</p>
+    <v-dialog width="440" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h5 class="text-h5">{{ $t('Use on Mobile Device') }}</h5>
+                </div>
+            </template>
+            <template #subtitle>
+                <div class="text-body-1 text-center text-wrap mt-6">{{ $t('You can scan the below QR code on your mobile device.') }}</div>
+            </template>
+            <v-card-text class="mb-md-4">
+                <v-row>
+                    <v-col cols="12" md="12">
+                        <div class="w-100 d-flex justify-center">
+                            <img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
+                        </div>
+                    </v-col>
+                </v-row>
             </v-card-text>
-            <v-card-text class="pa-4 w-100 d-flex justify-center">
-                <img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
+                </div>
             </v-card-text>
-            <v-card-actions>
-                <v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
-                <v-spacer></v-spacer>
-                <v-btn @click="showState = false">{{ $t('Close') }}</v-btn>
-            </v-card-actions>
         </v-card>
     </v-dialog>
 </template>
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index b77c8415..c0dacb81 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -22,6 +22,10 @@ input[type=number] {
     pointer-events: none !important;
 }
 
+.overflow-y-visible {
+    overflow-y: visible !important;
+}
+
 .drag-handle {
     cursor: grab;
 }
diff --git a/src/views/desktop/categories/list/dialogs/EditDialog.vue b/src/views/desktop/categories/list/dialogs/EditDialog.vue
index a57fd78c..8e8ee835 100644
--- a/src/views/desktop/categories/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/categories/list/dialogs/EditDialog.vue
@@ -1,64 +1,68 @@
 <template>
-    <v-dialog scrollable width="600" max-height="600" :persistent="!!persistent" v-model="showState">
-        <v-card>
-            <v-toolbar color="primary">
-                <v-toolbar-title>
-                    <span>{{ $t(title) }}</span>
+    <v-dialog width="800" max-height="600" :persistent="!!persistent" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-8">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h5 class="text-h5">{{ $t(title) }}</h5>
                     <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
-                </v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="px-5 pt-7 pb-5">
-                <v-row>
-                    <v-col cols="12" md="12">
-                        <v-text-field
-                            type="text"
-                            clearable
-                            persistent-placeholder
-                            :disabled="loading || submitting"
-                            :label="$t('Category Name')"
-                            :placeholder="$t('Category Name')"
-                            v-model="category.name"
-                        />
-                    </v-col>
-                    <v-col cols="12" md="6">
-                        <icon-select icon-type="category"
-                                     :all-icon-infos="allCategoryIcons"
-                                      :label="$t('Category Icon')"
-                                      :color="category.color"
-                                      :disabled="loading || submitting"
-                                      v-model="category.icon" />
-                    </v-col>
-                    <v-col cols="12" md="6">
-                        <color-select :all-color-infos="allCategoryColors"
-                                     :label="$t('Category Color')"
-                                     :disabled="loading || submitting"
-                                     v-model="category.color" />
-                    </v-col>
-                    <v-col cols="12" md="12">
-                        <v-textarea
-                            type="text"
-                            persistent-placeholder
-                            rows="3"
-                            :disabled="loading || submitting"
-                            :label="$t('Description')"
-                            :placeholder="$t('Your category description (optional)')"
-                            v-model="category.comment"
-                        />
-                    </v-col>
-                    <v-col class="pt-0" cols="12" md="12" v-if="editCategoryId">
-                        <v-switch inset :disabled="loading || submitting"
-                                  :label="$t('Visible')" v-model="category.visible"/>
-                    </v-col>
-                </v-row>
+                </div>
+            </template>
+            <v-card-text>
+                <v-form class="mt-2 mt-md-6">
+                    <v-row>
+                        <v-col cols="12" md="12">
+                            <v-text-field
+                                type="text"
+                                clearable
+                                persistent-placeholder
+                                :disabled="loading || submitting"
+                                :label="$t('Category Name')"
+                                :placeholder="$t('Category Name')"
+                                v-model="category.name"
+                            />
+                        </v-col>
+                        <v-col cols="12" md="6">
+                            <icon-select icon-type="category"
+                                         :all-icon-infos="allCategoryIcons"
+                                          :label="$t('Category Icon')"
+                                          :color="category.color"
+                                          :disabled="loading || submitting"
+                                          v-model="category.icon" />
+                        </v-col>
+                        <v-col cols="12" md="6">
+                            <color-select :all-color-infos="allCategoryColors"
+                                         :label="$t('Category Color')"
+                                         :disabled="loading || submitting"
+                                         v-model="category.color" />
+                        </v-col>
+                        <v-col cols="12" md="12">
+                            <v-textarea
+                                type="text"
+                                persistent-placeholder
+                                rows="3"
+                                :disabled="loading || submitting"
+                                :label="$t('Description')"
+                                :placeholder="$t('Your category description (optional)')"
+                                v-model="category.comment"
+                            />
+                        </v-col>
+                        <v-col class="py-0" cols="12" md="12" v-if="editCategoryId">
+                            <v-switch inset :disabled="loading || submitting"
+                                      :label="$t('Visible')" v-model="category.visible"/>
+                        </v-col>
+                    </v-row>
+                </v-form>
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
+                    <v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
+                        {{ $t(saveButtonTitle) }}
+                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
+                    </v-btn>
+                    <v-btn color="secondary" variant="tonal"
+                           :disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                </div>
             </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="gray" :disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
-                <v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
-                    {{ $t(saveButtonTitle) }}
-                    <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
-                </v-btn>
-            </v-card-actions>
         </v-card>
     </v-dialog>
 
diff --git a/src/views/desktop/categories/list/dialogs/PresetDialog.vue b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
index 7e107f82..eb62e0bd 100644
--- a/src/views/desktop/categories/list/dialogs/PresetDialog.vue
+++ b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
@@ -1,10 +1,12 @@
 <template>
-    <v-dialog scrollable width="600" max-height="600" :persistent="!!persistent" v-model="showState">
-        <v-card>
-            <v-toolbar color="primary">
-                <v-toolbar-title>{{ $t('Default Categories') }}</v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="preset-transaction-categories pb-4">
+    <v-dialog scrollable width="800" max-height="600" :persistent="!!persistent" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-8">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h5 class="text-h5">{{ $t('Default Categories') }}</h5>
+                </div>
+            </template>
+            <v-card-text class="preset-transaction-categories mt-0 mt-sm-2 mt-md-4 pb-4">
                 <template :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
                     <div class="d-flex align-center mb-1">
                         <h4>{{ getCategoryTypeName(categoryType) }}</h4>
@@ -48,14 +50,16 @@
                     </v-expansion-panels>
                 </template>
             </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="gray" :disabled="submitting" @click="showState = false">{{ $t('Cancel') }}</v-btn>
-                <v-btn :disabled="submitting" @click="save">
-                    {{ $t('Save') }}
-                    <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
-                </v-btn>
-            </v-card-actions>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
+                    <v-btn :disabled="submitting" @click="save">
+                        {{ $t('Save') }}
+                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
+                    </v-btn>
+                    <v-btn color="secondary" density="default" variant="tonal"
+                           :disabled="submitting" @click="showState = false">{{ $t('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
         </v-card>
     </v-dialog>
 
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index fe10c41f..e0ef8495 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -195,13 +195,13 @@
                                   v-model:show="showCustomDateRangeDialog"
                                   @dateRange:change="setCustomDateFilter" />
 
-    <v-dialog scrollable max-width="600" max-height="600" v-model="showFilterAccountDialog">
+    <v-dialog scrollable width="800" max-height="600" v-model="showFilterAccountDialog">
         <account-filter-settings-card
             :dialog-mode="true" :modify-default="false"
             @settings:change="showFilterAccountDialog = false" />
     </v-dialog>
 
-    <v-dialog scrollable max-width="600" max-height="600" v-model="showFilterCategoryDialog">
+    <v-dialog scrollable width="800" max-height="600" v-model="showFilterCategoryDialog">
         <category-filter-settings-card
             :dialog-mode="true" :modify-default="false"
             @settings:change="showFilterCategoryDialog = false" />
diff --git a/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue b/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
index 4b634688..fecdffc3 100644
--- a/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
+++ b/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
@@ -1,30 +1,30 @@
 <template>
-    <v-card>
-        <v-toolbar color="primary" v-if="dialogMode">
-            <v-toolbar-title>{{ $t('Default Account Filter') }}</v-toolbar-title>
-            <v-spacer/>
-            <v-btn density="comfortable" color="default" variant="text" class="ml-2"
-                   :disabled="loading || !hasAnyAvailableAccount" :icon="true">
-                <v-icon :icon="icons.more" />
-                <v-menu activator="parent">
-                    <v-list>
-                        <v-list-item :prepend-icon="icons.selectAll"
-                                     :title="$t('Select All')"
-                                     @click="selectAll"></v-list-item>
-                        <v-list-item :prepend-icon="icons.selectNone"
-                                     :title="$t('Select None')"
-                                     @click="selectNone"></v-list-item>
-                        <v-list-item :prepend-icon="icons.selectInverse"
-                                     :title="$t('Invert Selection')"
-                                     @click="selectInvert"></v-list-item>
-                    </v-list>
-                </v-menu>
-            </v-btn>
-        </v-toolbar>
-
-        <template #title v-if="!dialogMode">
-            <div class="d-flex align-center">
-                <span>{{ $t('Default Account Filter') }}</span>
+    <v-card :class="{ 'pa-2 pa-sm-4 pa-md-8': dialogMode }">
+        <template #title>
+            <div class="d-flex align-center justify-center" v-if="dialogMode">
+                <div class="w-100 text-center">
+                    <h5 class="text-h5">{{ $t(title) }}</h5>
+                </div>
+                <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                       :disabled="loading || !hasAnyAvailableAccount" :icon="true">
+                    <v-icon :icon="icons.more" />
+                    <v-menu activator="parent">
+                        <v-list>
+                            <v-list-item :prepend-icon="icons.selectAll"
+                                         :title="$t('Select All')"
+                                         @click="selectAll"></v-list-item>
+                            <v-list-item :prepend-icon="icons.selectNone"
+                                         :title="$t('Select None')"
+                                         @click="selectNone"></v-list-item>
+                            <v-list-item :prepend-icon="icons.selectInverse"
+                                         :title="$t('Invert Selection')"
+                                         @click="selectInvert"></v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+            </div>
+            <div class="d-flex align-center" v-else-if="!dialogMode">
+                <span>{{ $t(title) }}</span>
                 <v-spacer/>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading" :icon="true">
@@ -51,11 +51,11 @@
                                :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
         </div>
 
-        <v-card-text v-if="!loading && !hasAnyAvailableAccount">
+        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-if="!loading && !hasAnyAvailableAccount">
             <span class="text-body-1">{{ $t('No available account') }}</span>
         </v-card-text>
 
-        <v-card-text v-else-if="!loading && hasAnyAvailableAccount">
+        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-else-if="!loading && hasAnyAvailableAccount">
             <v-expansion-panels class="account-categories" multiple v-model="expandAccountCategories">
                 <v-expansion-panel :key="accountCategory.category"
                                    :value="accountCategory.category"
@@ -112,11 +112,12 @@
             </v-expansion-panels>
         </v-card-text>
 
-        <v-card-actions class="mt-3" v-if="dialogMode">
-            <v-spacer></v-spacer>
-            <v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
-            <v-btn color="primary" :disabled="!hasAnyAvailableAccount" @click="save">{{ $t('OK') }}</v-btn>
-        </v-card-actions>
+        <v-card-text class="overflow-y-visible" v-if="dialogMode">
+            <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
+                <v-btn :disabled="!hasAnyAvailableAccount" @click="save">{{ $t(applyText) }}</v-btn>
+                <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
+            </div>
+        </v-card-text>
     </v-card>
 </template>
 
diff --git a/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue b/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
index 7412dfc0..98de880a 100644
--- a/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
+++ b/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
@@ -1,30 +1,30 @@
 <template>
-    <v-card>
-        <v-toolbar color="primary" v-if="dialogMode">
-            <v-toolbar-title>{{ $t('Default Transaction Category Filter') }}</v-toolbar-title>
-            <v-spacer/>
-            <v-btn density="comfortable" color="default" variant="text" class="ml-2"
-                   :disabled="loading || !hasAnyAvailableCategory" :icon="true">
-                <v-icon :icon="icons.more" />
-                <v-menu activator="parent">
-                    <v-list>
-                        <v-list-item :prepend-icon="icons.selectAll"
-                                     :title="$t('Select All')"
-                                     @click="selectAll"></v-list-item>
-                        <v-list-item :prepend-icon="icons.selectNone"
-                                     :title="$t('Select None')"
-                                     @click="selectNone"></v-list-item>
-                        <v-list-item :prepend-icon="icons.selectInverse"
-                                     :title="$t('Invert Selection')"
-                                     @click="selectInvert"></v-list-item>
-                    </v-list>
-                </v-menu>
-            </v-btn>
-        </v-toolbar>
-
-        <template #title v-if="!dialogMode">
-            <div class="d-flex align-center">
-                <span>{{ $t('Default Transaction Category Filter') }}</span>
+    <v-card :class="{ 'pa-2 pa-sm-4 pa-md-8': dialogMode }">
+        <template #title>
+            <div class="d-flex align-center justify-center" v-if="dialogMode">
+                <div class="w-100 text-center">
+                    <h5 class="text-h5">{{ $t(title) }}</h5>
+                </div>
+                <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                       :disabled="loading || !hasAnyAvailableCategory" :icon="true">
+                    <v-icon :icon="icons.more" />
+                    <v-menu activator="parent">
+                        <v-list>
+                            <v-list-item :prepend-icon="icons.selectAll"
+                                         :title="$t('Select All')"
+                                         @click="selectAll"></v-list-item>
+                            <v-list-item :prepend-icon="icons.selectNone"
+                                         :title="$t('Select None')"
+                                         @click="selectNone"></v-list-item>
+                            <v-list-item :prepend-icon="icons.selectInverse"
+                                         :title="$t('Invert Selection')"
+                                         @click="selectInvert"></v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+            </div>
+            <div class="d-flex align-center" v-else-if="!dialogMode">
+                <span>{{ $t(title) }}</span>
                 <v-spacer/>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading" :icon="true">
@@ -51,7 +51,7 @@
                                :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
         </div>
 
-        <v-card-text v-else-if="!loading">
+        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-else-if="!loading">
             <v-expansion-panels class="category-types" multiple v-model="expandCategoryTypes">
                 <v-expansion-panel :key="transactionType.type"
                                    :value="transactionType.type"
@@ -110,11 +110,12 @@
             </v-expansion-panels>
         </v-card-text>
 
-        <v-card-actions class="mt-3" v-if="dialogMode">
-            <v-spacer></v-spacer>
-            <v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
-            <v-btn color="primary" :disabled="!hasAnyAvailableCategory" @click="save">{{ $t('OK') }}</v-btn>
-        </v-card-actions>
+        <v-card-text class="overflow-y-visible" v-if="dialogMode">
+            <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
+                <v-btn :disabled="!hasAnyAvailableCategory" @click="save">{{ $t(applyText) }}</v-btn>
+                <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
+            </div>
+        </v-card-text>
     </v-card>
 </template>