Updated timeline

frontend/src/index.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: "Material Symbols Outlined Local";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/material-symbols-outlined-timeline.ttf") format("truetype");
+}
+
+
 :root {
   --ink: #1f2a2a;
   --muted: #5d5f59;
@@ -1352,7 +1360,7 @@ textarea {
   top: 50%;
   height: 4px;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(39, 105, 179, 0.42), rgba(35, 138, 90, 0.88));
+  background: var(--timeline-color, var(--accent-green));
   transform: translateY(-50%);
 }
 
@@ -1409,11 +1417,11 @@ textarea {
   z-index: 2;
   display: grid;
   place-items: center;
-  width: 26px;
-  height: 26px;
-  border: 4px solid var(--accent-green);
-  border-radius: 50%;
-  background: #fffdf9;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 }
 
 .bird-timeline-graph-point.above .bird-timeline-graph-dot {
@@ -1433,13 +1441,7 @@ textarea {
   transform: translate(-50%, -50%);
 }
 
-.bird-timeline-graph-point.owner_changed .bird-timeline-graph-dot {
-  border-color: var(--accent-blue);
-}
 
-.bird-timeline-graph-point.transferred .bird-timeline-graph-dot {
-  border-color: var(--accent-red);
-}
 
 .bird-timeline-graph-point.hatch_date .bird-timeline-graph-dot {
   width: 34px;
@@ -1480,9 +1482,11 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 24px;
+  height: 24px;
   color: var(--accent-green);
-  font-family: "Material Symbols Outlined";
-  font-size: 18px;
+  font-family: "Material Symbols Outlined Local";
+  font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 1;
@@ -1490,13 +1494,16 @@ textarea {
   text-transform: none;
   white-space: nowrap;
   direction: ltr;
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+  word-wrap: normal;
+  font-variant-ligatures: normal;
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
 
 .bird-timeline-graph-point.hatch_date .bird-timeline-graph-icon {
+  width: 34px;
+  height: 34px;
   color: var(--accent-gold);
   font-size: 34px;
 }
@@ -1707,25 +1714,6 @@ textarea {
   stroke: none;
 }
 
-.bird-detail-tab .timeline-tab-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: currentColor;
-  font-family: "Material Symbols Outlined";
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0;
-  text-transform: none;
-  white-space: nowrap;
-  direction: ltr;
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-
 .bird-detail-tab:hover {
   border-color: rgba(35, 138, 90, 0.28);
   color: var(--ink);