Style points of interest to match vehicle color

application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.html

@@ -65,6 +65,7 @@
     [timezoneOffset]="timezoneOffset"
     [pendingNewPois]="pendingNewPois"
     [pendingOldVisitIds]="pendingOldVisitIds"
+    [color]="color"
     (pointOfInterestClick)="pointOfInterestClick.emit($event)">
   </app-points-of-interest>
 </div>

application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.html

@@ -9,34 +9,68 @@
 </div>
 <ng-container *ngFor="let p of points">
   <ng-container [ngSwitch]="p[1]" *ngIf="imageAttributeLookup[p[1]] as attr">
-    <mat-icon
+    <svg
       *ngSwitchCase="2"
+      viewBox="0 0 42 42"
       class="poi select-poi"
       [style.left.px]="p[2] - attr.width / 2"
-      [style.top.px]="13 - attr.height + attr.yOffset"
+      [style.top.px]="15 - attr.height + attr.yOffset"
       [attr.width]="attr.width"
       [attr.height]="attr.height"
       (mousedown)="onMouseDown($event, p)"
       title="{{ attr.title + ' ' + p[3] + (isPendingOldPoi(p) ? ' (pending)' : '') }}"
       [ngClass]="{
         'poi-validation-error': changedVisits[p[0]],
         'pending-poi-old': isPendingOldPoi(p)
-      }"
-      svgIcon="pickup"></mat-icon>
-    <mat-icon
+      }">
+      <g transform="matrix(1,0,0,-1,-75,43)">
+        <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
+          <circle
+            cx="95"
+            cy="35"
+            r="19"
+            style="fill: white; stroke-width: 4.11px"
+            [style.stroke]="color" />
+        </g>
+        <g transform="matrix(0.431818,0,0,-0.330214,53.25,39.9873)">
+          <path
+            d="M77,66L99,42.943L121,66"
+            style="fill: white; stroke-width: 15.61px"
+            [style.stroke]="color" />
+        </g>
+      </g>
+    </svg>
+    <svg
       *ngSwitchCase="3"
+      viewBox="0 0 42 42"
       class="poi select-poi"
       [style.left.px]="p[2] - attr.width / 2"
-      [style.top.px]="13 - attr.height + attr.yOffset"
+      [style.top.px]="15 - attr.height + attr.yOffset"
       [attr.width]="attr.width"
       [attr.height]="attr.height"
       (mousedown)="onMouseDown($event, p)"
       title="{{ attr.title + ' ' + p[3] + (isPendingOldPoi(p) ? ' (pending)' : '') }}"
       [ngClass]="{
         'poi-validation-error': changedVisits[p[0]],
         'pending-poi-old': isPendingOldPoi(p)
-      }"
-      svgIcon="dropoff"></mat-icon>
+      }">
+      <g transform="matrix(1,0,0,1,-75,-1.00004)">
+        <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
+          <circle
+            cx="95"
+            cy="35"
+            r="19"
+            style="fill: white; stroke-width: 4.11px"
+            [style.stroke]="color" />
+        </g>
+        <g transform="matrix(0.431818,0,0,-0.330214,53.25,39.9873)">
+          <path
+            d="M77,66L99,42.943L121,66"
+            style="fill: white; stroke-width: 15.61px"
+            [style.stroke]="color" />
+        </g>
+      </g>
+    </svg>
     <svg
       *ngSwitchCase="1"
       class="poi"

application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.ts

@@ -67,6 +67,7 @@ export class PointsOfInterestComponent implements OnChanges {
   @Input() timezoneOffset: number;
   @Input() routeId: number;
   @Input() changedVisits: ChangedVisits;
+  @Input() color: string;
   @Output() pointOfInterestClick = new EventEmitter<PointOfInterestClick>();
 
   get imageAttributeLookup(): { [key: string]: PointsOfInterestImageAttribute } {

application/frontend/src/app/shared/components/timeline/timeline.component.html

@@ -17,7 +17,14 @@
     y2="50%" />
   <g *ngIf="availabilityRange">
     <title>Vehicle availability {{ getSegmentTitle(availability[0], availability[1]) }}</title>
-    <rect [attr.x]="availabilityRange[0]" y="0" [attr.width]="availabilityRange[1] - availabilityRange[0]" height="100%" fill="none" [attr.stroke]="color" stroke-width="2px"/>
+    <rect
+      [attr.x]="availabilityRange[0]"
+      y="0"
+      [attr.width]="availabilityRange[1] - availabilityRange[0]"
+      height="100%"
+      fill="none"
+      [attr.stroke]="color"
+      stroke-width="2px" />
   </g>
   <line
     [attr.x1]="segmentsBound[0]"

application/frontend/src/app/shared/models/points-of-interest-image.ts

@@ -34,16 +34,16 @@ export const pointsOfInterestImages = {
   },
   [PointOfInterestCategory.Pickup]: {
     href: `/assets/images/pickup.svg`,
-    width: 12.316,
-    height: 10.526,
+    width: 13,
+    height: 13,
     yOffset: 0,
     title: 'Pickup',
   },
   [PointOfInterestCategory.Delivery]: {
     href: '/assets/images/dropoff.svg',
-    width: 12.315,
-    height: 10.527,
-    yOffset: -1,
+    width: 13,
+    height: 13,
+    yOffset: 0,
     title: 'Delivery',
   },
   [PointOfInterestCategory.ServiceCall]: {