From 7b6fdc76196c2b0ae518ac1e3a5e6ecc358add49 Mon Sep 17 00:00:00 2001
From: Hayden <hay-kot@pm.me>
Date: Fri, 8 Jan 2021 19:57:28 -0900
Subject: [PATCH] ui color/theme improvement

---
 dev/dev-notes.md                              | 19 +++++++++++++------
 .../components/MealPlan/MealPlanEditor.vue    |  5 ++---
 .../src/components/MealPlan/MealPlanNew.vue   |  5 ++---
 .../Recipe/RecipeEditor/ExtrasEditor.vue      |  5 +++--
 .../src/components/Recipe/RecipeViewer.vue    |  4 ++--
 .../src/components/Settings/Backup/index.vue  |  7 +++----
 .../components/Settings/Migration/index.vue   |  5 ++---
 .../Settings/Theme/NewThemeDialog.vue         |  2 +-
 .../src/components/Settings/Theme/index.vue   | 11 +++++++----
 .../src/components/Settings/Webhook/index.vue |  2 +-
 frontend/src/pages/MealPlanPage.vue           |  3 ++-
 frontend/src/pages/SettingsPage.vue           |  6 +++---
 12 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/dev/dev-notes.md b/dev/dev-notes.md
index 4e85b43eb..a1b0d7108 100644
--- a/dev/dev-notes.md
+++ b/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)
-- Added Persistent storage to vuex - [zackbcom](https://github.com/zackbcom)
-- Updated Theme backend - [zackbcom](https://github.com/zackbcom)
+- Fixed recipe not saving without image
+- Fixed parsing error on image property null
 
 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
diff --git a/frontend/src/components/MealPlan/MealPlanEditor.vue b/frontend/src/components/MealPlan/MealPlanEditor.vue
index 61cb58f7e..e1164fce2 100644
--- a/frontend/src/components/MealPlan/MealPlanEditor.vue
+++ b/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-text> </v-card-text>
-
+    <v-card-title class="headline"> Edit Meal Plan </v-card-title>
+    <v-divider></v-divider>
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index 800412fc9..fe1990213 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -1,8 +1,7 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text">
-      Create a New Meal Plan
-    </v-card-title>
+    <v-card-title class="headline"> Create a New Meal Plan </v-card-title>
+    <v-divider></v-divider>
     <v-card-text>
       <v-row dense>
         <v-col cols="12" lg="6" md="6" sm="12">
diff --git a/frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue b/frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue
index 0c9e53327..51422c474 100644
--- a/frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue
+++ b/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",
       },
     };
   },
diff --git a/frontend/src/components/Recipe/RecipeViewer.vue b/frontend/src/components/Recipe/RecipeViewer.vue
index 5d525fa84..c995ccac9 100644
--- a/frontend/src/components/Recipe/RecipeViewer.vue
+++ b/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"
diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index 1117bfc33..b12789371 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@@ -1,8 +1,7 @@
 <template>
-  <v-card :loading="backupLoading" class="mt-3" min-height="410px">
-    <v-card-title class="secondary white--text">
-      Backup and Exports
-    </v-card-title>
+  <v-card :loading="backupLoading">
+    <v-card-title class="headline"> Backup and Exports </v-card-title>
+    <v-divider></v-divider>
 
     <v-card-text>
       <p>
diff --git a/frontend/src/components/Settings/Migration/index.vue b/frontend/src/components/Settings/Migration/index.vue
index 5f53a0879..4ba279771 100644
--- a/frontend/src/components/Settings/Migration/index.vue
+++ b/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">
-      Recipe Migration
-    </v-card-title>
+    <v-card-title class="headline"> Recipe Migration </v-card-title>
+    <v-divider></v-divider>
     <v-card-text>
       <p>
         Currently Chowdown via public Repo URL is the only supported type of
diff --git a/frontend/src/components/Settings/Theme/NewThemeDialog.vue b/frontend/src/components/Settings/Theme/NewThemeDialog.vue
index a7f8f8bff..c6b78080e 100644
--- a/frontend/src/components/Settings/Theme/NewThemeDialog.vue
+++ b/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>
diff --git a/frontend/src/components/Settings/Theme/index.vue b/frontend/src/components/Settings/Theme/index.vue
index 339ab9738..c5c63b7d8 100644
--- a/frontend/src/components/Settings/Theme/index.vue
+++ b/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
diff --git a/frontend/src/components/Settings/Webhook/index.vue b/frontend/src/components/Settings/Webhook/index.vue
index 28c94d0ed..672780997 100644
--- a/frontend/src/components/Settings/Webhook/index.vue
+++ b/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>
diff --git a/frontend/src/pages/MealPlanPage.vue b/frontend/src/pages/MealPlanPage.vue
index 9179fc039..a7b399636 100644
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/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
diff --git a/frontend/src/pages/SettingsPage.vue b/frontend/src/pages/SettingsPage.vue
index 0f33d8c06..20a1ac85b 100644
--- a/frontend/src/pages/SettingsPage.vue
+++ b/frontend/src/pages/SettingsPage.vue
@@ -7,9 +7,9 @@
       </a>
     </v-alert>
     <Theme />
-    <Backup />
-    <Webhooks />
-    <Migration />
+    <Backup class="mt-2" />
+    <Webhooks class="mt-2" />
+    <Migration class="mt-2" />
     <p class="text-center my-2">
       Version: {{ version }} | Latest: {{ latestVersion }} ·
       <a href="https://hay-kot.github.io/mealie/" target="_blank">