Fixing dev timeline icons
Deploy / deploy-dev (push) Successful in 2m15s
Deploy / deploy-prod (push) Has been skipped

This commit is contained in:
Corey Blais
2026-06-30 18:05:59 -04:00
parent 84d850a1ba
commit bcaa8c4464
3 changed files with 49 additions and 8 deletions
+34 -6
View File
@@ -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
+14 -2
View File
@@ -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 {