changed tile color from picker to accent dropdown

Author: Merkie

build.json

@@ -1,10 +1,10 @@
 {
     "home": {
         "tileData": [{
-                "name": "No",
-                "text": "No",
+                "name": "ignore",
+                "text": "ignore",
                 "accent": "peach",
-                "image": "https://img.icons8.com/officexs/64/000000/cancel-2.png",
+                "image": "./assets/motivate.gif",
                 "id": 0,
                 "messages": {
                     "de": {

vueapp/images/200.gif

@@ -44,10 +44,18 @@
 								<p class="text-left">
 									{{ $t('editMode.tile.accentColor') }}
 								</p>
+								<!--
 								<v-color-picker
 									v-model="color"
 									hide-inputs
 								/>
+								-->
+								<v-select
+									:items="tileColors"
+									v-model="currentTileBeingEdited.accent"
+									filled
+									label="Accent"
+								></v-select>
 							</v-col>
 
 						</v-row>
@@ -81,9 +89,14 @@
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
+	...mapGetters('tilePad', [
+		'currentTileBeingEdited',
+	]),
 	name: 'EditTileDialog',
 	data () {
 		return {
+			tileColors: ['blush', 'peach', 'pear', 'mint', 'violet', 'white'],
+			currentColor: 'peach',
 			valid:false,
 			color: '',
 			newTileObject: {},
@@ -130,10 +143,6 @@ export default {
 				}
 				return;
 			}else{
-				this.saveEditsToTileBeingEdited({
-					key: 'accent',
-					value: this.color
-				});
 				this.saveTileEdit();
 				this.toggleEditDialogVisibility();
 			}

vueapp/src/components/TilePad/EditTileDialog.vue

@@ -1,3 +1,4 @@
+<!-- Add a new tile button, appears in edit mode -->
 <template>
 	<v-btn
 		raised
@@ -75,13 +76,15 @@
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex';
 
+/* Tile creation */
 export default {
 	name: 'Tile',
 	props: {
 		tileData: {
 			type: Object,
 			default() {
 				return {
+					/* All attributes from json file for each tile object */
 					name: '',
 					text: '',
 					accent: '',
@@ -116,10 +119,11 @@ export default {
 			displayTapCount: 'settings/displayTapCount',
 			tileTapsCount: 'tilePad/tileTapsCount',
 		}),
+		
+		/* Make card color, if hex value return that. */
+		//Might delete this feature and replace with just listed accents for simplicity.
 		cardColor: function () {
 			switch (this.localeTileData.accent) {
-			case 'red':
-				return '#FF9AA2';
 			case 'blush':
 				return '#FFB7B2';
 			case 'peach':
@@ -130,8 +134,10 @@ export default {
 				return '#B5EAD7';
 			case 'violet':
 				return '#C7CEEA';
+			case 'white':
+				return '#FFFFFF';
 			default:
-				return this.localeTileData.accent;
+				return '#FFFFFF';
 			}
 		},
 		localeTileData() {