From bcaa8c4464077127a4bc6dc100546458257cb372 Mon Sep 17 00:00:00 2001
From: Corey Blais <corey@blaishome.online>
Date: Tue, 30 Jun 2026 18:05:59 -0400
Subject: [PATCH] Fixing dev timeline icons

---
 README.md              |  1 +
 frontend/src/App.tsx   | 40 ++++++++++++++++++++++++++++++++++------
 frontend/src/index.css | 16 ++++++++++++++--
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 1fdd36e..6e4da42 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,7 @@ curl -H "Authorization: Bearer <admin-token>" https://your-host/api/metrics
    - `FRONTEND_URL`
    - `BACKEND_URL`
    - `VITE_API_BASE_URL`
+   - `MAPBOX_ACCESS_TOKEN`
    - `REDIS_URL`
    - `IMAGE_STORAGE_PROVIDER`
    - `S3_ENDPOINT`
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b8be13f..bd24e38 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1310,6 +1310,18 @@ const formatBirdTimelineGraphTitle = (event: BirdTimelineGraphEvent) =>
 
 const formatBirdTimelineGraphMeta = (event: BirdTimelineGraphEvent) => formatShortDate(getBirdTimelineGraphEventDate(event));
 
+const getBirdTimelineGraphIconX = (x: number, textAnchor: string) => {
+  if (textAnchor === 'start') {
+    return x;
+  }
+
+  if (textAnchor === 'end') {
+    return x - 24;
+  }
+
+  return x - 12;
+};
+
 const getBirdTimelineEventDate = (event: BirdTimelineEvent) => event.eventDate || event.createdAt.slice(0, 10);
 const getBirdTimelineGraphEventDate = (event: BirdTimelineGraphEvent) => event.eventDate || event.createdAt.slice(0, 10);
 
@@ -8142,13 +8154,29 @@ function App() {
 		                                          />
 		                                        )}
 		                                        {timelineEvent.eventType === 'location_updated' ? (
-		                                          <text x={x} y={labelY} textAnchor={textAnchor} className="bird-timeline-graph-event-icon">
-		                                            move
-		                                          </text>
+		                                          <foreignObject
+		                                            x={getBirdTimelineGraphIconX(x, textAnchor)}
+		                                            y={labelY - 18}
+		                                            width="24"
+		                                            height="24"
+		                                            className="bird-timeline-graph-event-icon"
+		                                          >
+		                                            <span className="material-symbols-outlined" aria-label="Move">
+		                                              move
+		                                            </span>
+		                                          </foreignObject>
 		                                        ) : timelineEvent.eventType === 'owner_changed' ? (
-		                                          <text x={x} y={labelY} textAnchor={textAnchor} className="bird-timeline-graph-event-icon">
-		                                            move_location
-		                                          </text>
+		                                          <foreignObject
+		                                            x={getBirdTimelineGraphIconX(x, textAnchor)}
+		                                            y={labelY - 18}
+		                                            width="24"
+		                                            height="24"
+		                                            className="bird-timeline-graph-event-icon"
+		                                          >
+		                                            <span className="material-symbols-outlined" aria-label="Move location">
+		                                              move_location
+		                                            </span>
+		                                          </foreignObject>
 		                                        ) : timelineEvent.eventType === 'hatch_date' ? (
 		                                          <text x={x} y={labelY} textAnchor={textAnchor} className="bird-timeline-graph-label">
 		                                            Hatch date
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5e3d228..000f3ef 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1397,16 +1397,28 @@ textarea {
 }
 
 .bird-timeline-graph-event-icon {
-  fill: #1f1f1f;
+  overflow: visible;
+}
+
+.bird-timeline-graph-event-icon .material-symbols-outlined {
+  align-items: center;
+  color: #1f1f1f;
+  direction: ltr;
+  display: inline-flex;
   font-family: "Material Symbols Outlined";
-  font-size: 18px;
+  font-size: 22px;
   font-style: normal;
   font-weight: 400;
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
+  height: 24px;
+  justify-content: center;
   letter-spacing: 0;
+  line-height: 1;
   text-transform: none;
+  white-space: nowrap;
+  width: 24px;
 }
 
 .bird-timeline-graph-hatch-dot {