New cardView component, add database reset confirm dialog

software/src/components/actionDialog.vue

@@ -1,33 +1,33 @@
 <script setup lang="ts">
 import { ModelRef } from 'vue';
+import cardView from './cardView.vue';
 
 const showDialog: ModelRef<boolean> = defineModel()
 
 defineProps({
   title: String,
   icon: {
-    type: String,
-    default: "mdi-cog"
+    type: String
   },
   subtitle: {
     type: String,
     default: ""
-  },
-  imageUrl: {
-    type: String,
-    default: ""
   }
 })
 </script>
 
 <template>
   <v-dialog max-width="1200" v-model="showDialog">
-    <v-card :title="title" :subtitle="subtitle" :prepend-icon="icon" density="compact">
-      <slot name="content"></slot>
-      
-      <v-card-actions>
+    <card-view
+      :title="title"
+      :subtitle="subtitle"
+      :icon="icon"
+    >
+      <slot></slot>
+
+      <template #actions>
         <slot name="actions"></slot>
-      </v-card-actions>
-    </v-card>
+      </template>
+    </card-view>
   </v-dialog>
 </template>

software/src/components/cardView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+defineProps({
+  title: String,
+  icon: {
+    type: String
+  },
+  subtitle: {
+    type: String,
+  }
+})
+</script>
+
+<template>
+  <v-card
+    :title="title"
+    :subtitle="subtitle"
+    :prepend-icon="icon"
+    class="card-outter"
+  >
+    <slot></slot>
+    
+    <v-card-actions v-if="$slots.actions" class="card-actions">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style>
+</style>