From 05519dc17e7fc5bca122f6431012433e8e2e42b0 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 04:21:21 -0500
Subject: [PATCH] refactor: add color picker styles and area color dot to
 enhance UI

---
 client/src/components/MiningAreasPanel.css | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/client/src/components/MiningAreasPanel.css b/client/src/components/MiningAreasPanel.css
index 9f9206d..d8e82e0 100644
--- a/client/src/components/MiningAreasPanel.css
+++ b/client/src/components/MiningAreasPanel.css
@@ -446,3 +446,62 @@
     text-align: left;
   }
 }
+
+/* Color picker row */
+.color-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.color-input {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 2px solid #1a1a1a;
+  background: none;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-input::-webkit-color-swatch {
+  border: none;
+}
+
+.color-swatch {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #1a1a1a;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s;
+}
+
+.color-swatch:hover {
+  transform: scale(1.2);
+}
+
+.color-swatch.active {
+  border-color: #ffff55;
+  box-shadow: 0 0 4px #ffff55;
+  transform: scale(1.15);
+}
+
+/* Color dot in area card */
+.area-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.area-color-dot {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #1a1a1a;
+  flex-shrink: 0;
+}