rework settings to use cards

+ add description to clear storage
+ add dialog before clearing storage to avoid accidential use

src/components/settings/ClearLocalStorage.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-col cols="12" sm="12" md="6" lg="6" xl="6">
+    <v-card height="100%" raised>
+      <v-card-title>Clear Local Storage</v-card-title>
+      <v-card-text>
+        <p>Delete all imported decks as well as your learning progess in the app.</p>
+      </v-card-text>
+      <div class="horizontal-spacer"></div>
+      <v-card-actions class="button-padding">
+        <v-spacer></v-spacer>
+        <v-btn color="red" @click="clearLocalStorage" right>Clear Local Storage</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-col>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import * as clearStorageDialogHelper from "../../helpers/clearStorageDialogHelper";
+
+@Component
+export default class MaxCardCount extends Vue {
+  clearLocalStorage() {
+    clearStorageDialogHelper.clearLocalStorageDialog(this);
+  }
+}
+</script>
+
+<style scoped>
+.button-padding {
+  padding: 16px;
+}
+.v-card {
+  display: flex;
+  flex-direction: column;
+}
+.horizontal-spacer {
+  flex-grow: 1;
+}
+</style>

src/components/settings/Settings.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-container fluid>
+      <v-row>
+        <ClearLocalStorage />
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import ClearLocalStorage from "./ClearLocalStorage.vue";
+
+@Component({
+  components: {
+    ClearLocalStorage
+  }
+})
+export default class Settings extends Vue {}
+</script>
+
+<style scoped>
+</style>

src/helpers/clearStorageDialogHelper.ts

@@ -0,0 +1,24 @@
+import { Event } from "../types";
+
+export function clearLocalStorageDialog(context: any) {
+  context.$eventHub.$emit("showCustomDialog", {
+    title: "Clear Storage?",
+    message:
+      "Do you really want to clear your local storage? Every deck and learning progress will be lost.",
+    buttons: [
+      {
+        name: "Cancel",
+        color: "grey",
+      },
+      {
+        name: "Clear Storage",
+        color: "orange darken-1",
+        callback: () => {
+          context.$eventHub.$emit(
+            Event.CLEAR_LOCAL_STORAGE
+          );
+        },
+      },
+    ],
+  });
+}

src/views/Settings.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="settings">
-    <v-container fluid>
-      <v-row align="center" justify="center">
-        <v-col cols="10">
-          <span class="title">Settings</span>
-          <br />
-          <v-btn color="red" @click="clearLocalStorage" class="my-4">Clear Local Storage</v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
+    <SettingsComponent />
   </div>
 </template>
 
@@ -16,18 +8,15 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 
-import { Event } from "../types";
+import SettingsComponent from "../components/settings/Settings.vue";
 
-@Component
-export default class Settings extends Vue {
-  clearLocalStorage() {
-    this.$eventHub.$emit(Event.CLEAR_LOCAL_STORAGE);
+@Component({
+  components: {
+    SettingsComponent
   }
-}
+})
+export default class Settings extends Vue {}
 </script>
 
 <style scoped>
-.settings {
-  text-align: center;
-}
 </style>