Tweak styling of the map layout (#8929)

* style updates

* update attribution styling

app/src/interfaces/map/map.vue

@@ -456,7 +456,7 @@ export default defineComponent({
 
 	.v-info {
 		padding: 20px;
-		background-color: var(--background-subdued);
+		background-color: var(--background-input);
 		border-radius: var(--border-radius);
 		box-shadow: var(--card-shadow);
 	}

app/src/layouts/map/components/map.vue

@@ -84,7 +84,7 @@ export default defineComponent({
 			closeOnClick: false,
 			className: 'mapboxgl-point-popup',
 			maxWidth: 'unset',
-			offset: 10,
+			offset: 12,
 		});
 
 		const attributionControl = new AttributionControl({ compact: true });
@@ -335,8 +335,9 @@ export default defineComponent({
 	button {
 		width: 36px;
 		height: 36px;
-		background: var(--background-subdued) !important;
+		background: var(--background-input) !important;
 		border: none !important;
+		transition: background-color var(--fast) var(--transition);
 
 		span {
 			display: none !important;
@@ -372,6 +373,22 @@ export default defineComponent({
 	}
 }
 
+.mapboxgl-user-location-dot,
+.maplibregl-user-location-dot {
+	width: 12px;
+	height: 12px;
+
+	&::before {
+		width: 12px;
+		height: 12px;
+	}
+
+	&::after {
+		width: 16px;
+		height: 16px;
+	}
+}
+
 .maplibregl-ctrl-top-right {
 	max-width: 80%;
 }
@@ -407,8 +424,26 @@ export default defineComponent({
 .mapboxgl-ctrl-attrib.mapboxgl-compact {
 	min-width: 24px;
 	min-height: 24px;
-	color: var(--foreground-normal);
-	background: var(--background-subdued) !important;
+	color: var(--foreground-subdued);
+	background: var(--background-input) !important;
+	box-shadow: var(--card-shadow);
+
+	button {
+		opacity: 0.25;
+		transition: opacity var(--fast) var(--transition);
+	}
+
+	&:hover {
+		button {
+			opacity: 0.75;
+		}
+	}
+
+	.maplibregl-ctrl-attrib-inner,
+	.mapboxgl-ctrl-attrib-inner {
+		font-size: 12px;
+		line-height: 20px;
+	}
 }
 
 .mapboxgl-ctrl-geocoder {
@@ -474,28 +509,18 @@ export default defineComponent({
 }
 
 .mapboxgl-point-popup {
-	&.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
-		border-right-color: var(--background-normal);
-	}
-
-	&.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
-		border-bottom-color: var(--background-normal);
-	}
-
-	&.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
-		border-top-color: var(--background-normal);
-	}
-
-	&.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
-		border-left-color: var(--background-normal);
+	.maplibregl-popup-tip,
+	.mapboxgl-popup-tip {
+		display: none;
 	}
 
 	.mapboxgl-popup-content {
+		padding: 6px 10px 6px;
 		color: var(--foreground-normal-alt);
 		font-weight: 500;
 		font-size: 14px;
 		font-family: var(--family-sans-serif);
-		background-color: var(--background-normal);
+		background-color: var(--background-page);
 		border-radius: var(--border-radius);
 		box-shadow: var(--card-shadow);
 		pointer-events: none;

app/src/layouts/map/map.vue

@@ -311,6 +311,7 @@ export default defineComponent({
 	position: absolute;
 	top: 10px;
 	left: 50%;
+	box-shadow: var(--card-shadow);
 	transform: translate(-50%, 0%);
 }
 

app/src/layouts/map/style.ts

@@ -1,7 +1,7 @@
 import { AnyLayer, Expression } from 'maplibre-gl';
 
 const baseColor = '#00c897';
-const selectColor = '#FFA500';
+const selectColor = '#17826d';
 const fill: Expression = ['case', ['boolean', ['feature-state', 'selected'], false], selectColor, baseColor];
 const outline: Expression = [
 	'case',
@@ -50,7 +50,7 @@ export const layers: AnyLayer[] = [
 		filter: ['all', ['!has', 'point_count'], ['==', '$type', 'Point']],
 		layout: {},
 		paint: {
-			'circle-radius': 5,
+			'circle-radius': 4,
 			'circle-color': fill,
 			'circle-stroke-color': outline,
 			'circle-stroke-width': 3,