Fix/2620 data tab font size (#2621)

* fix: changed default font size to 16px in data tab at /maps page * fix: changed font size to 16px in data page
UNDP-Data · Jan 3, 2024 · 6c77e3c · 6c77e3c
1 parent b70014a
commit 6c77e3c
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 19 deletions.
diff --git a/.changeset/rotten-pigs-arrive.md b/.changeset/rotten-pigs-arrive.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: changed default font size to 16px in data tab at /maps page
diff --git a/sites/geohub/src/components/pages/data/datasets/PublishedDatasets.svelte b/sites/geohub/src/components/pages/data/datasets/PublishedDatasets.svelte
@@ -295,8 +295,8 @@
 			open={true}
 			placeholder="Type keywords to explore datasets..."
 			on:change={handleFilterInput}
-			iconSize={24}
-			fontSize={4}
+			iconSize={20}
+			fontSize={6}
 			timeout={SearchDebounceTime}
 			disabled={isLoading}
 			loading={isLoading}

diff --git a/sites/geohub/src/components/pages/map/data/DataCategoryCard.svelte b/sites/geohub/src/components/pages/map/data/DataCategoryCard.svelte
@@ -6,7 +6,6 @@
 	import type { Breadcrumb } from '@undp-data/svelte-undp-design';
 
 	export let category: Breadcrumb;
-	export let size: 'small' | 'medium' = 'medium';
 
 	const handleClick = () => {
 		dispatch('clicked');
@@ -21,7 +20,7 @@
 		on:click={handleClick}
 		on:keydown={handleEnterKey}
 	>
-		<figure class="category image center {size === 'medium' ? 'is-64x64' : 'is-48x48'}">
+		<figure class="category image center is-64x64">
 			{#if category.icon.startsWith('fa')}
 				<i class="{category.icon} fa-4x" />
 			{:else if category.icon.startsWith('fi')}
@@ -31,11 +30,7 @@
 			{/if}
 		</figure>
 		{#if category.name}
-			<p
-				class="category {`${
-					size === 'medium' ? 'title is-5' : 'subtitle is-6 '
-				}`} center pt-2 has-text-weight-bold"
-			>
+			<p class="category title is-6 center pt-2 has-text-weight-semibold">
 				{category.name}
 			</p>
 		{/if}

diff --git a/sites/geohub/src/components/pages/map/data/DataCategoryCardList.svelte b/sites/geohub/src/components/pages/map/data/DataCategoryCardList.svelte
@@ -6,7 +6,6 @@
 	const dispatch = createEventDispatcher();
 
 	export let categories: Breadcrumb[];
-	export let cardSize: 'medium' | 'small' = 'medium';
 	export let breadcrumbs: Breadcrumb[];
 
 	onMount(async () => {
@@ -36,12 +35,11 @@
 
 <div
 	class="container mt-2 category-container"
-	style="grid-template-columns: repeat(auto-fit, minmax({cardSize === 'medium' ? 80 : 70}px, 1fr))"
+	style="grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))"
 >
 	{#each categories as category}
 		<DataCategoryCard
 			bind:category
-			size={cardSize}
 			on:clicked={() => {
 				getSelectedCategory(category);
 			}}

diff --git a/sites/geohub/src/components/pages/map/data/DataView.svelte b/sites/geohub/src/components/pages/map/data/DataView.svelte
@@ -199,7 +199,7 @@
 	/>
 
 	<div class="my-2 ml-1 mr-2">
-		<nav class="breadcrumb has-text-weight-bold is-medium" aria-label="breadcrumbs">
+		<nav class="breadcrumb has-text-weight-bold" aria-label="breadcrumbs">
 			<ul>
 				{#each breadcrumbs as page, index}
 					<li class={index === breadcrumbs.length - 1 ? 'is-active' : ''}>
@@ -270,7 +270,6 @@
 	{:else if dataCategories}
 		<DataCategoryCardList
 			categories={dataCategories}
-			cardSize="medium"
 			on:selected={handleCategorySelected}
 			bind:breadcrumbs
 		/>

diff --git a/sites/geohub/src/components/pages/map/data/TextFilter.svelte b/sites/geohub/src/components/pages/map/data/TextFilter.svelte
@@ -121,8 +121,8 @@
 		/>
 	</div>
 
-	<PanelButton icon="fas fa-arrow-down-short-wide fa-xl" tooltip="Sort" {disabled} width="200px">
-		<p class="title is-5 m-0 p-0 pb-2">Sort settings</p>
+	<PanelButton icon="fas fa-arrow-down-short-wide fa-lg" tooltip="Sort" {disabled} width="200px">
+		<p class="is-size-6 has-text-weight-semibold m-0 p-0 pb-2">Sort settings</p>
 
 		<Radios
 			radios={DatasetSortingColumns}
@@ -132,8 +132,8 @@
 		/>
 	</PanelButton>
 
-	<PanelButton icon="fas fa-gear fa-xl" tooltip="Settings" position="left" {disabled} width="230px">
-		<p class="title is-5 m-0 p-0">Search settings</p>
+	<PanelButton icon="fas fa-gear fa-lg" tooltip="Settings" {disabled} width="230px">
+		<p class="is-size-6 has-text-weight-semibold m-0 p-0">Search settings</p>
 		<p class="subtitle is-6 pb-0 pt-2 my-1">Text search</p>
 
 		<Radios

diff --git a/sites/geohub/src/routes/(app)/data/+page.svelte b/sites/geohub/src/routes/(app)/data/+page.svelte
@@ -51,7 +51,7 @@
 </script>
 
 {#if data.session}
-	<div class="tabs is-fullwidth is-medium data-tabs">
+	<div class="tabs is-fullwidth data-tabs">
 		<ul>
 			{#each tabs as tab}
 				<li class={activeTab === tab.label ? 'is-active' : ''}>