ui color/theme improvement

dev/dev-notes.md

@@ -17,13 +17,13 @@ Don't forget to [join the Discord](https://discord.gg/R6QDyJgbD2)!
 # Todo's
 
 Frontend
-- [ ] .Vue file reorganized into something that makes sense
+- [x] .Vue file reorganized into something that makes sense
 - [ ] Recipe Print Page 
 - [x] Catch 400 / bad response on create from URL
 - [ ] Recipe Editor Data Validation Client Side
 - [x] Favicon
 - [x] Rename Window
-- [ ] Add version indicator and notification for new version available
+- [x] Add version indicator and notification for new version available
 - [ ] Enhanced Search Functionality
 - [ ] Organize Home Page my Category, ideally user selectable.
 
@@ -42,13 +42,20 @@ Backend
 ## v0.0.2
 
 Bug Fixes
-- Added API Key Extras to Recipe Data
 - Fixed opacity issues with marked steps - [mtoohey31](https://github.com/mtoohey31)
 - Fixed hot-reloading development environment - [grssmnn](https://github.com/grssmnn)
-- Added Confirmation component to deleting recipes - [zackbcom](https://github.com/zackbcom)
+- Fixed recipe not saving without image
-- Added Persistent storage to vuex - [zackbcom](https://github.com/zackbcom)
+- Fixed parsing error on image property null
-- Updated Theme backend - [zackbcom](https://github.com/zackbcom)
 
 General Improvements
+- Added Confirmation component to deleting recipes - [zackbcom](https://github.com/zackbcom)
+- Updated Theme backend - [zackbcom](https://github.com/zackbcom)
+- Added Persistent storage to vuex - [zackbcom](https://github.com/zackbcom)
+- General Color/Theme Improvements
+  - More consistent UI
+  - More minimalist coloring
+- Added API Key Extras to Recipe Data
+  - Users can now add custom json key/value pairs to all recipes via the editor for access in 3rd part applications. For example users can add a "message" field in the extras that can be accessed on API calls to play a message over google home. 
 - Improved image rendering (nearly x2 speed)
 - Improved documentation + API Documentation
+- Improved recipe parsing

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -1,8 +1,7 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text"> Edit Meal Plan </v-card-title>
+    <v-card-title class="headline"> Edit Meal Plan </v-card-title>
-    <v-card-text> </v-card-text>
+    <v-divider></v-divider>
-
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -1,8 +1,7 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text">
+    <v-card-title class="headline"> Create a New Meal Plan </v-card-title>
-      Create a New Meal Plan
+    <v-divider></v-divider>
-    </v-card-title>
     <v-card-text>
       <v-row dense>
         <v-col cols="12" lg="6" md="6" sm="12">

frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue

@@ -56,7 +56,7 @@
 
           <v-spacer></v-spacer>
 
-          <v-btn color="success" text @click="save"> I accept </v-btn>
+          <v-btn color="success" text @click="save"> Save </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -75,7 +75,8 @@ export default {
       formKey: 1,
       rules: {
         required: (v) => !!v || "Key Name Required",
-        whiteSpace: (v) => !v || v.split(" ").length <= 1 || "No White Space Allowed",
+        whiteSpace: (v) =>
+          !v || v.split(" ").length <= 1 || "No White Space Allowed",
       },
     };
   },

frontend/src/components/Recipe/RecipeViewer.vue

@@ -50,7 +50,7 @@
             <h2 class="mt-4">Categories</h2>
             <v-chip
               class="ma-1"
-              color="primary"
+              color="accent"
               dark
               v-for="category in categories"
               :key="category"
@@ -63,7 +63,7 @@
             <h2 class="mt-4">Tags</h2>
             <v-chip
               class="ma-1"
-              color="primary"
+              color="accent"
               dark
               v-for="tag in tags"
               :key="tag"

frontend/src/components/Settings/Backup/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <v-card :loading="backupLoading" class="mt-3" min-height="410px">
+  <v-card :loading="backupLoading">
-    <v-card-title class="secondary white--text">
+    <v-card-title class="headline"> Backup and Exports </v-card-title>
-      Backup and Exports
+    <v-divider></v-divider>
-    </v-card-title>
 
     <v-card-text>
       <p>

frontend/src/components/Settings/Migration/index.vue

@@ -1,8 +1,7 @@
 <template>
   <v-card :loading="loading">
-    <v-card-title class="secondary white--text mt-1">
+    <v-card-title class="headline"> Recipe Migration </v-card-title>
-      Recipe Migration
+    <v-divider></v-divider>
-    </v-card-title>
     <v-card-text>
       <p>
         Currently Chowdown via public Repo URL is the only supported type of

frontend/src/components/Settings/Theme/NewThemeDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-btn text color="success" @click="dialog = true"> New </v-btn>
+    <v-btn text color="info" @click="dialog = true"> New </v-btn>
     <v-dialog v-model="dialog" width="400">
       <v-card>
         <v-card-title> Add a New Theme </v-card-title>

frontend/src/components/Settings/Theme/index.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text"> Theme Settings </v-card-title>
+    <v-card-title class="headline"> Theme Settings </v-card-title>
-
+    <v-divider></v-divider>
     <v-card-text>
       <h2 class="mt-4 mb-1">Dark Mode</h2>
       <p>
@@ -25,7 +25,7 @@
         </v-col>
       </v-row></v-card-text
     >
-    <v-divider class=""></v-divider>
+    <v-divider></v-divider>
     <v-card-text>
       <h2 class="mt-1 mb-1">Theme</h2>
       <p>
@@ -93,7 +93,10 @@
           />
         </v-col>
         <v-col>
-          <ColorPickerDialog button-text="Info" v-model="selectedTheme.colors.info" />
+          <ColorPickerDialog
+            button-text="Info"
+            v-model="selectedTheme.colors.info"
+          />
         </v-col>
         <v-col>
           <ColorPickerDialog

frontend/src/components/Settings/Webhook/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text mt-1">
+    <v-card-title class="headline">
       Meal Planner Webhooks
     </v-card-title>
     <v-card-text>

frontend/src/pages/MealPlanPage.vue

@@ -8,7 +8,8 @@
     <NewMeal v-else @created="requestMeals" />
 
     <v-card class="my-1">
-      <v-card-title class="secondary white--text"> Meal Plans </v-card-title>
+      <v-card-title class="headline"> Meal Plans </v-card-title>
+      <v-divider></v-divider>
 
       <v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
         <v-timeline-item

frontend/src/pages/SettingsPage.vue

@@ -7,9 +7,9 @@
       </a>
     </v-alert>
     <Theme />
-    <Backup />
+    <Backup class="mt-2" />
-    <Webhooks />
+    <Webhooks class="mt-2" />
-    <Migration />
+    <Migration class="mt-2" />
     <p class="text-center my-2">
       Version: {{ version }} | Latest: {{ latestVersion }} ·
       <a href="https://hay-kot.github.io/mealie/" target="_blank">