refactor (mapper): update styles, update TS types, update accessibili…

…ty (#2059) * fix(app): import google font app with preconnect * fix(skeleton): remove skeleton loader as we load comments & activities before UI load * fix(login): use utility-first styling * fix(comment): use keyed loop, remove skeleton, update border style * fix(activities): remove skeleton, use keyed loop * fix(main): add button title * fix(bottom-sheet): role add * fix(geolocation): title add to button * fix(legend): arialabel and alt text add * fix(page): minify css * fix(css): update font style * fix(page): remove commented code
hotosm · Jan 7, 2025 · ff4c80b · ff4c80b
1 parent e75a27c
commit ff4c80b
Show file tree

Hide file tree

Showing 21 changed files with 121 additions and 197 deletions.
diff --git a/src/mapper/src/app.html b/src/mapper/src/app.html
@@ -16,6 +16,12 @@
 		<link rel="icon" href="/favicon.ico" sizes="48x48" />
 		<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
 		<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+			rel="stylesheet"
+		/>
 
 		%sveltekit.head%
 	</head>

diff --git a/src/mapper/src/lib/components/bottom-sheet.svelte b/src/mapper/src/lib/components/bottom-sheet.svelte
@@ -113,6 +113,9 @@
 				ontouchend={dragStop}
 				onmouseup={dragStop}
 				onmouseout={dragStop}
+				role="button"
+				tabindex="0"
+				onblur={() => {}}
 			>
 				<span class="h-[6px] w-[3.25rem] block bg-[#d2d2d4] rounded-full pointer-events-none"></span>
 			</div>

diff --git a/src/mapper/src/lib/components/dialog-entities-actions.svelte b/src/mapper/src/lib/components/dialog-entities-actions.svelte
@@ -63,10 +63,8 @@
 </script>
 
 {#if isTaskActionModalOpen && selectedTab === 'map' && selectedEntity}
-	<div class="flex justify-center !w-[100vw] absolute bottom-[4rem] left-0 pointer-events-none z-50">
-		<div
-			class="bg-white w-full font-barlow-regular md:max-w-[580px] pointer-events-auto px-4 py-3 sm:py-4 rounded-t-3xl"
-		>
+	<div class="font-barlow flex justify-center !w-[100vw] absolute bottom-[4rem] left-0 pointer-events-none z-50">
+		<div class="bg-white w-full font-regular md:max-w-[580px] pointer-events-auto px-4 py-3 sm:py-4 rounded-t-3xl">
 			<div class="flex justify-end">
 				<hot-icon
 					name="close"
@@ -83,7 +81,7 @@
 			</div>
 			<div class="flex flex-col gap-4">
 				<div class="flex items-center justify-between">
-					<p class="text-[#333] text-xl font-barlow-semibold">Feature {selectedEntity?.osmid}</p>
+					<p class="text-[#333] text-xl font-semibold">Feature {selectedEntity?.osmid}</p>
 					<sl-button
 						onclick={async () => {
 							await entitiesStore.syncEntityStatus(projectData?.id);
@@ -102,7 +100,7 @@
 							name="arrow-repeat"
 							class={`!text-[1rem] cursor-pointer duration-200 ${entitiesStore.syncEntityStatusLoading && 'animate-spin'}`}
 						></hot-icon>
-						<span class="font-barlow-medium text-SM uppercase">SYNC STATUS</span>
+						<span class="font-barlow font-medium text-sm uppercase">SYNC STATUS</span>
 					</sl-button>
 				</div>
 				<div class="flex flex-col gap-1">
@@ -132,7 +130,7 @@
 							tabindex="0"
 						>
 							<hot-icon slot="prefix" name="direction" class="!text-[1rem] cursor-pointer duration-200"></hot-icon>
-							<span class="font-barlow-medium text-sm">NAVIGATE HERE</span>
+							<span class="font-barlow font-medium text-sm">NAVIGATE HERE</span>
 						</sl-button>
 						<sl-button
 							loading={entitiesStore.updateEntityStatusLoading}
@@ -152,7 +150,7 @@
 						>
 							<hot-icon slot="prefix" name="location" class="!text-[1rem] text-white cursor-pointer duration-200"
 							></hot-icon>
-							<span class="font-barlow-medium text-sm">MAP FEATURE IN ODK</span>
+							<span class="font-barlow font-medium text-sm">MAP FEATURE IN ODK</span>
 						</sl-button>
 					</div>
 				{/if}

diff --git a/src/mapper/src/lib/components/dialog-task-actions.svelte b/src/mapper/src/lib/components/dialog-task-actions.svelte
@@ -16,10 +16,8 @@
 </script>
 
 {#if taskStore.selectedTaskId && selectedTab === 'map' && isTaskActionModalOpen && (taskStore.selectedTaskState === 'UNLOCKED_TO_MAP' || taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING')}
-	<div class="flex justify-center !w-[100vw] absolute bottom-[4rem] left-0 pointer-events-none z-50">
-		<div
-			class="bg-white w-full font-barlow-regular md:max-w-[580px] pointer-events-auto px-4 py-3 sm:py-4 rounded-t-3xl"
-		>
+	<div class="flex justify-center !w-[100vw] absolute bottom-[4rem] left-0 pointer-events-none z-50 font-barlow">
+		<div class="bg-white w-full font-regular md:max-w-[580px] pointer-events-auto px-4 py-3 sm:py-4 rounded-t-3xl">
 			<div class="flex justify-end">
 				<hot-icon
 					name="close"
@@ -35,7 +33,7 @@
 				></hot-icon>
 			</div>
 			<div class="flex justify-between items-center">
-				<p class="text-[#333] text-xl font-barlow-semibold">Task #{taskStore.selectedTaskIndex}</p>
+				<p class="text-[#333] text-xl font-semibold">Task #{taskStore.selectedTaskIndex}</p>
 				<div
 					onclick={() => {
 						clickMapNewFeature();
@@ -74,7 +72,7 @@
 						role="button"
 						tabindex="0"
 					>
-						<span class="font-barlow-medium text-sm">CANCEL</span>
+						<span class="font-barlow font-medium text-sm">CANCEL</span>
 					</sl-button>
 					<sl-button
 						variant="default"
@@ -93,7 +91,7 @@
 					>
 						<hot-icon slot="prefix" name="location" class="!text-[1rem] text-white cursor-pointer duration-200"
 						></hot-icon>
-						<span class="font-barlow-medium text-sm">START MAPPING</span>
+						<span class="font-barlow font-medium text-sm">START MAPPING</span>
 					</sl-button>
 				</div>
 			{:else if taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING'}
@@ -120,7 +118,7 @@
 							name="close"
 							class="!text-[1rem] text-[#d73f37] cursor-pointer duration-200 hover:text-[#b91c1c]"
 						></hot-icon>
-						<span class="font-barlow-medium text-sm">CANCEL MAPPING</span>
+						<span class="font-barlow font-medium text-sm">CANCEL MAPPING</span>
 					</sl-button>
 					<sl-button
 						onclick={() => {
@@ -138,10 +136,10 @@
 						tabindex="0"
 					>
 						<hot-icon slot="prefix" name="check" class="!text-[1rem] text-white cursor-pointer duration-200"></hot-icon>
-						<span class="font-barlow-medium text-sm">COMPLETE MAPPING</span>
+						<span class="font-barlow font-medium text-sm">COMPLETE MAPPING</span>
 					</sl-button>
 					<sl-button variant="default" size="small" class="primary col-span-2 sm:col-span-1">
-						<span class="font-barlow-medium text-sm">GO TO ODK</span>
+						<span class="font-barlow font-medium text-sm">GO TO ODK</span>
 					</sl-button>
 				</div>
 			{/if}

diff --git a/src/mapper/src/lib/components/header.svelte b/src/mapper/src/lib/components/header.svelte
@@ -32,7 +32,7 @@
 	};
 </script>
 
-<div class="p-3 flex items-center justify-between">
+<div class="p-3 flex items-center justify-between font-barlow">
 	<div class="flex items-center gap-1">
 		<a href={window.location.origin}><img src={HotLogo} alt="hot-logo" class="h-[2.2rem] sm:h-[3rem]" /></a>
 		<img src={HotLogoText} alt="hot-logo" class="h-[2.2rem] sm:h-[3rem]" />
@@ -58,7 +58,7 @@
 					/>
 				{/if}
 				<p
-					class="font-barlow-medium text-sm sm:text-base text-ellipsis whitespace-nowrap overflow-hidden max-w-[6rem] sm:max-w-fit"
+					class="font-medium text-sm sm:text-base text-ellipsis whitespace-nowrap overflow-hidden max-w-[6rem] sm:max-w-fit"
 				>
 					{loginStore?.getAuthDetails?.username}
 				</p>
@@ -79,7 +79,7 @@
 				role="button"
 				tabindex="0"
 			>
-				<span class="font-barlow-medium text-base">SIGN IN</span>
+				<span class="font-barlow font-medium text-base">SIGN IN</span>
 			</sl-button>
 		{/if}
 
@@ -127,7 +127,7 @@
 				target="_blank"
 				rel="noopener noreferrer"
 				href={menu.path}
-				class="hover:text-red-600 cursor-pointer duration-200 decoration-none text-black">{menu.name}</a
+				class="hover:text-red-600 cursor-pointer duration-200 decoration-none text-black font-barlow">{menu.name}</a
 			>
 		{/each}
 		{#if loginStore?.getAuthDetails?.username}
@@ -144,7 +144,7 @@
 				role="button"
 				tabindex="0"
 			>
-				<span class="font-barlow-medium text-base">SIGN OUT</span>
+				<span class="font-barlow font-medium text-base">SIGN OUT</span>
 			</sl-button>
 		{/if}
 	</div>

diff --git a/src/mapper/src/lib/components/login.svelte b/src/mapper/src/lib/components/login.svelte
@@ -34,7 +34,7 @@
 
 <hot-dialog
 	bind:this={dialogRef}
-	class="dialog-overview z-50 font-barlow-regular"
+	class="dialog-overview z-50 font-barlow font-regular"
 	open={loginStore.isLoginModalOpen}
 	onsl-hide={() => {
 		loginStore.toggleLoginModal(false);
@@ -68,7 +68,7 @@
 						}
 					}}
 					tabindex="0"
-					class="option-card bg-[#F5F5F5] text-gray-700 p-3 rounded-md duration-300 hover:border-primaryRed hover:text-red-600 cursor-pointer text-sm flex items-start gap-3 group"
+					class="option-card bg-[#F5F5F5] text-gray-700 p-3 border-1 border-solid border-white hover:border-[#d73f3f] rounded-md duration-300 hover:text-red-600 cursor-pointer text-sm flex items-start gap-3 group"
 				>
 					<div class="w-10 max-w-10 min-w-10">
 						{#if option?.image}
@@ -86,13 +86,3 @@
 		</div>
 	</div>
 </hot-dialog>
-
-<style>
-	.option-card {
-		border: 1px solid white;
-	}
-
-	.option-card:hover {
-		border: solid 1px #d73f3f;
-	}
-</style>
diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte
@@ -240,6 +240,7 @@
 				>
 			</div>
 			<ControlButton
+				title="Geolocation"
 				on:click={() => {
 					entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation);
 					if (!entitiesStore.toggleGeolocation) {
@@ -278,9 +279,9 @@
 {/if}
 
 {#if entitiesStore.toggleGeolocation && entityToNavigate}
-	<div class="w-full flex justify-center absolute z-10 bottom-2 pointer-events-none">
+	<div class="font-barlow w-full flex justify-center absolute z-10 bottom-2 pointer-events-none">
 		<div class="bg-white rounded-md py-2 px-4 flex items-center gap-6 pointer-events-auto shadow-md z-10">
-			<p class="text-black text-base font-barlow-medium">Distance: {entityDistance}m</p>
+			<p class="text-black text-base font-medium">Distance: {entityDistance}m</p>
 			<sl-button
 				onclick={exitNavigationMode}
 				onkeydown={(e: KeyboardEvent) => {

diff --git a/src/mapper/src/lib/components/map/layer-switcher.svelte b/src/mapper/src/lib/components/map/layer-switcher.svelte
@@ -135,9 +135,7 @@ map = new Map({
 		}
 
 		// Deduplicate styles by `name`
-		allStyles = processedStyles.filter(
-			(style, index, self) => self.findIndex((s) => s.name === style.name) === index,
-		);
+		allStyles = processedStyles.filter((style, index, self) => self.findIndex((s) => s.name === style.name) === index);
 	}
 
 	function selectStyle(style: MapLibreStylePlusMetadata) {
@@ -179,7 +177,7 @@ map = new Map({
 	});
 </script>
 
-<div class="relative" use:clickOutside onclick_outside={() => (isOpen = false)}>
+<div class="relative font-barlow" use:clickOutside onclick_outside={() => (isOpen = false)}>
 	<div
 		onclick={() => (isOpen = !isOpen)}
 		role="button"
@@ -200,7 +198,7 @@ map = new Map({
 	<div
 		class={`absolute bottom-0 right-14 bg-white rounded-md p-4 duration-200 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
 	>
-		<p class="font-barlow-semibold text-lg mb-2">Base Maps</p>
+		<p class="font-semibold text-lg mb-2">Base Maps</p>
 		<div class="grid grid-cols-2 w-[212px] gap-3">
 			{#each allStyles as style, _}
 				<div

diff --git a/src/mapper/src/lib/components/map/legend.svelte b/src/mapper/src/lib/components/map/legend.svelte
@@ -18,8 +18,9 @@
 	];
 </script>
 
-<div use:clickOutside onclick_outside={() => (isOpen = false)} class="relative">
+<div use:clickOutside onclick_outside={() => (isOpen = false)} class="relative font-barlow">
 	<div
+		aria-label="toggle legend"
 		class="group text-nowrap cursor-pointer"
 		onclick={() => (isOpen = !isOpen)}
 		role="button"
@@ -39,20 +40,20 @@
 	<div
 		class={`absolute bottom-0 right-14 bg-white rounded-md p-4 duration-200 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'} overflow-hidden flex flex-col gap-2`}
 	>
-		<p class="font-barlow-semibold leading-0 text-lg mb-3">Legend</p>
+		<p class="font-semibold leading-0 text-lg mb-3">Legend</p>
 		{#each taskStatuses as taskStatus}
 			<div class="flex items-center gap-2">
 				{#if !taskStatus.color}
 					<div class="w-5 h-5 flex justify-center">
-						<img src={taskStatus.icon} class="w-4" />
+						<img src={taskStatus.icon} class="w-4" alt="Lock Icon" />
 					</div>
 				{:else}
 					<div
 						style="background-color: {taskStatus.color}; border: 1px solid #D0D0D0;"
 						class={`w-5 h-5 opacity-40`}
 					></div>
 				{/if}
-				<p class="font-barlow-regular text-[#494949] text-nowrap leading-0">{taskStatus?.status}</p>
+				<p class="font-regular text-[#494949] text-nowrap leading-0">{taskStatus?.status}</p>
 			</div>
 		{/each}
 	</div>

diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -331,7 +331,7 @@
 	<ScaleControl />
 	<Control class="flex flex-col gap-y-2" position="top-left">
 		<ControlGroup>
-			<ControlButton on:click={zoomToProject}
+			<ControlButton title="Zoom to project" on:click={zoomToProject}
 				><hot-icon name="crop-free" class={`!text-[1.2rem] cursor-pointer duration-200 text-black`}
 				></hot-icon></ControlButton
 			>
@@ -465,14 +465,14 @@
 	<!-- Help text for user on first load -->
 	{#if projectSetupStep === projectSetupStepEnum['task_selection']}
 		<div class="absolute top-7 bg-[#F097334D] min-w-[14rem] z-10 left-[50%] translate-x-[-50%] p-1">
-			<p class="uppercase font-barlow-medium text-base">click on a task to select a feature for mapping</p>
+			<p class="uppercase font-barlow font-medium text-base">click on a task to select a feature for mapping</p>
 		</div>
 	{/if}
 
 	<!-- Help for drawing a new geometry -->
 	{#if displayDrawHelpText}
 		<div class="absolute top-7 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
-			<p class="uppercase font-barlow-medium text-base">Click on the map to create a new point</p>
+			<p class="uppercase font-barlow font-medium text-base">Click on the map to create a new point</p>
 		</div>
 	{/if}
 </MapLibre>
diff --git a/src/mapper/src/lib/components/more/activities.svelte b/src/mapper/src/lib/components/more/activities.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import ActivitiesSkeleton from '$lib/components/more/skeleton/activities.svelte';
 	import type { TaskEventType } from '$lib/types';
 	import { getTaskStore } from '$store/tasks.svelte.ts';
 
@@ -15,11 +14,7 @@
 </script>
 
 <div class="overflow-y-scroll overflow-x-hidden flex flex-col gap-2 pb-2">
-	{#if false}
-		{#each Array.from({ length: 5 }) as _, index}
-			<ActivitiesSkeleton />
-		{/each}
-	{:else if taskEvents?.length === 0}
+	{#if taskEvents?.length === 0}
 		<div class="flex justify-center mt-10">
 			<p class="text-[#484848] text-base">
 				{taskStore?.selectedTaskIndex
@@ -28,7 +23,7 @@
 			</p>
 		</div>
 	{:else}
-		{#each taskEvents as event}
+		{#each taskEvents as event (event?.event_id)}
 			<div class="flex flex-col gap-2 py-3 bg-[#F6F5F5] rounded-md mr-1">
 				<div class="flex gap-4 px-3">
 					<hot-icon