Style improvements.

- Improved POI style (a bit bigger and with border)

- Improved styling of the close buttons.

- Added palette with accent/background colors.

frontend/src/assets/base.css

@@ -19,6 +19,47 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  --vt-c-blue-fg-light: #3498db;
+  --vt-c-blue-fg-dark: #2980b9;
+  --vt-c-blue-bg-light: #5bc0de;
+  --vt-c-blue-bg-dark: #31b0d5;
+  --vt-c-green-fg-light: #2ecc71;
+  --vt-c-green-fg-dark: #27ae60;
+  --vt-c-green-bg-light: #5cb85c;
+  --vt-c-green-bg-dark: #449d44;
+  --vt-c-red-fg-light: #e74c3c;
+  --vt-c-red-fg-dark: #c0392b;
+  --vt-c-red-bg-light: #d9534f;
+  --vt-c-red-bg-dark: #c9302c;
+  --vt-c-yellow-fg-light: #f1c40f;
+  --vt-c-yellow-fg-dark: #f39c12;
+  --vt-c-yellow-bg-light: #f0ad4e;
+  --vt-c-yellow-bg-dark: #ec971f;
+  --vt-c-purple-fg-light: #9b59b6;
+  --vt-c-purple-fg-dark: #8e44ad;
+  --vt-c-purple-bg-light: #9d71d9;
+  --vt-c-purple-bg-dark: #8e44ad;
+  --vt-c-cyan-fg-light: #1abc9c;
+  --vt-c-cyan-fg-dark: #16a085;
+  --vt-c-cyan-bg-light: #5bc0de;
+  --vt-c-cyan-bg-dark: #31b0d5;
+  --vt-c-orange-fg-light: #e67e22;
+  --vt-c-orange-fg-dark: #d35400;
+  --vt-c-orange-bg-light: #f0ad4e;
+  --vt-c-orange-bg-dark: #ec971f;
+  --vt-c-pink-fg-light: #e91e63;
+  --vt-c-pink-fg-dark: #d81b60;
+  --vt-c-pink-bg-light: #d9534f;
+  --vt-c-pink-bg-dark: #c9302c;
+  --vt-c-teal-fg-light: #1abc9c;
+  --vt-c-teal-fg-dark: #16a085;
+  --vt-c-teal-bg-light: #5bc0de;
+  --vt-c-teal-bg-dark: #31b0d5;
+  --vt-c-lime-fg-light: #2ecc71;
+  --vt-c-lime-fg-dark: #27ae60;
+  --vt-c-lime-bg-light: #5cb85c;
+  --vt-c-lime-bg-dark: #449d44;
 }
 
 /* semantic color variables for this project */
@@ -32,6 +73,7 @@
 
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
+  --color-accent: var(--vt-c-blue-fg-light);
 
   --section-gap: 160px;
 }
@@ -47,6 +89,7 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+    --color-accent: var(--vt-c-blue-fg-dark);
   }
 }
 

frontend/src/components/Map.vue

@@ -13,6 +13,7 @@
 import Feature from 'ol/Feature';
 import GPSPoint from '../models/GPSPoint';
 import Map from 'ol/Map';
+import LineString from 'ol/geom/LineString';
 import OSM from 'ol/source/OSM';
 import Overlay from 'ol/Overlay';
 import Point from 'ol/geom/Point';
@@ -21,9 +22,9 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
-import { Circle, Fill, Style } from 'ol/style';
+import { Circle, Fill, Style, Stroke } from 'ol/style';
 import { useGeographic } from 'ol/proj';
-import { type Nullable } from '../models/Types';
+import type { Nullable } from '../models/Types';
 
 // @ts-ignore
 const baseURL = __API_PATH__
@@ -40,6 +41,7 @@ export default {
       loading: false,
       map: null as Nullable<Map>,
       popup: null as Nullable<Overlay>,
+      routeFeatures: [] as Feature[],
       selectedPoint: null as Nullable<GPSPoint>,
     }
   },
@@ -60,32 +62,41 @@ export default {
       }
     },
 
+    osmLayer() {
+      return new TileLayer({
+        source: new OSM(),
+      })
+    },
+
+    pointsLayer(points: Point[]) {
+      const pointFeatures = points.map((point: Point) => new Feature(point))
+      return new VectorLayer({
+        source: new VectorSource({
+          features: pointFeatures,
+        }),
+        style: new Style({
+          image: new Circle({
+            radius: 6,
+            fill: new Fill({ color: 'red' }),
+            stroke: new Stroke({ color: 'black', width: 1 }),
+          }),
+          zIndex: Infinity,  // Ensure that points are always displayed above other layers
+        }),
+      })
+    },
+
     createMap(gpsPoints: GPSPoint[]) {
       const points = gpsPoints.map((gps: GPSPoint) => {
         const point = new Point([gps.longitude, gps.latitude])
         return point
-      })
+      });
 
-      const pointFeatures = points.map((point: Point) => new Feature(point))
       const view = new View(this.getCenterAndZoom())
       const map = new Map({
         target: 'map',
         layers: [
-          new TileLayer({
+          this.osmLayer(),
-            source: new OSM(),
+          this.pointsLayer(points),
-          }),
-
-          new VectorLayer({
-            source: new VectorSource({
-              features: pointFeatures,
-            }),
-            style: new Style({
-              image: new Circle({
-                radius: 5,
-                fill: new Fill({ color: 'red' }),
-              }),
-            }),
-          }),
         ],
         view: view
       })
@@ -130,6 +141,8 @@ export default {
             this.selectedPoint = point
             // @ts-expect-error
             this.$refs.popup.setPosition(event.coordinate)
+            // Center the map on the selected point
+            map.getView().setCenter(event.coordinate)
           }
         } else {
           this.selectedPoint = null

frontend/src/components/PointInfo.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="popup" :class="{ hidden: !point }" ref="popup">
     <div class="popup-content" v-if="point">
-      <button @click="$emit('close')">Close</button>
+      <div class="header">
+        <button @click="$emit('close')" title="Close">✕</button>
+      </div>
       <div class="point-info">
         <h2 class="address" v-if="point.address">{{ point.address }}</h2>
         <h2 class="latlng" v-else>{{ point.latitude }}, {{ point.longitude }}</h2>
@@ -90,6 +92,30 @@ export default {
   border-radius: 1em;
   box-shadow: 2px 2px 2px 2px var(--color-border);
 
+  .popup-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5em;
+  }
+
+  .header {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+
+    button {
+      background: none;
+      border: none;
+      color: var(--color-heading);
+      font-size: 1.2em;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--color-accent);
+      }
+    }
+  }
+
   &.hidden {
     padding: 0;
     border-radius: 0;