From 99644c1730a47570f4c1325ebeddee9a3e9730a5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 18:08:15 -0800
Subject: [PATCH] use color dots instead of images for element dropdown

---
 .../artifact/ArtifactEditPane.svelte          | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/artifact/ArtifactEditPane.svelte b/src/lib/components/artifact/ArtifactEditPane.svelte
index 9ba7ea8e..8c9462a6 100644
--- a/src/lib/components/artifact/ArtifactEditPane.svelte
+++ b/src/lib/components/artifact/ArtifactEditPane.svelte
@@ -17,7 +17,6 @@
 	import ArtifactSkillRow from './ArtifactSkillRow.svelte'
 	import ArtifactModifierList from './ArtifactModifierList.svelte'
 	import ArtifactGradeDisplay from './ArtifactGradeDisplay.svelte'
-	import { getElementIcon } from '$lib/utils/images'
 
 	interface Props {
 		/** The artifact instance being edited */
@@ -55,14 +54,14 @@
 		return skillsQuery.data.filter((s) => s.skillGroup === group)
 	}
 
-	// Element options
+	// Element options with color dots
 	const elementOptions = [
-		{ value: 1, label: 'Wind', image: getElementIcon(1) },
-		{ value: 2, label: 'Fire', image: getElementIcon(2) },
-		{ value: 3, label: 'Water', image: getElementIcon(3) },
-		{ value: 4, label: 'Earth', image: getElementIcon(4) },
-		{ value: 5, label: 'Dark', image: getElementIcon(5) },
-		{ value: 6, label: 'Light', image: getElementIcon(6) }
+		{ value: 1, label: 'Wind', color: '#3ee489' },
+		{ value: 2, label: 'Fire', color: '#fa6d6d' },
+		{ value: 3, label: 'Water', color: '#6cc9ff' },
+		{ value: 4, label: 'Earth', color: '#fd9f5b' },
+		{ value: 5, label: 'Dark', color: '#de7bff' },
+		{ value: 6, label: 'Light', color: '#e8d633' }
 	]
 
 	// Level options (1-5 for standard, fixed at 1 for quirk)
@@ -192,9 +191,10 @@
 	<DetailsSection title="Base Properties">
 		<DetailRow label="Element" noHover>
 			{#if disabled}
+				{@const elementOption = elementOptions.find((o) => o.value === element)}
 				<span class="element-display">
-					<img src={getElementIcon(element)} alt="" class="element-icon" />
-					{elementOptions.find((o) => o.value === element)?.label ?? '—'}
+					<span class="element-dot" style="background-color: {elementOption?.color}"></span>
+					{elementOption?.label ?? '—'}
 				</span>
 			{:else}
 				<Select
@@ -287,9 +287,11 @@
 		gap: spacing.$unit-half;
 	}
 
-	.element-icon {
-		width: 20px;
-		height: 20px;
+	.element-dot {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		flex-shrink: 0;
 	}
 
 	.skills-list {