New "about" section on PreferencesPage, add new exercise descriptions/steps

software/src/components/basics/cardView.vue

@@ -29,8 +29,8 @@ defineProps({
           style="background-color: transparent"
         >
           <div>
-            <div class="pl-2 py-1">
-              <v-icon :icon="icon" v-if="icon" /> &nbsp;{{ title }}
+            <div class="pl-2 py-1 d-flex justify-center">
+              <v-icon :icon="icon" v-if="icon" />&nbsp;{{ title }}
             </div>
             <div>
               <v-card-subtitle >{{ subtitle }}</v-card-subtitle>
@@ -40,9 +40,9 @@ defineProps({
       </v-sheet>
     </v-card-title>
 
-    <slot name="borderless"></slot>
+    <slot name="borderless" v-if="$slots.borderless"></slot>
 
-    <v-container>
+    <v-container v-if="$slots.default">
       <v-row>
         <v-col>
           <slot></slot>

software/src/components/basics/confirmDialog.vue

@@ -8,12 +8,12 @@ const showDialog: ModelRef<boolean> = defineModel()
 const props = defineProps({
   title: String,
   description: String,
-  onConfirm: Function
+  onConfirm: Function,
+  loading: Boolean
 })
 
 function confirmPressed() {
   props.onConfirm()
-  showDialog.value = false
 }
 </script>
 
@@ -22,6 +22,7 @@ function confirmPressed() {
     :title="title"
     max-width="400"
     v-model="showDialog"
+    persistent
   >
     {{ description }}
 
@@ -30,6 +31,7 @@ function confirmPressed() {
         @click="showDialog = false" 
         prepend-icon="mdi-close"
         color="orange"
+        :loading="loading"
       >
         {{ $t("misc.actions.cancel") }}
       </outlined-button>
@@ -38,6 +40,7 @@ function confirmPressed() {
         @click="confirmPressed"
         prepend-icon="mdi-check"
         color="red"
+        :loading="loading"
       >
         {{ $t("misc.actions.confirm") }}
       </outlined-button>