Updated timeline

2026-07-01 17:52:40 -04:00
parent 14bc1c30a0
commit 35bd87b8b5
4 changed files with 42 additions and 59 deletions
@@ -1290,24 +1290,19 @@ const getBirdTimelineGraphLabel = (event: BirdTimelineEvent) => {
  return event.locationLabel || 'Added to flock';
 };

-const getBirdTimelineGraphIcon = (item: BirdTimelineGraphItem) => {
-  if (item.eventType === 'hatch_date') {
-    return 'egg';
-  }
+const renderBirdTimelineGraphIcon = (item: BirdTimelineGraphItem) => {
+  const iconName =
+    item.eventType === 'hatch_date'
+      ? 'egg'
+      : item.eventType === 'owner_changed'
+        ? 'move_location'
+        : item.eventType === 'manual_note'
+          ? 'sticky_note_2'
+          : item.eventType === 'profile_created'
+            ? 'map'
+            : 'move';

-  if (item.eventType === 'owner_changed') {
-    return 'manage_accounts';
-  }
-
-  if (item.eventType === 'transferred') {
-    return 'move';
-  }
-
-  if (item.eventType === 'manual_note') {
-    return 'sticky_note_2';
-  }
-
-  return 'map';
+  return <span className="bird-timeline-graph-icon" aria-hidden="true">{iconName}</span>;
 };

 const compactTimelineLocationPartMap: Record<string, string> = {
@@ -7513,9 +7508,7 @@ function App() {
 		                    aria-label="Timeline"
 		                    title="Timeline"
 		                  >
-		                    <span className="material-symbols-outlined timeline-tab-icon" aria-hidden="true">
-		                      timeline
-		                    </span>
+		                    <svg className="timeline-tab-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 6a2 2 0 0 0-1.93 2.51l-3.55 3.56A2.15 2.15 0 0 0 15 12c-.18 0-.36.02-.52.07l-2.55-2.55c.05-.16.07-.34.07-.52a2 2 0 1 0-4 0c0 .18.02.36.07.52l-4.56 4.55A2.03 2.03 0 0 0 3 14a2 2 0 1 0 1.93 1.49l4.55-4.56c.16.05.34.07.52.07s.36-.02.52-.07l2.55 2.55c-.05.16-.07.34-.07.52a2 2 0 1 0 4 0c0-.18-.02-.36-.07-.52l3.56-3.55A2 2 0 1 0 21 6Z" /></svg>
 		                  </button>
 		                  <button
 		                    className={`bird-detail-tab ${selectedBirdTab === 'audit' ? 'active' : ''}`}
@@ -8202,7 +8195,12 @@ function App() {

 		                          return timelineGraphItems.length ? (
 		                            <div className="bird-timeline-graph-card">
-		                              <div className="bird-timeline-graph" role="img" aria-label={`${selectedBird.name} location and owner timeline`}>
+		                              <div
+							                              className="bird-timeline-graph"
+							                              role="img"
+							                              aria-label={`${selectedBird.name} location and owner timeline`}
+							                              style={{ '--timeline-color': selectedBird.chartColor } as CSSProperties}
+							                            >
 		                                <div className="bird-timeline-graph-line" />
 		                                <div className="bird-timeline-graph-scale" aria-hidden="true">
 		                                  {timelineGraphTicks.map((tick) => {
@@ -8239,9 +8237,7 @@ function App() {
 		                                  >
 		                                    <div className="bird-timeline-graph-connector" />
 		                                    <div className="bird-timeline-graph-dot">
-		                                      <span className="material-symbols-outlined bird-timeline-graph-icon">
-		                                        {getBirdTimelineGraphIcon(timelineItem)}
-		                                      </span>
+		                                      {renderBirdTimelineGraphIcon(timelineItem)}
 		                                    </div>
 		                                    <div className="bird-timeline-graph-copy">
 		                                      <strong>{timelineItem.label}</strong>