From 1020d11382a85a8161ed035a8275264fc6c12ae3 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 20:13:31 -0700
Subject: [PATCH] fix: unify map edit tool toggle

---
 .../src/styles/pages/LocationMapManager.css   | 28 +++++++++++--------
 frontend/tests/location-map-manager.spec.ts   |  3 ++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 0f4db52..622e0af 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -164,6 +164,14 @@
   background: rgba(15, 23, 34, 0.68);
 }
 
+.location-map-tool-buttons {
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--color-border-light);
+  border-radius: 999px;
+  background: rgba(15, 23, 34, 0.68);
+}
+
 .location-map-mode-buttons button {
   min-height: 36px;
   border-color: transparent;
@@ -171,6 +179,14 @@
   background: transparent;
 }
 
+.location-map-tool-buttons button {
+  min-width: 96px;
+  min-height: 36px;
+  border-color: transparent;
+  border-radius: 999px;
+  background: transparent;
+}
+
 .location-map-mode-buttons button.active,
 .location-map-tool-buttons button.active,
 .location-map-editor-actions button.primary,
@@ -218,18 +234,6 @@
   pointer-events: none;
 }
 
-.location-map-tool-buttons button.is-pan.active {
-  border-color: rgba(245, 158, 11, 0.78);
-  background: rgba(245, 158, 11, 0.22);
-  color: #f8fafc;
-}
-
-.location-map-tool-buttons button.is-edit.active {
-  border-color: rgb(45, 212, 191);
-  background: rgba(20, 184, 166, 0.24);
-  color: #f8fafc;
-}
-
 .location-map-editor-actions button.danger {
   border-color: rgba(248, 113, 113, 0.5);
   background: rgba(248, 113, 113, 0.24);
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 9ba158f..c2362d4 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -301,9 +301,12 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await expect(page.getByText("Frozen Foods")).toBeVisible();
   await expect(page.getByRole("button", { name: "Move Map" })).toBeVisible();
   await expect(page.getByRole("button", { name: "Edit Areas" })).toBeVisible();
+  await expect(page.locator(".location-map-tool-buttons")).toHaveCSS("border-radius", "999px");
+  await expect(page.getByRole("button", { name: "Edit Areas" })).toHaveAttribute("aria-pressed", "true");
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
 
   await page.getByRole("button", { name: "Move Map" }).click();
+  await expect(page.getByRole("button", { name: "Move Map" })).toHaveAttribute("aria-pressed", "true");
   const bakeryPanObject = page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first();
   const panBox = await bakeryPanObject.boundingBox();
   expect(panBox).not.toBeNull();