From e3b89ec75df48e4a66a87bf12aa0ff1ccdcaa3c1 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 30 Oct 2020 21:20:53 -0600
Subject: [PATCH] Completely rework the way icon theming is done so that they
 update with the theme changes

---
 src/components/Icon.vue              | 32 +++++++++++++++++++++-------
 src/components/cards/Artist.vue      |  4 ++--
 src/components/cards/Track.vue       | 16 +++++++-------
 src/components/modals/ThemeModal.vue |  3 ++-
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 325f892..b547074 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -16,10 +16,11 @@
 					ry="0"
 				/>
 				<path
+					class="primary"
+					:style="primary_styles"
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M17.4911 2.11667L21.4511 4.09667C21.9411 4.34667 22.1411 4.93667 21.8911 5.43667C21.6411 5.93667 21.0411 6.13667 20.5511 5.88667L18.0011 4.61667L17.9911 16.4367C17.9911 16.4467 17.9936 16.4567 17.9961 16.4667C17.9986 16.4767 18.0011 16.4867 18.0011 16.4967C18.0011 18.4267 16.4311 19.9967 14.5011 19.9967C12.5711 19.9967 11.0011 18.4267 11.0011 16.4967C11.0011 14.5667 12.5711 12.9967 14.5011 12.9967C15.0411 12.9967 15.5411 13.1267 16.0011 13.3467L16.0111 3.10667C15.9911 2.99667 16.0011 2.87667 16.0311 2.75667C16.1711 2.14667 16.9411 1.80667 17.4911 2.11667ZM12.8911 5.43664C12.6511 5.93664 12.0511 6.13664 11.5511 5.88664L9.0011 4.61664L8.9911 18.4366C8.9911 18.4466 8.9936 18.4566 8.9961 18.4666C8.9986 18.4766 9.0011 18.4866 9.0011 18.4966C9.0011 20.4266 7.4311 21.9966 5.5011 21.9966C3.5711 21.9966 2.0011 20.4266 2.0011 18.4966C2.0011 16.5666 3.5711 14.9966 5.5011 14.9966C6.0411 14.9966 6.5411 15.1266 7.0011 15.3466L7.0111 3.10664C6.9911 2.99664 7.0011 2.87664 7.0311 2.76664C7.1711 2.14664 7.9411 1.81664 8.4911 2.12664L12.4411 4.09664C12.9411 4.34664 13.1411 4.94664 12.8911 5.43664Z"
-					:fill="primary"
 				/>
 			</svg>
 		</span>
@@ -39,10 +40,11 @@
 					ry="0"
 				/>
 				<path
+					class="primary"
+					:style="primary_styles"
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM12.6192 6.20784L15.2201 7.68004C15.5101 7.84004 15.6101 8.21004 15.4401 8.50004C15.3301 8.69004 15.1301 8.80005 14.9201 8.80005C14.8201 8.80005 14.7201 8.77004 14.6301 8.72004L12.8699 7.72372V15.6585C12.8701 15.6723 12.8701 15.6861 12.87 15.7C12.87 16.91 11.88 17.9 10.67 17.9C9.45997 17.9 8.46997 16.91 8.46997 15.7C8.46997 14.49 9.45997 13.5 10.67 13.5C11.0299 13.5 11.3698 13.5862 11.6699 13.7387V6.69998C11.6699 6.60119 11.6941 6.50777 11.7369 6.42537C11.7411 6.41687 11.7455 6.40842 11.7501 6.40004C11.7561 6.39019 11.7623 6.38054 11.7687 6.37111C11.8639 6.22688 12.0195 6.12563 12.1988 6.1042C12.2802 6.09357 12.3641 6.09981 12.4457 6.12505C12.5086 6.14354 12.5671 6.17174 12.6192 6.20784Z"
-					:fill="primary"
 				/>
 			</svg>
 		</span>
@@ -59,10 +61,11 @@
 					ry="0"
 				/>
 				<path
+					class="primary"
+					:style="primary_styles"
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M12.2516 20.3664C12.173 20.3884 12.0894 20.4 12 20.4C11.9227 20.4 11.8455 20.3993 11.7686 20.3978C11.7126 20.3993 11.6564 20.4 11.6 20.4C11.2372 20.4 10.8834 20.3691 10.5425 20.3104C5.7105 19.7107 2 16.1737 2 11.9C2 7.2056 6.47715 3.40002 12 3.40002C15.7082 3.40002 18.945 5.11567 20.6717 7.66406C20.6905 7.69181 20.7029 7.72492 20.7093 7.76311C21.2826 8.51263 21.5525 9.44282 21.3862 10.386C21.1499 11.7265 20.0945 12.7409 18.7432 13.1075C18.6959 13.1025 18.6482 13.1 18.6001 13.1C18.3889 13.1 18.1853 13.1491 17.9942 13.2401L17.9745 13.2418L17.9718 13.251C17.175 13.6461 16.6001 14.7723 16.6001 16.1V16.1001C16.6001 16.1342 16.6001 16.1683 16.6009 16.2021L16.5988 16.3132L16.5992 16.3295L16.5986 16.3764L16.5999 16.3784L16.6 16.4C16.6 18.4325 14.7051 20.1109 12.2516 20.3664ZM12.0566 19.1638C11.9755 19.1925 11.8879 19.2078 11.7928 19.2078C7.0471 19.2078 3.19995 15.9378 3.19995 11.9039C3.19995 7.87006 7.0471 4.59998 11.7928 4.59998C14.882 4.59998 17.8404 5.876 19.3701 7.94922C20.0399 8.54236 20.3957 9.32338 20.2583 10.103C20.0591 11.2322 19.4734 11.9526 18.2539 12.0036C17.5102 11.955 16.5185 12.6539 15.9177 13.9423C15.752 14.2978 15.6278 14.6532 15.5447 14.9934C15.5431 15.0019 15.5412 15.0106 15.539 15.0195C15.439 15.4289 15.4192 15.7734 15.4218 15.8945L15.419 15.8969C15.4158 16.046 15.4228 16.1878 15.44 16.3202C15.3393 17.8505 13.8796 19.0768 12.0566 19.1638ZM13.5 7C13.5 7.82843 12.8284 8.5 12 8.5C11.1715 8.5 10.5 7.82843 10.5 7C10.5 6.17157 11.1715 5.5 12 5.5C12.8284 5.5 13.5 6.17157 13.5 7ZM8.99995 8.5C8.99995 9.32843 8.32838 10 7.49995 10C6.67152 10 5.99995 9.32843 5.99995 8.5C5.99995 7.67157 6.67152 7 7.49995 7C8.32838 7 8.99995 7.67157 8.99995 8.5ZM11.5 18C12.8807 18 14 17.1046 14 16C14 14.8954 12.8807 14 11.5 14C10.1192 14 8.99995 14.8954 8.99995 16C8.99995 17.1046 10.1192 18 11.5 18ZM11.5 16.8C12.2179 16.8 12.8 16.4418 12.8 16C12.8 15.5582 12.2179 15.2 11.5 15.2C10.782 15.2 10.2 15.5582 10.2 16C10.2 16.4418 10.782 16.8 11.5 16.8ZM16.5 10C17.3284 10 18 9.32843 18 8.5C18 7.67157 17.3284 7 16.5 7C15.6715 7 15 7.67157 15 8.5C15 9.32843 15.6715 10 16.5 10ZM5.69995 14C6.52838 14 7.19995 13.3284 7.19995 12.5C7.19995 11.6716 6.52838 11 5.69995 11C4.87152 11 4.19995 11.6716 4.19995 12.5C4.19995 13.3284 4.87152 14 5.69995 14Z"
-					:fill="primary"
 				/>
 			</svg>
 		</span>
@@ -82,9 +85,11 @@
 					ry="0"
 				/>
 				<path
+					class="primary"
+					:style="primary_styles"
 					fill-rule="evenodd"
 					clip-rule="evenodd"
-					d="M2 12C2 6.49 6.49 2 12 2C17.51 2 22 6.49 22 12C22 17.51 17.51 22 12 22C6.49 22 2 17.51 2 12ZM4 12C4 16.41 7.59 20 12 20C16.41 20 20 16.41 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM12 10C11.45 10 11 10.45 11 11V16C11 16.55 11.45 17 12 17C12.55 17 13 16.55 13 16V11C13 10.45 12.55 10 12 10Z" :fill="primary"
+					d="M2 12C2 6.49 6.49 2 12 2C17.51 2 22 6.49 22 12C22 17.51 17.51 22 12 22C6.49 22 2 17.51 2 12ZM4 12C4 16.41 7.59 20 12 20C16.41 20 20 16.41 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM12 10C11.45 10 11 10.45 11 11V16C11 16.55 11.45 17 12 17C12.55 17 13 16.55 13 16V11C13 10.45 12.55 10 12 10Z"
 				/>
 			</svg>
 		</span>
@@ -104,10 +109,11 @@
 					ry="0"
 				/>
 				<path
+					class="primary"
+					:style="primary_styles"
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M17 10C19.2091 10 21 8.20914 21 6C21 3.79086 19.2091 2 17 2C14.7909 2 13 3.79086 13 6C13 6.44376 13.0723 6.87064 13.2057 7.26952L9.90706 9.25245C9.17789 8.48121 8.14514 8 7 8C4.79086 8 3 9.79086 3 12C3 14.2091 4.79086 16 7 16C8.14608 16 9.17958 15.518 9.90885 14.7457L13.2074 16.7252C13.0729 17.1256 13 17.5543 13 18C13 20.2091 14.7909 22 17 22C19.2091 22 21 20.2091 21 18C21 15.7909 19.2091 14 17 14C15.8535 14 14.8197 14.4823 14.0904 15.2551L10.7922 13.2758C10.927 12.8751 11 12.4461 11 12C11 11.5527 10.9266 11.1226 10.7911 10.721L14.0861 8.74027C14.8156 9.51576 15.8513 10 17 10ZM19.8 18C19.8 19.5464 18.5464 20.8 17 20.8C15.4536 20.8 14.2 19.5464 14.2 18C14.2 16.4536 15.4536 15.2 17 15.2C18.5464 15.2 19.8 16.4536 19.8 18ZM19.8 6C19.8 7.5464 18.5464 8.8 17 8.8C15.4536 8.8 14.2 7.5464 14.2 6C14.2 4.4536 15.4536 3.2 17 3.2C18.5464 3.2 19.8 4.4536 19.8 6ZM9.8 12C9.8 13.5464 8.5464 14.8 7 14.8C5.4536 14.8 4.2 13.5464 4.2 12C4.2 10.4536 5.4536 9.2 7 9.2C8.5464 9.2 9.8 10.4536 9.8 12Z"
-					:fill="primary"
 				/>
 			</svg>
 		</span>
@@ -124,12 +130,12 @@ export default {
 		},
 		primary: {
 			type: String,
-			default: `#FFFFFF`,
+			default: `--icon-primary`,
 			required: false,
 		},
 		secondary: {
 			type: String,
-			default: `#FFFFFF`,
+			default: `--icon-secondary`,
 			required: false,
 		},
 		size: {
@@ -155,7 +161,7 @@ export default {
 	},
 	data() { return {
 		div_styles: {
-			"background-color": this.background,
+			"background-color": this.background ? `var(${this.background})` : null,
 			"border-radius": `${this.border}px`,
 			"width": `${this.size}px`,
 			"height": `${this.size}px`,
@@ -174,6 +180,16 @@ export default {
 				width: `${x}px`,
 				height: `${x}px`,
 			}
+		},
+		primary_styles() {
+			return {
+				"fill": `var(${this.primary})`,
+			};
+		},
+		secondary_styles() {
+			return {
+				"fill": `var(${this.secondary})`
+			}
 		}
 	}
 }
diff --git a/src/components/cards/Artist.vue b/src/components/cards/Artist.vue
index dc116b7..96dcf38 100644
--- a/src/components/cards/Artist.vue
+++ b/src/components/cards/Artist.vue
@@ -11,8 +11,8 @@
 				type="notes"
 				:size="230"
 				:border="115"
-				:primary="css_var('--missing-picture-foreground')"
-				:background="css_var('--missing-picture-background')"
+				:primary="'--missing-picture-foreground'"
+				:background="'--missing-picture-background'"
 			/>
 		</div>
 		<div class="artist-info">
diff --git a/src/components/cards/Track.vue b/src/components/cards/Track.vue
index 382814d..6fd5a6d 100644
--- a/src/components/cards/Track.vue
+++ b/src/components/cards/Track.vue
@@ -11,8 +11,8 @@
 				type="notes"
 				:size="200"
 				:border="100"
-				:primary="css_var('--missing-picture-foreground')"
-				:background="css_var('--missing-picture-background')"
+				:primary="'--missing-picture-foreground'"
+				:background="'--missing-picture-background'"
 			/>
 		</div>
 		<div class="track-info">
@@ -23,41 +23,41 @@
 		</div>
 		<div class="bottom-bar">
 			<button
-				class="popularity"
 				v-tooltip="popularity_tooltip"
+				class="popularity"
 				@click="show_pop_modal = true"
 			>
 				{{ item.popularity }}
 			</button>
 			<button
+				v-tooltip="share_tooltip"
 				class="share"
 				name="Share"
-				v-tooltip="share_tooltip"
 				@click="show_share_modal = true"
 			>
 				<icon
 					type="share"
 					:size="22"
 					:inner-size="22"
-					:primary="css_var('--card-bottom-row-icon-colour')"
+					:primary="'--card-bottom-row-icon-colour'"
 				/>
 			</button>
 			<button
+				v-tooltip="info_tooltip"
 				class="information"
 				name="Track Information"
-				v-tooltip="info_tooltip"
 				@click="show_track_info = true"
 			>
 				<icon
 					type="info"
 					:size="22"
 					:inner-size="22"
-					:primary="css_var('--card-bottom-row-icon-colour')"
+					:primary="'--card-bottom-row-icon-colour'"
 				/>
 			</button>
 			<div
-				class="duration"
 				v-tooltip="duration_tooltip"
+				class="duration"
 			>
 				{{ duration }}
 			</div>
diff --git a/src/components/modals/ThemeModal.vue b/src/components/modals/ThemeModal.vue
index 3a44f07..4530c05 100644
--- a/src/components/modals/ThemeModal.vue
+++ b/src/components/modals/ThemeModal.vue
@@ -86,7 +86,8 @@ export default {
 	},
 	watch: {
 		chosen_theme(val) {
-			document.getElementById(`theme`).href = ``
+			localStorage.setItem(`tl-theme`, val);
+			document.getElementById(`theme`).href = `/static/css/theme/${val}.css`;
 		}
 	},
 }