diff --git a/client/src/components/layout/AppShell.tsx b/client/src/components/layout/AppShell.tsx
index aba62ae..c73c46e 100644
--- a/client/src/components/layout/AppShell.tsx
+++ b/client/src/components/layout/AppShell.tsx
@@ -22,9 +22,23 @@ export function AppShell() {
{user?.isAdmin && Users}
-
{user?.displayName || user?.username}
-
diff --git a/client/src/components/map/CityMarker.tsx b/client/src/components/map/CityMarker.tsx
index ed46795..f31efca 100644
--- a/client/src/components/map/CityMarker.tsx
+++ b/client/src/components/map/CityMarker.tsx
@@ -3,10 +3,9 @@ import type { City } from '@citytracker/shared';
export function cityMarkerIcon(city: City): L.DivIcon {
const color = city.status === 'visited' ? '#2f9e44' : '#1971c2';
- const heart = city.liked ? '♥' : '';
return L.divIcon({
className: 'city-marker',
- html: `${heart}`,
+ html: ``,
iconSize: [22, 22],
iconAnchor: [11, 11],
popupAnchor: [0, -14],
diff --git a/client/src/pages/CityListPage.tsx b/client/src/pages/CityListPage.tsx
index 65720b9..2da0b12 100644
--- a/client/src/pages/CityListPage.tsx
+++ b/client/src/pages/CityListPage.tsx
@@ -3,6 +3,10 @@ import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { useCities } from '../hooks/useCities';
+function primaryCountryName(country: string): string {
+ return country.split('/')[0].trim();
+}
+
export function CityListPage() {
const navigate = useNavigate();
const { user } = useAuth();
@@ -62,7 +66,7 @@ export function CityListPage() {
{city.name}
{city.liked && ♥}
- {city.country} |
+ {primaryCountryName(city.country)} |
{city.status === 'visited' ? 'Visited' : 'Planned'}
diff --git a/client/src/pages/MapDashboardPage.tsx b/client/src/pages/MapDashboardPage.tsx
index ea5cda0..f73be5a 100644
--- a/client/src/pages/MapDashboardPage.tsx
+++ b/client/src/pages/MapDashboardPage.tsx
@@ -42,8 +42,14 @@ export function MapDashboardPage() {
) : (
)}
- navigate('/cities/new')}>
- + Add city
+ navigate('/cities/new')}
+ aria-label="Add city"
+ title="Add city"
+ >
+ +
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
index 6c6ed1e..2734cd2 100644
--- a/client/src/styles/global.css
+++ b/client/src/styles/global.css
@@ -107,6 +107,11 @@ a {
font-size: 0.85rem;
}
+.btn-icon {
+ padding: var(--spacing-2);
+ line-height: 0;
+}
+
/* App shell */
.app-shell {
@@ -154,10 +159,6 @@ a {
gap: var(--spacing-3);
}
-.app-user-name {
- color: var(--color-text-muted);
-}
-
.app-main {
flex: 1;
overflow: auto;
@@ -256,6 +257,12 @@ a {
background: var(--color-bg);
}
+@media (max-width: 640px) {
+ .map-filters {
+ display: none;
+ }
+}
+
.chip {
padding: var(--spacing-1) var(--spacing-3);
border-radius: 999px;
@@ -299,14 +306,6 @@ a {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
-.marker-heart {
- position: absolute;
- top: -8px;
- right: -6px;
- color: #e64980;
- font-size: 0.8rem;
-}
-
.map-popup {
display: flex;
flex-direction: column;
|