From aec8abfd65ca644242765da9f4716aae915225b1 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 21 Apr 2021 15:38:39 -0800
Subject: [PATCH] refactor/page specific components to page folder

---
 frontend/src/App.vue                          |  6 +-
 frontend/src/components/Debug/LastRecipe.vue  | 38 -----------
 frontend/src/components/Debug/LogFile.vue     | 37 -----------
 .../ColorPickerDialog.vue                     |  0
 .../{UI => FormHelpers}/DatePicker.vue        |  0
 .../TimePickerDialog.vue                      |  0
 .../ImportSummaryDialog/DataTable.vue         |  0
 .../Backup => }/ImportSummaryDialog/index.vue |  2 +-
 .../src/components/MealPlan/MealPlanNew.vue   | 14 +---
 .../src/components/Recipe/EditorButtonRow.vue |  8 +--
 .../Recipe/RecipeEditor/ImageUploadBtn.vue    |  6 +-
 .../UI/{ => Buttons}/TheDownloadBtn.vue       |  0
 .../TheUploadBtn.vue}                         |  0
 .../BaseDialog.vue}                           |  0
 .../ConfirmationDialog.vue}                   |  6 +-
 .../src/components/UI/SuccessFailureAlert.vue | 66 -------------------
 frontend/src/components/UI/TheAppBar.vue      |  8 +--
 .../UI/{AddRecipeFab.vue => TheRecipeFab.vue} |  0
 .../UI/{SiteMenu.vue => TheSiteMenu.vue}      |  0
 frontend/src/pages/Admin/About/index.vue      |  2 +-
 .../Admin/Backup/AvailableBackupCard.vue      |  0
 .../Admin/Backup/BackupCard.vue               |  0
 .../Admin/Backup/ImportDialog.vue             |  4 +-
 .../Admin/Backup/ImportOptions.vue            |  0
 .../Admin/Backup/NewBackupCard.vue            |  2 +-
 frontend/src/pages/Admin/Backup/index.vue     | 23 ++-----
 .../Admin/ManageUsers/GroupCard.vue           |  6 +-
 .../Admin/ManageUsers/GroupDashboard.vue      |  2 +-
 .../Admin/ManageUsers/TheSignUpTable.vue      |  6 +-
 .../Admin/ManageUsers/TheUserTable.vue        |  6 +-
 .../src/pages/Admin/ManageUsers/index.vue     | 12 ++--
 .../src/pages/Admin/MealPlanner/index.vue     |  2 +-
 .../Admin/Migration/MigrationCard.vue         |  8 +--
 .../Admin/Migration/MigrationDialog.vue       |  2 +-
 frontend/src/pages/Admin/Migration/index.vue  | 12 +---
 frontend/src/pages/Admin/Profile/index.vue    |  6 +-
 .../Admin/Settings}/CreatePageDialog.vue      |  0
 .../Admin/Settings}/CustomPageCreator.vue     |  2 +-
 .../Admin/Settings}/HomePageSettings.vue      |  0
 frontend/src/pages/Admin/Settings/index.vue   |  4 +-
 .../Admin/Theme/NewThemeDialog.vue            |  0
 .../Admin/Theme/ThemeCard.vue                 |  6 +-
 frontend/src/pages/Admin/Theme/index.vue      |  6 +-
 43 files changed, 67 insertions(+), 235 deletions(-)
 delete mode 100644 frontend/src/components/Debug/LastRecipe.vue
 delete mode 100644 frontend/src/components/Debug/LogFile.vue
 rename frontend/src/components/{Admin/Theme => FormHelpers}/ColorPickerDialog.vue (100%)
 rename frontend/src/components/{UI => FormHelpers}/DatePicker.vue (100%)
 rename frontend/src/components/{Admin/MealPlanner => FormHelpers}/TimePickerDialog.vue (100%)
 rename frontend/src/components/{Admin/Backup => }/ImportSummaryDialog/DataTable.vue (100%)
 rename frontend/src/components/{Admin/Backup => }/ImportSummaryDialog/index.vue (97%)
 rename frontend/src/components/UI/{ => Buttons}/TheDownloadBtn.vue (100%)
 rename frontend/src/components/UI/{UploadBtn.vue => Buttons/TheUploadBtn.vue} (100%)
 rename frontend/src/components/UI/{BasicModal.vue => Dialogs/BaseDialog.vue} (100%)
 rename frontend/src/components/UI/{Confirmation.vue => Dialogs/ConfirmationDialog.vue} (93%)
 delete mode 100644 frontend/src/components/UI/SuccessFailureAlert.vue
 rename frontend/src/components/UI/{AddRecipeFab.vue => TheRecipeFab.vue} (100%)
 rename frontend/src/components/UI/{SiteMenu.vue => TheSiteMenu.vue} (100%)
 rename frontend/src/{components => pages}/Admin/Backup/AvailableBackupCard.vue (100%)
 rename frontend/src/{components => pages}/Admin/Backup/BackupCard.vue (100%)
 rename frontend/src/{components => pages}/Admin/Backup/ImportDialog.vue (95%)
 rename frontend/src/{components => pages}/Admin/Backup/ImportOptions.vue (100%)
 rename frontend/src/{components => pages}/Admin/Backup/NewBackupCard.vue (97%)
 rename frontend/src/{components => pages}/Admin/ManageUsers/GroupCard.vue (95%)
 rename frontend/src/{components => pages}/Admin/ManageUsers/GroupDashboard.vue (97%)
 rename frontend/src/{components => pages}/Admin/ManageUsers/TheSignUpTable.vue (97%)
 rename frontend/src/{components => pages}/Admin/ManageUsers/TheUserTable.vue (98%)
 rename frontend/src/{components => pages}/Admin/Migration/MigrationCard.vue (94%)
 rename frontend/src/{components => pages}/Admin/Migration/MigrationDialog.vue (96%)
 rename frontend/src/{components/Admin/General => pages/Admin/Settings}/CreatePageDialog.vue (100%)
 rename frontend/src/{components/Admin/General => pages/Admin/Settings}/CustomPageCreator.vue (97%)
 rename frontend/src/{components/Admin/General => pages/Admin/Settings}/HomePageSettings.vue (100%)
 rename frontend/src/{components => pages}/Admin/Theme/NewThemeDialog.vue (100%)
 rename frontend/src/{components => pages}/Admin/Theme/ThemeCard.vue (94%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6a8f33185..d9df8bf27 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,7 +9,7 @@
       >
 
       <v-slide-x-reverse-transition>
-        <AddRecipeFab v-if="loggedIn" />
+        <TheRecipeFab v-if="loggedIn" />
       </v-slide-x-reverse-transition>
       <router-view></router-view>
     </v-main>
@@ -19,7 +19,7 @@
 
 <script>
 import TheAppBar from "@/components/UI/TheAppBar";
-import AddRecipeFab from "@/components/UI/AddRecipeFab";
+import TheRecipeFab from "@/components/UI/TheRecipeFab";
 import Vuetify from "./plugins/vuetify";
 import { user } from "@/mixins/user";
 
@@ -28,7 +28,7 @@ export default {
 
   components: {
     TheAppBar,
-    AddRecipeFab,
+    TheRecipeFab,
   },
 
   mixins: [user],
diff --git a/frontend/src/components/Debug/LastRecipe.vue b/frontend/src/components/Debug/LastRecipe.vue
deleted file mode 100644
index c75c7376b..000000000
--- a/frontend/src/components/Debug/LastRecipe.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>Last Scrapped JSON Data</v-card-title>
-    <v-card-text>
-      <VJsoneditor
-        @error="logError()"
-        v-model="lastRecipeJson"
-        height="1500px"
-        :options="jsonEditorOptions"
-      />
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import VJsoneditor from "v-jsoneditor";
-import { api } from "@/api";
-export default {
-  components: { VJsoneditor },
-  data() {
-    return {
-      lastRecipeJson: {},
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-    };
-  },
-
-  async mounted() {
-    this.lastRecipeJson = await api.meta.getLastJson();
-  },
-};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/Debug/LogFile.vue b/frontend/src/components/Debug/LogFile.vue
deleted file mode 100644
index 47f309496..000000000
--- a/frontend/src/components/Debug/LogFile.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>Last Scrapped JSON Data</v-card-title>
-    <v-card-text>
-      <VJsoneditor
-        @error="logError()"
-        v-model="lastRecipeJson"
-        height="1500px"
-        :options="jsonEditorOptions"
-      />
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import VJsoneditor from "v-jsoneditor";
-export default {
-  components: { VJsoneditor },
-  data() {
-    return {
-      lastRecipeJson: "",
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-    };
-  },
-
-  async mounted() {
-    this.lastRecipeJson = "Hello \n 123 \n 567"
-  },
-};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/Admin/Theme/ColorPickerDialog.vue b/frontend/src/components/FormHelpers/ColorPickerDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/Theme/ColorPickerDialog.vue
rename to frontend/src/components/FormHelpers/ColorPickerDialog.vue
diff --git a/frontend/src/components/UI/DatePicker.vue b/frontend/src/components/FormHelpers/DatePicker.vue
similarity index 100%
rename from frontend/src/components/UI/DatePicker.vue
rename to frontend/src/components/FormHelpers/DatePicker.vue
diff --git a/frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue b/frontend/src/components/FormHelpers/TimePickerDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue
rename to frontend/src/components/FormHelpers/TimePickerDialog.vue
diff --git a/frontend/src/components/Admin/Backup/ImportSummaryDialog/DataTable.vue b/frontend/src/components/ImportSummaryDialog/DataTable.vue
similarity index 100%
rename from frontend/src/components/Admin/Backup/ImportSummaryDialog/DataTable.vue
rename to frontend/src/components/ImportSummaryDialog/DataTable.vue
diff --git a/frontend/src/components/Admin/Backup/ImportSummaryDialog/index.vue b/frontend/src/components/ImportSummaryDialog/index.vue
similarity index 97%
rename from frontend/src/components/Admin/Backup/ImportSummaryDialog/index.vue
rename to frontend/src/components/ImportSummaryDialog/index.vue
index 4c2f8597d..c41aa912e 100644
--- a/frontend/src/components/Admin/Backup/ImportSummaryDialog/index.vue
+++ b/frontend/src/components/ImportSummaryDialog/index.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import DataTable from "@/components/Admin/Backup/ImportSummaryDialog/DataTable";
+import DataTable from "@/components/ImportSummaryDialog";
 export default {
   components: {
     DataTable,
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index 42f00116c..dd56a0ec7 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -31,11 +31,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <DatePicker 
-              v-model="startDate"
-              no-title
-              @input="menu2 = false"
-              />
+            <DatePicker v-model="startDate" no-title @input="menu2 = false" />
           </v-menu>
         </v-col>
         <v-col cols="12" lg="6" md="6" sm="12">
@@ -59,11 +55,7 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <DatePicker 
-              v-model="endDate"
-              no-title
-              @input="menu2 = false"
-              />
+            <DatePicker v-model="endDate" no-title @input="menu2 = false" />
           </v-menu>
         </v-col>
       </v-row>
@@ -87,7 +79,7 @@
 
 <script>
 const CREATE_EVENT = "created";
-import DatePicker from "../UI/DatePicker";
+import DatePicker from "@/components/FormHelpers/DatePicker";
 import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
diff --git a/frontend/src/components/Recipe/EditorButtonRow.vue b/frontend/src/components/Recipe/EditorButtonRow.vue
index 2b12023a9..524fe1fd1 100644
--- a/frontend/src/components/Recipe/EditorButtonRow.vue
+++ b/frontend/src/components/Recipe/EditorButtonRow.vue
@@ -7,9 +7,9 @@
       :extension-height="isSticky ? '20' : '0'"
       color="rgb(255, 0, 0, 0.0)"
     >
-      <Confirmation
+      <ConfirmationDialog
         :title="$t('recipe.delete-recipe')"
-        :message="$t('recipe.delete-confirmation')"
+        :message="$t('recipe.delete-ConfirmationDialog')"
         color="error"
         icon="mdi-alert-circle"
         ref="deleteRecipieConfirm"
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation.vue";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
 
 export default {
   props: {
@@ -56,7 +56,7 @@ export default {
   },
 
   components: {
-    Confirmation,
+    ConfirmationDialog,
   },
   data() {
     return {
diff --git a/frontend/src/components/Recipe/RecipeEditor/ImageUploadBtn.vue b/frontend/src/components/Recipe/RecipeEditor/ImageUploadBtn.vue
index de9f063e1..fa5dd4c1f 100644
--- a/frontend/src/components/Recipe/RecipeEditor/ImageUploadBtn.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/ImageUploadBtn.vue
@@ -11,7 +11,7 @@
           <div>
             Recipe Image
           </div>
-          <UploadBtn
+          <TheUploadBtn
             class="ml-auto"
             url="none"
             file-name="image"
@@ -44,12 +44,12 @@
 <script>
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
-import UploadBtn from "@/components/UI/UploadBtn";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import { api } from "@/api";
 // import axios from "axios";
 export default {
   components: {
-    UploadBtn,
+    TheUploadBtn,
   },
   props: {
     slug: String,
diff --git a/frontend/src/components/UI/TheDownloadBtn.vue b/frontend/src/components/UI/Buttons/TheDownloadBtn.vue
similarity index 100%
rename from frontend/src/components/UI/TheDownloadBtn.vue
rename to frontend/src/components/UI/Buttons/TheDownloadBtn.vue
diff --git a/frontend/src/components/UI/UploadBtn.vue b/frontend/src/components/UI/Buttons/TheUploadBtn.vue
similarity index 100%
rename from frontend/src/components/UI/UploadBtn.vue
rename to frontend/src/components/UI/Buttons/TheUploadBtn.vue
diff --git a/frontend/src/components/UI/BasicModal.vue b/frontend/src/components/UI/Dialogs/BaseDialog.vue
similarity index 100%
rename from frontend/src/components/UI/BasicModal.vue
rename to frontend/src/components/UI/Dialogs/BaseDialog.vue
diff --git a/frontend/src/components/UI/Confirmation.vue b/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
similarity index 93%
rename from frontend/src/components/UI/Confirmation.vue
rename to frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
index 808c14aeb..4bb37c948 100644
--- a/frontend/src/components/UI/Confirmation.vue
+++ b/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
@@ -8,7 +8,7 @@
     @keydown.esc="cancel"
   >
     <v-card>
-      <v-app-bar v-if="Boolean(title)" :color="color" dense flat dark>
+      <v-app-bar v-if="Boolean(title)" :color="color" dense  dark>
         <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
         <v-toolbar-title v-text="title" />
       </v-app-bar>
@@ -36,13 +36,13 @@
 const CLOSE_EVENT = "close";
 const OPEN_EVENT = "open";
 /**
- * Confirmation Component used to add a second validaion step to an action.
+ * ConfirmationDialog Component used to add a second validaion step to an action.
  * @version 1.0.1
  * @author [zackbcom](https://github.com/zackbcom)
  * @since Version 1.0.0
  */
 export default {
-  name: "Confirmation",
+  name: "ConfirmationDialog",
   props: {
     /**
      * Message to be in body.
diff --git a/frontend/src/components/UI/SuccessFailureAlert.vue b/frontend/src/components/UI/SuccessFailureAlert.vue
deleted file mode 100644
index f9ea68360..000000000
--- a/frontend/src/components/UI/SuccessFailureAlert.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    max-width="900px"
-    :fullscreen="$vuetify.breakpoint.xsOnly"
-  >
-    <v-card>
-      <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
-        <v-btn icon dark @click="dialog = false">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-        <v-toolbar-title>{{ title }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-toolbar-items></v-toolbar-items>
-      </v-toolbar>
-      <v-card-title v-show="$vuetify.breakpoint.smAndUp">
-        {{ title }}
-      </v-card-title>
-      <v-card-text class="mt-3">
-        <v-row>
-          <v-col>
-            <v-alert outlined dense type="success">
-              <h4>{{ successHeader }}</h4>
-              <p v-for="success in this.success" :key="success" class="my-1">
-                - {{ success }}
-              </p>
-            </v-alert>
-          </v-col>
-          <v-col>
-            <v-alert v-if="failed[0]" outlined dense type="error">
-              <h4>{{ failedHeader }}</h4>
-              <p v-for="fail in this.failed" :key="fail" class="my-1">
-                - {{ fail }}
-              </p>
-            </v-alert>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-export default {
-  props: {
-    title: String,
-    successHeader: String,
-    success: Array,
-    failedHeader: String,
-    failed: Array,
-  },
-  data() {
-    return {
-      dialog: false,
-    };
-  },
-  methods: {
-    open() {
-      this.dialog = true;
-    },
-  },
-};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/UI/TheAppBar.vue b/frontend/src/components/UI/TheAppBar.vue
index 1c556feb6..72947116a 100644
--- a/frontend/src/components/UI/TheAppBar.vue
+++ b/frontend/src/components/UI/TheAppBar.vue
@@ -35,7 +35,7 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <SiteMenu />
+      <TheSiteMenu />
     </v-app-bar>
     <v-app-bar
       v-else
@@ -67,13 +67,13 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <SiteMenu />
+      <TheSiteMenu />
     </v-app-bar>
   </div>
 </template>
 
 <script>
-import SiteMenu from "@/components/UI/SiteMenu";
+import TheSiteMenu from "@/components/UI/TheSiteMenu";
 import SearchBar from "@/components/UI/Search/SearchBar";
 import SearchDialog from "@/components/UI/Search/SearchDialog";
 import { user } from "@/mixins/user";
@@ -82,7 +82,7 @@ export default {
 
   mixins: [user],
   components: {
-    SiteMenu,
+    TheSiteMenu,
     SearchBar,
     SearchDialog,
   },
diff --git a/frontend/src/components/UI/AddRecipeFab.vue b/frontend/src/components/UI/TheRecipeFab.vue
similarity index 100%
rename from frontend/src/components/UI/AddRecipeFab.vue
rename to frontend/src/components/UI/TheRecipeFab.vue
diff --git a/frontend/src/components/UI/SiteMenu.vue b/frontend/src/components/UI/TheSiteMenu.vue
similarity index 100%
rename from frontend/src/components/UI/SiteMenu.vue
rename to frontend/src/components/UI/TheSiteMenu.vue
diff --git a/frontend/src/pages/Admin/About/index.vue b/frontend/src/pages/Admin/About/index.vue
index a8abc0a1e..8babcb460 100644
--- a/frontend/src/pages/Admin/About/index.vue
+++ b/frontend/src/pages/Admin/About/index.vue
@@ -38,7 +38,7 @@
 
 <script>
 import { api } from "@/api";
-import TheDownloadBtn from "@/components/UI/TheDownloadBtn";
+import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
 export default {
   components: { TheDownloadBtn },
   data() {
diff --git a/frontend/src/components/Admin/Backup/AvailableBackupCard.vue b/frontend/src/pages/Admin/Backup/AvailableBackupCard.vue
similarity index 100%
rename from frontend/src/components/Admin/Backup/AvailableBackupCard.vue
rename to frontend/src/pages/Admin/Backup/AvailableBackupCard.vue
diff --git a/frontend/src/components/Admin/Backup/BackupCard.vue b/frontend/src/pages/Admin/Backup/BackupCard.vue
similarity index 100%
rename from frontend/src/components/Admin/Backup/BackupCard.vue
rename to frontend/src/pages/Admin/Backup/BackupCard.vue
diff --git a/frontend/src/components/Admin/Backup/ImportDialog.vue b/frontend/src/pages/Admin/Backup/ImportDialog.vue
similarity index 95%
rename from frontend/src/components/Admin/Backup/ImportDialog.vue
rename to frontend/src/pages/Admin/Backup/ImportDialog.vue
index b379dd982..236f2e5d3 100644
--- a/frontend/src/components/Admin/Backup/ImportDialog.vue
+++ b/frontend/src/pages/Admin/Backup/ImportDialog.vue
@@ -58,8 +58,8 @@
 
 
 <script>
-import ImportOptions from "@/components/Admin/Backup/ImportOptions";
-import TheDownloadBtn from "@/components/UI/TheDownloadBtn.vue";
+import ImportOptions from "./ImportOptions";
+import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
 import { backupURLs } from "@/api/backup";
 export default {
   components: { ImportOptions, TheDownloadBtn },
diff --git a/frontend/src/components/Admin/Backup/ImportOptions.vue b/frontend/src/pages/Admin/Backup/ImportOptions.vue
similarity index 100%
rename from frontend/src/components/Admin/Backup/ImportOptions.vue
rename to frontend/src/pages/Admin/Backup/ImportOptions.vue
diff --git a/frontend/src/components/Admin/Backup/NewBackupCard.vue b/frontend/src/pages/Admin/Backup/NewBackupCard.vue
similarity index 97%
rename from frontend/src/components/Admin/Backup/NewBackupCard.vue
rename to frontend/src/pages/Admin/Backup/NewBackupCard.vue
index 56121ada0..f522596a4 100644
--- a/frontend/src/components/Admin/Backup/NewBackupCard.vue
+++ b/frontend/src/pages/Admin/Backup/NewBackupCard.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import ImportOptions from "@/components/Admin/Backup/ImportOptions";
+import ImportOptions from "./ImportOptions";
 import { api } from "@/api";
 export default {
   components: { ImportOptions },
diff --git a/frontend/src/pages/Admin/Backup/index.vue b/frontend/src/pages/Admin/Backup/index.vue
index 79a1974d5..c9a59e7f8 100644
--- a/frontend/src/pages/Admin/Backup/index.vue
+++ b/frontend/src/pages/Admin/Backup/index.vue
@@ -20,7 +20,7 @@
       <v-card-title class="mt-n6">
         {{ $t("settings.available-backups") }}
         <span>
-          <UploadBtn
+          <TheUploadBtn
             class="mt-1"
             url="/api/backups/upload"
             @uploaded="getAvailableBackups"
@@ -33,14 +33,7 @@
         @finished="processFinished"
         :backups="availableBackups"
       />
-      <SuccessFailureAlert
-        ref="report"
-        :title="$t('settings.backup.backup-restore-report')"
-        :success-header="$t('settings.backup.successfully-imported')"
-        :success="successfulImports"
-        :failed-header="$t('settings.backup.failed-imports')"
-        :failed="failedImports"
-      />
+
       <ImportSummaryDialog ref="report" :import-data="importData" />
     </v-card-text>
   </v-card>
@@ -48,16 +41,14 @@
 
 <script>
 import { api } from "@/api";
-import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
-import ImportSummaryDialog from "@/components/Admin/Backup/ImportSummaryDialog";
-import UploadBtn from "@/components/UI/UploadBtn";
-import AvailableBackupCard from "@/components/Admin/Backup/AvailableBackupCard";
-import NewBackupCard from "@/components/Admin/Backup/NewBackupCard";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
+import ImportSummaryDialog from "@/components/ImportSummaryDialog";
+import AvailableBackupCard from "@/pages/Admin/Backup/AvailableBackupCard";
+import NewBackupCard from "@/pages/Admin/Backup/NewBackupCard";
 
 export default {
   components: {
-    SuccessFailureAlert,
-    UploadBtn,
+    TheUploadBtn,
     AvailableBackupCard,
     NewBackupCard,
     ImportSummaryDialog,
diff --git a/frontend/src/components/Admin/ManageUsers/GroupCard.vue b/frontend/src/pages/Admin/ManageUsers/GroupCard.vue
similarity index 95%
rename from frontend/src/components/Admin/ManageUsers/GroupCard.vue
rename to frontend/src/pages/Admin/ManageUsers/GroupCard.vue
index 57de547c8..fbb63d918 100644
--- a/frontend/src/components/Admin/ManageUsers/GroupCard.vue
+++ b/frontend/src/pages/Admin/ManageUsers/GroupCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Confirmation
+    <ConfirmationDialog
       ref="deleteGroupConfirm"
       :title="$t('user.confirm-group-deletion')"
       :message="
@@ -55,10 +55,10 @@
 
 <script>
 const RENDER_EVENT = "update";
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 export default {
-  components: { Confirmation },
+  components: { ConfirmationDialog },
   props: {
     group: {
       default: {
diff --git a/frontend/src/components/Admin/ManageUsers/GroupDashboard.vue b/frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
similarity index 97%
rename from frontend/src/components/Admin/ManageUsers/GroupDashboard.vue
rename to frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
index 86a5e8e3c..845f2c904 100644
--- a/frontend/src/components/Admin/ManageUsers/GroupDashboard.vue
+++ b/frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
@@ -85,7 +85,7 @@
 <script>
 import { validators } from "@/mixins/validators";
 import { api } from "@/api";
-import GroupCard from "@/components/Admin/ManageUsers/GroupCard";
+import GroupCard from "./GroupCard";
 export default {
   components: { GroupCard },
   mixins: [validators],
diff --git a/frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
similarity index 97%
rename from frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue
rename to frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
index ce6338a55..7a507fd9f 100644
--- a/frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card outlined class="mt-n1">
-    <Confirmation
+    <ConfirmationDialog
       ref="deleteUserDialog"
       :title="$t('user.confirm-link-deletion')"
       :message="
@@ -107,11 +107,11 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
-  components: { Confirmation },
+  components: { ConfirmationDialog },
   mixins: [validators],
   data() {
     return {
diff --git a/frontend/src/components/Admin/ManageUsers/TheUserTable.vue b/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
similarity index 98%
rename from frontend/src/components/Admin/ManageUsers/TheUserTable.vue
rename to frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
index aecac70ce..c6f45162f 100644
--- a/frontend/src/components/Admin/ManageUsers/TheUserTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card outlined class="mt-n1">
-    <Confirmation
+    <ConfirmationDialog
       ref="deleteUserDialog"
       :title="$t('user.confirm-user-deletion')"
       :message="
@@ -144,11 +144,11 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
-  components: { Confirmation },
+  components: { ConfirmationDialog },
   mixins: [validators],
   data() {
     return {
diff --git a/frontend/src/pages/Admin/ManageUsers/index.vue b/frontend/src/pages/Admin/ManageUsers/index.vue
index 5ac616bd7..b795ebba0 100644
--- a/frontend/src/pages/Admin/ManageUsers/index.vue
+++ b/frontend/src/pages/Admin/ManageUsers/index.vue
@@ -11,17 +11,17 @@
         <v-tabs-slider></v-tabs-slider>
 
         <v-tab>
-          {{$t('user.users')}}
+          {{ $t("user.users") }}
           <v-icon>mdi-account</v-icon>
         </v-tab>
 
         <v-tab>
-          {{$t('user.sign-up-links')}}
+          {{ $t("user.sign-up-links") }}
           <v-icon>mdi-account-plus-outline</v-icon>
         </v-tab>
 
         <v-tab>
-          {{$t('user.groups')}}
+          {{ $t("user.groups") }}
           <v-icon>mdi-account-group</v-icon>
         </v-tab>
       </v-tabs>
@@ -42,9 +42,9 @@
 </template>
 
 <script>
-import TheUserTable from "@/components/Admin/ManageUsers/TheUserTable";
-import GroupDashboard from "@/components/Admin/ManageUsers/GroupDashboard";
-import TheSignUpTable from "@/components/Admin/ManageUsers/TheSignUpTable";
+import TheUserTable from "./TheUserTable";
+import GroupDashboard from "./GroupDashboard";
+import TheSignUpTable from "./TheSignUpTable";
 export default {
   components: { TheUserTable, GroupDashboard, TheSignUpTable },
   data() {
diff --git a/frontend/src/pages/Admin/MealPlanner/index.vue b/frontend/src/pages/Admin/MealPlanner/index.vue
index 5fa85c72c..2f13cfb7d 100644
--- a/frontend/src/pages/Admin/MealPlanner/index.vue
+++ b/frontend/src/pages/Admin/MealPlanner/index.vue
@@ -82,7 +82,7 @@
 
 <script>
 import { api } from "@/api";
-import TimePickerDialog from "@/components/Admin/MealPlanner/TimePickerDialog";
+import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
 export default {
   components: {
diff --git a/frontend/src/components/Admin/Migration/MigrationCard.vue b/frontend/src/pages/Admin/Migration/MigrationCard.vue
similarity index 94%
rename from frontend/src/components/Admin/Migration/MigrationCard.vue
rename to frontend/src/pages/Admin/Migration/MigrationCard.vue
index 3f5848d0f..785451529 100644
--- a/frontend/src/components/Admin/Migration/MigrationCard.vue
+++ b/frontend/src/pages/Admin/Migration/MigrationCard.vue
@@ -5,7 +5,7 @@
       {{ title }}
       <v-spacer></v-spacer>
       <span>
-        <UploadBtn
+        <TheUploadBtn
           class="mt-1"
           :url="`/api/migrations/${folder}/upload`"
           fileName="archive"
@@ -66,10 +66,10 @@
 </template>
 
 <script>
-import UploadBtn from "../../UI/UploadBtn";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import utils from "@/utils";
 import { api } from "@/api";
-import MigrationDialog from "@/components/Admin/Migration/MigrationDialog.vue";
+import MigrationDialog from "./MigrationDialog";
 export default {
   props: {
     folder: String,
@@ -78,7 +78,7 @@ export default {
     available: Array,
   },
   components: {
-    UploadBtn,
+    TheUploadBtn,
     MigrationDialog,
   },
   data() {
diff --git a/frontend/src/components/Admin/Migration/MigrationDialog.vue b/frontend/src/pages/Admin/Migration/MigrationDialog.vue
similarity index 96%
rename from frontend/src/components/Admin/Migration/MigrationDialog.vue
rename to frontend/src/pages/Admin/Migration/MigrationDialog.vue
index a3ad890d1..485f2baf7 100644
--- a/frontend/src/components/Admin/Migration/MigrationDialog.vue
+++ b/frontend/src/pages/Admin/Migration/MigrationDialog.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import DataTable from "@/components/Admin/Backup/ImportSummaryDialog/DataTable";
+import DataTable from "@/components/ImportSummaryDialog";
 export default {
   components: {
     DataTable,
diff --git a/frontend/src/pages/Admin/Migration/index.vue b/frontend/src/pages/Admin/Migration/index.vue
index 477fb8f6c..76b84f823 100644
--- a/frontend/src/pages/Admin/Migration/index.vue
+++ b/frontend/src/pages/Admin/Migration/index.vue
@@ -1,13 +1,5 @@
 <template>
   <div>
-    <SuccessFailureAlert
-      :title="$t('migration.migration-report')"
-      ref="report"
-      :failedHeader="$t('migration.failed-imports')"
-      :failed="failed"
-      :successHeader="$t('migration.successful-imports')"
-      :success="success"
-    />
     <v-card :loading="loading">
       <v-card-title class="headline">
         {{ $t("migration.recipe-migration") }}
@@ -42,13 +34,11 @@
 
 
 <script>
-import MigrationCard from "@/components/Admin/Migration/MigrationCard";
-import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
+import MigrationCard from "./MigrationCard";
 import { api } from "@/api";
 export default {
   components: {
     MigrationCard,
-    SuccessFailureAlert,
   },
   data() {
     return {
diff --git a/frontend/src/pages/Admin/Profile/index.vue b/frontend/src/pages/Admin/Profile/index.vue
index 841af08b6..0348c53e9 100644
--- a/frontend/src/pages/Admin/Profile/index.vue
+++ b/frontend/src/pages/Admin/Profile/index.vue
@@ -68,7 +68,7 @@
         </v-card-text>
 
         <v-card-actions>
-          <UploadBtn
+          <TheUploadBtn
             icon="mdi-image-area"
             :text="$t('user.upload-photo')"
             :url="userProfileImage"
@@ -145,13 +145,13 @@
 
 <script>
 // import AvatarPicker from '@/components/AvatarPicker'
-import UploadBtn from "@/components/UI/UploadBtn";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 import { initials } from "@/mixins/initials";
 export default {
   components: {
-    UploadBtn,
+    TheUploadBtn,
   },
   mixins: [validators, initials],
   data() {
diff --git a/frontend/src/components/Admin/General/CreatePageDialog.vue b/frontend/src/pages/Admin/Settings/CreatePageDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/General/CreatePageDialog.vue
rename to frontend/src/pages/Admin/Settings/CreatePageDialog.vue
diff --git a/frontend/src/components/Admin/General/CustomPageCreator.vue b/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
similarity index 97%
rename from frontend/src/components/Admin/General/CustomPageCreator.vue
rename to frontend/src/pages/Admin/Settings/CustomPageCreator.vue
index f17b9a7f8..f5644d0d1 100644
--- a/frontend/src/components/Admin/General/CustomPageCreator.vue
+++ b/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
@@ -63,7 +63,7 @@
 
 <script>
 import draggable from "vuedraggable";
-import CreatePageDialog from "@/components/Admin/General/CreatePageDialog";
+import CreatePageDialog from "./CreatePageDialog";
 import { api } from "@/api";
 export default {
   components: {
diff --git a/frontend/src/components/Admin/General/HomePageSettings.vue b/frontend/src/pages/Admin/Settings/HomePageSettings.vue
similarity index 100%
rename from frontend/src/components/Admin/General/HomePageSettings.vue
rename to frontend/src/pages/Admin/Settings/HomePageSettings.vue
diff --git a/frontend/src/pages/Admin/Settings/index.vue b/frontend/src/pages/Admin/Settings/index.vue
index 73deaa87d..bd601452c 100644
--- a/frontend/src/pages/Admin/Settings/index.vue
+++ b/frontend/src/pages/Admin/Settings/index.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import HomePageSettings from "@/components/Admin/General/HomePageSettings";
-import CustomPageCreator from "@/components/Admin/General/CustomPageCreator";
+import HomePageSettings from "./HomePageSettings";
+import CustomPageCreator from "./CustomPageCreator";
 
 export default {
   components: {
diff --git a/frontend/src/components/Admin/Theme/NewThemeDialog.vue b/frontend/src/pages/Admin/Theme/NewThemeDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/Theme/NewThemeDialog.vue
rename to frontend/src/pages/Admin/Theme/NewThemeDialog.vue
diff --git a/frontend/src/components/Admin/Theme/ThemeCard.vue b/frontend/src/pages/Admin/Theme/ThemeCard.vue
similarity index 94%
rename from frontend/src/components/Admin/Theme/ThemeCard.vue
rename to frontend/src/pages/Admin/Theme/ThemeCard.vue
index 8316e80ae..9d81fd9b1 100644
--- a/frontend/src/components/Admin/Theme/ThemeCard.vue
+++ b/frontend/src/pages/Admin/Theme/ThemeCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Confirmation
+    <ConfirmationDialog
       :title="$t('settings.theme.delete-theme')"
       :message="$t('settings.theme.are-you-sure-you-want-to-delete-this-theme')"
       color="error"
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import Confirmation from "@/components/UI/Confirmation";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 
 const DELETE_EVENT = "delete";
@@ -52,7 +52,7 @@ const APPLY_EVENT = "apply";
 const EDIT_EVENT = "edit";
 export default {
   components: {
-    Confirmation,
+    ConfirmationDialog,
   },
   props: {
     theme: Object,
diff --git a/frontend/src/pages/Admin/Theme/index.vue b/frontend/src/pages/Admin/Theme/index.vue
index 409113770..bcdce92a8 100644
--- a/frontend/src/pages/Admin/Theme/index.vue
+++ b/frontend/src/pages/Admin/Theme/index.vue
@@ -135,9 +135,9 @@
 
 <script>
 import { api } from "@/api";
-import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
-import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
-import ThemeCard from "@/components/Admin/Theme/ThemeCard";
+import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
+import NewThemeDialog from "./NewThemeDialog";
+import ThemeCard from "./ThemeCard";
 
 export default {
   components: {