From 605e578fa1c4f3f58fc2707f8089f170d8a38a49 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Fri, 29 Dec 2023 16:01:18 +0000
Subject: [PATCH 1/3] fix: adjust font size option. now normal is 1rem, small
 is 0.75rem and medium is 1.5rem.

---
 .changeset/real-ravens-juggle.md              |  5 +++
 .../src/lib/Accordion/Accordion.stories.ts    |  4 +-
 .../src/lib/Accordion/Accordion.svelte        |  7 +++-
 .../maplibre/OptionalPropertyEditor.svelte    |  1 -
 .../maplibre/circle/VectorCircle.svelte       | 26 +++---------
 .../fill-extrusion/VectorFillExtrusion.svelte | 21 ++--------
 .../maplibre/fill/VectorPolygon.svelte        | 10 ++---
 .../maplibre/heatmap/VectorHeatmap.svelte     | 26 +++---------
 .../maplibre/line/VectorLine.svelte           | 12 ++----
 .../maplibre/raster/RasterLegend.svelte       | 42 ++++---------------
 .../maplibre/symbol/IconImage.svelte          |  1 -
 .../maplibre/symbol/VectorSymbol.svelte       | 14 +++----
 .../pages/map/data/DataVectorCard.svelte      |  2 +-
 .../pages/map/layers/LayerTemplate.svelte     |  2 +-
 .../map/layers/vector/VectorLabelPanel.svelte | 32 ++++----------
 .../src/components/util/ColorMapPicker.svelte |  1 -
 .../src/components/util/DataPreview.svelte    |  1 -
 sites/geohub/src/routes/+layout.svelte        |  1 -
 .../src/routes/(app)/+layout.svelte           |  1 -
 19 files changed, 56 insertions(+), 153 deletions(-)
 create mode 100644 .changeset/real-ravens-juggle.md

diff --git a/.changeset/real-ravens-juggle.md b/.changeset/real-ravens-juggle.md
new file mode 100644
index 0000000000..dbdda45572
--- /dev/null
+++ b/.changeset/real-ravens-juggle.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-undp-design": patch
+---
+
+fix: adjust font size option. now normal is 1rem, small is 0.75rem and medium is 1.5rem.
diff --git a/packages/svelte-undp-design/src/lib/Accordion/Accordion.stories.ts b/packages/svelte-undp-design/src/lib/Accordion/Accordion.stories.ts
index 225b15d868..3afcedcec1 100644
--- a/packages/svelte-undp-design/src/lib/Accordion/Accordion.stories.ts
+++ b/packages/svelte-undp-design/src/lib/Accordion/Accordion.stories.ts
@@ -21,9 +21,9 @@ const meta = {
 		fontSize: {
 			type: 'string',
 			description: 'Font size of the accordion header title.',
-			defaultValue: 'medium',
+			defaultValue: 'normal',
 			control: { type: 'select' },
-			options: ['small', 'medium']
+			options: ['small', 'normal', 'medium']
 		},
 		headerIcon: {
 			type: 'string',
diff --git a/packages/svelte-undp-design/src/lib/Accordion/Accordion.svelte b/packages/svelte-undp-design/src/lib/Accordion/Accordion.svelte
index 71a47529eb..dbaed71d3a 100644
--- a/packages/svelte-undp-design/src/lib/Accordion/Accordion.svelte
+++ b/packages/svelte-undp-design/src/lib/Accordion/Accordion.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let headerTitle: string;
 	export let isExpanded = false;
-	export let fontSize: 'small' | 'medium' = 'medium';
+	export let fontSize: 'small' | 'normal' | 'medium' = 'normal';
 	export let headerIcon = '';
 </script>
 
@@ -16,7 +16,10 @@
 					isExpanded = !isExpanded;
 				}}
 			>
-				<p class="accordion-header" style="font-size:{fontSize === 'small' ? 1 : 1.5}rem">
+				<p
+					class="accordion-header"
+					style="font-size:{fontSize === 'small' ? 0.75 : fontSize === 'medium' ? 1.5 : 1}rem"
+				>
 					{#if headerIcon}
 						<i class={headerIcon} />
 					{/if}
diff --git a/sites/geohub/src/components/maplibre/OptionalPropertyEditor.svelte b/sites/geohub/src/components/maplibre/OptionalPropertyEditor.svelte
index fc170c4e8f..fba763128b 100644
--- a/sites/geohub/src/components/maplibre/OptionalPropertyEditor.svelte
+++ b/sites/geohub/src/components/maplibre/OptionalPropertyEditor.svelte
@@ -40,7 +40,6 @@
 	}
 
 	.tooltip {
-		font-size: 13px;
 		z-index: 10;
 		min-width: 350px;
 		max-width: 400px;
diff --git a/sites/geohub/src/components/maplibre/circle/VectorCircle.svelte b/sites/geohub/src/components/maplibre/circle/VectorCircle.svelte
index 4c5486c568..1eb7c8943d 100644
--- a/sites/geohub/src/components/maplibre/circle/VectorCircle.svelte
+++ b/sites/geohub/src/components/maplibre/circle/VectorCircle.svelte
@@ -64,11 +64,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion
-		headerTitle="Circle radius"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-radius']}
-	>
+	<Accordion headerTitle="Circle radius" bind:isExpanded={expanded['circle-radius']}>
 		<div class="pb-2" slot="content">
 			<CircleRadius {layerId} bind:readonly={$legendReadonly} />
 		</div>
@@ -77,11 +73,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Circle color"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-color']}
-	>
+	<Accordion headerTitle="Circle color" bind:isExpanded={expanded['circle-color']}>
 		<div class="pb-2" slot="content">
 			<CircleColor {layerId} {metadata} />
 		</div>
@@ -90,11 +82,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Circle stroke color"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-stroke-color']}
-	>
+	<Accordion headerTitle="Circle stroke color" bind:isExpanded={expanded['circle-stroke-color']}>
 		<div class="pb-2" slot="content">
 			<CircleStrokeColor {layerId} />
 		</div>
@@ -103,11 +91,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Circle stroke width"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-stroke-width']}
-	>
+	<Accordion headerTitle="Circle stroke width" bind:isExpanded={expanded['circle-stroke-width']}>
 		<div class="pb-2" slot="content">
 			<CircleStrokeWidth {layerId} />
 		</div>
@@ -117,7 +101,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>
diff --git a/sites/geohub/src/components/maplibre/fill-extrusion/VectorFillExtrusion.svelte b/sites/geohub/src/components/maplibre/fill-extrusion/VectorFillExtrusion.svelte
index ce89886170..f80e3075dd 100644
--- a/sites/geohub/src/components/maplibre/fill-extrusion/VectorFillExtrusion.svelte
+++ b/sites/geohub/src/components/maplibre/fill-extrusion/VectorFillExtrusion.svelte
@@ -62,11 +62,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion
-		headerTitle="3D polygon color"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-extrusion-color']}
-	>
+	<Accordion headerTitle="3D polygon color" bind:isExpanded={expanded['fill-extrusion-color']}>
 		<div class="pb-2" slot="content">
 			<FillExtrusionColor {layerId} {metadata} />
 		</div>
@@ -75,11 +71,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Height of 3D polygon"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-extrusion-height']}
-	>
+	<Accordion headerTitle="Height of 3D polygon" bind:isExpanded={expanded['fill-extrusion-height']}>
 		<div class="pb-2" slot="content">
 			<FillExtrusionHeight {layerId} {metadata} />>
 		</div>
@@ -88,11 +80,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Base height"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-extrusion-base']}
-	>
+	<Accordion headerTitle="Base height" bind:isExpanded={expanded['fill-extrusion-base']}>
 		<div class="pb-2" slot="content">
 			<FillExtrusionBase {layerId} />
 		</div>
@@ -106,7 +94,6 @@
 
 	<Accordion
 		headerTitle="Vertical gradient to the sides"
-		fontSize="medium"
 		bind:isExpanded={expanded['fill-extrusion-vertical-gradient']}
 	>
 		<div class="pb-2" slot="content">
@@ -120,7 +107,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>
diff --git a/sites/geohub/src/components/maplibre/fill/VectorPolygon.svelte b/sites/geohub/src/components/maplibre/fill/VectorPolygon.svelte
index 3ea4ffc821..f8cc21b0a8 100644
--- a/sites/geohub/src/components/maplibre/fill/VectorPolygon.svelte
+++ b/sites/geohub/src/components/maplibre/fill/VectorPolygon.svelte
@@ -60,7 +60,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion headerTitle="Fill color" fontSize="medium" bind:isExpanded={expanded['fill-color']}>
+	<Accordion headerTitle="Fill color" bind:isExpanded={expanded['fill-color']}>
 		<div class="pb-2" slot="content">
 			<FillColor {layerId} {metadata} />
 		</div>
@@ -69,11 +69,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Fill outline color"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-outline-color']}
-	>
+	<Accordion headerTitle="Fill outline color" bind:isExpanded={expanded['fill-outline-color']}>
 		<div class="pb-2" slot="content">
 			<FillOutlineColor {layerId} />
 		</div>
@@ -82,7 +78,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>
diff --git a/sites/geohub/src/components/maplibre/heatmap/VectorHeatmap.svelte b/sites/geohub/src/components/maplibre/heatmap/VectorHeatmap.svelte
index fe0bd5b1b4..4b1bbcf7c6 100644
--- a/sites/geohub/src/components/maplibre/heatmap/VectorHeatmap.svelte
+++ b/sites/geohub/src/components/maplibre/heatmap/VectorHeatmap.svelte
@@ -39,11 +39,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion
-		headerTitle="Heatmap color"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-color']}
-	>
+	<Accordion headerTitle="Heatmap color" bind:isExpanded={expanded['heatmap-color']}>
 		<div class="pb-2" slot="content">
 			<HeatmapColor {layerId} />
 		</div>
@@ -52,11 +48,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Heatmap Intensity"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-intensity']}
-	>
+	<Accordion headerTitle="Heatmap Intensity" bind:isExpanded={expanded['heatmap-intensity']}>
 		<div class="pb-2" slot="content">
 			<HeatmapIntensity {layerId} />
 		</div>
@@ -68,11 +60,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Heatmap Radius"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-radius']}
-	>
+	<Accordion headerTitle="Heatmap Radius" bind:isExpanded={expanded['heatmap-radius']}>
 		<div class="pb-2" slot="content">
 			<HeatmapRadius {layerId} />
 		</div>
@@ -84,11 +72,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Heatmap Weight"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-weight']}
-	>
+	<Accordion headerTitle="Heatmap Weight" bind:isExpanded={expanded['heatmap-weight']}>
 		<div class="pb-2" slot="content">
 			<HeatmapWeight {layerId} />
 		</div>
@@ -101,7 +85,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>
diff --git a/sites/geohub/src/components/maplibre/line/VectorLine.svelte b/sites/geohub/src/components/maplibre/line/VectorLine.svelte
index 857009a2e8..471649b690 100644
--- a/sites/geohub/src/components/maplibre/line/VectorLine.svelte
+++ b/sites/geohub/src/components/maplibre/line/VectorLine.svelte
@@ -63,7 +63,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion headerTitle="Line color" fontSize="medium" bind:isExpanded={expanded['line-color']}>
+	<Accordion headerTitle="Line color" bind:isExpanded={expanded['line-color']}>
 		<div class="pb-2" slot="content">
 			<LineColor {layerId} {metadata} />
 		</div>
@@ -72,7 +72,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Line width" fontSize="medium" bind:isExpanded={expanded['line-width']}>
+	<Accordion headerTitle="Line width" bind:isExpanded={expanded['line-width']}>
 		<div class="pb-2" slot="content">
 			<LineWidth {layerId} {metadata} />
 		</div>
@@ -81,11 +81,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Line pattern"
-		fontSize="medium"
-		bind:isExpanded={expanded['line-pattern']}
-	>
+	<Accordion headerTitle="Line pattern" bind:isExpanded={expanded['line-pattern']}>
 		<div class="pb-2" slot="content">
 			<LinePattern {layerId} />
 		</div>
@@ -94,7 +90,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>
diff --git a/sites/geohub/src/components/maplibre/raster/RasterLegend.svelte b/sites/geohub/src/components/maplibre/raster/RasterLegend.svelte
index 525cad0562..3151f0c448 100644
--- a/sites/geohub/src/components/maplibre/raster/RasterLegend.svelte
+++ b/sites/geohub/src/components/maplibre/raster/RasterLegend.svelte
@@ -163,7 +163,7 @@
 			<RasterSimpleLegend {layerId} {metadata} {tags} />
 		{:else}
 			{#if !isRgbTile}
-				<Accordion headerTitle="Colormap" fontSize="medium" bind:isExpanded={expanded['colormap']}>
+				<Accordion headerTitle="Colormap" bind:isExpanded={expanded['colormap']}>
 					<div class="pt-2 pb-4" slot="content">
 						{#if !manualClassificationEnabled}
 							<div class="field has-addons">
@@ -206,11 +206,7 @@
 			{/if}
 
 			{#if !layerHasUniqueValues && !isRgbTile}
-				<Accordion
-					headerTitle="Rescale min/max values"
-					fontSize="medium"
-					bind:isExpanded={expanded['rescale']}
-				>
+				<Accordion headerTitle="Rescale min/max values" bind:isExpanded={expanded['rescale']}>
 					<div class="pb-2" slot="content">
 						<RasterRescale bind:layerId bind:metadata bind:tags />
 					</div>
@@ -220,11 +216,7 @@
 				</Accordion>
 			{/if}
 
-			<Accordion
-				headerTitle="Resampling"
-				fontSize="medium"
-				bind:isExpanded={expanded['resampling']}
-			>
+			<Accordion headerTitle="Resampling" bind:isExpanded={expanded['resampling']}>
 				<div class="pb-2" slot="content">
 					<RasterResampling bind:layerId />
 				</div>
@@ -243,7 +235,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+			<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 				<div class="pb-2" slot="content">
 					<OpacitySlider bind:layerId />
 				</div>
@@ -252,11 +244,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion
-				headerTitle="Brightness max"
-				fontSize="medium"
-				bind:isExpanded={expanded['brightness-max']}
-			>
+			<Accordion headerTitle="Brightness max" bind:isExpanded={expanded['brightness-max']}>
 				<div class="pb-2" slot="content">
 					<RasterBrightnessMax bind:layerId />
 				</div>
@@ -267,11 +255,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion
-				headerTitle="Brightness min"
-				fontSize="medium"
-				bind:isExpanded={expanded['brightness-min']}
-			>
+			<Accordion headerTitle="Brightness min" bind:isExpanded={expanded['brightness-min']}>
 				<div class="pb-2" slot="content">
 					<RasterBrightnessMin bind:layerId />
 				</div>
@@ -282,7 +266,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion headerTitle="Contrast" fontSize="medium" bind:isExpanded={expanded['contrast']}>
+			<Accordion headerTitle="Contrast" bind:isExpanded={expanded['contrast']}>
 				<div class="pb-2" slot="content">
 					<RasterContrast bind:layerId />
 				</div>
@@ -291,11 +275,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion
-				headerTitle="Hue rotate"
-				fontSize="medium"
-				bind:isExpanded={expanded['hue-rotate']}
-			>
+			<Accordion headerTitle="Hue rotate" bind:isExpanded={expanded['hue-rotate']}>
 				<div class="pb-2" slot="content">
 					<RasterHueRotate bind:layerId />
 				</div>
@@ -304,11 +284,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion
-				headerTitle="Saturation"
-				fontSize="medium"
-				bind:isExpanded={expanded['saturation']}
-			>
+			<Accordion headerTitle="Saturation" bind:isExpanded={expanded['saturation']}>
 				<div class="pb-2" slot="content">
 					<RasterSaturation bind:layerId />
 				</div>
diff --git a/sites/geohub/src/components/maplibre/symbol/IconImage.svelte b/sites/geohub/src/components/maplibre/symbol/IconImage.svelte
index 8e9db50b1d..cef04ba753 100644
--- a/sites/geohub/src/components/maplibre/symbol/IconImage.svelte
+++ b/sites/geohub/src/components/maplibre/symbol/IconImage.svelte
@@ -139,7 +139,6 @@
 	}
 
 	.tooltip {
-		font-size: 13px;
 		z-index: 10;
 		width: 300px;
 		height: 250px;
diff --git a/sites/geohub/src/components/maplibre/symbol/VectorSymbol.svelte b/sites/geohub/src/components/maplibre/symbol/VectorSymbol.svelte
index d256df9f4e..686f03063b 100644
--- a/sites/geohub/src/components/maplibre/symbol/VectorSymbol.svelte
+++ b/sites/geohub/src/components/maplibre/symbol/VectorSymbol.svelte
@@ -62,7 +62,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion headerTitle="Icon" fontSize="medium" bind:isExpanded={expanded['icon']}>
+	<Accordion headerTitle="Icon" bind:isExpanded={expanded['icon']}>
 		<div class="pb-2 pl-2" slot="content">
 			<IconImage {layerId} bind:readonly={$legendReadonly} />
 		</div>
@@ -71,7 +71,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Icon color" fontSize="medium" bind:isExpanded={expanded['icon-color']}>
+	<Accordion headerTitle="Icon color" bind:isExpanded={expanded['icon-color']}>
 		<div class="pb-2" slot="content">
 			<IconColor {layerId} {metadata} />
 		</div>
@@ -80,7 +80,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Icon size" fontSize="medium" bind:isExpanded={expanded['icon-size']}>
+	<Accordion headerTitle="Icon size" bind:isExpanded={expanded['icon-size']}>
 		<div class="pb-2" slot="content">
 			<IconSize {layerId} {metadata} />
 		</div>
@@ -89,11 +89,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Overlap priority"
-		fontSize="medium"
-		bind:isExpanded={expanded['icon-overlap']}
-	>
+	<Accordion headerTitle="Overlap priority" bind:isExpanded={expanded['icon-overlap']}>
 		<div class="pb-2" slot="content">
 			<IconOverlap {layerId} />
 		</div>
@@ -114,7 +110,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>
diff --git a/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte b/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte
index 9d5f985d36..031afe6249 100644
--- a/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte
+++ b/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte
@@ -118,7 +118,7 @@
 <Accordion
 	headerTitle={vectorInfo.json.vector_layers.length > 1 ? layer.layer : feature.properties.name}
 	bind:isExpanded
-	fontSize={isShowInfo ? 'medium' : 'small'}
+	fontSize={isShowInfo ? 'normal' : 'small'}
 >
 	<div slot="button">
 		{#if !isExpanded}
diff --git a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
index 3cb93571ef..64c58d1021 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
@@ -180,7 +180,7 @@
 			{/if}
 
 			<span
-				class="layer-name is-size-5 has-text-grey-dark"
+				class="layer-name is-size-6 has-text-grey-dark"
 				use:tippyTooltip={{ content: layer.name }}
 			>
 				{clean(layer.name)}
diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorLabelPanel.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorLabelPanel.svelte
index a3bcd00e18..a83737cc1f 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/VectorLabelPanel.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/VectorLabelPanel.svelte
@@ -86,7 +86,7 @@
 
 {#if targetLayer}
 	<div class="label-container py-2">
-		<Accordion headerTitle="Property" fontSize="medium" bind:isExpanded={expanded['text-field']}>
+		<Accordion headerTitle="Property" bind:isExpanded={expanded['text-field']}>
 			<div class="pb-2" slot="content">
 				<TextField bind:onlyNumberFields on:change={fireLabelChanged} bind:layer={targetLayer} />
 			</div>
@@ -98,7 +98,7 @@
 		{#if textFieldValue && $map.getLayer(layer.id)}
 			{@const fieldType = getTextFieldDataType($map, layer, textFieldValue)}
 
-			<Accordion headerTitle="Font" fontSize="medium" bind:isExpanded={expanded['text-font']}>
+			<Accordion headerTitle="Font" bind:isExpanded={expanded['text-font']}>
 				<div class="pb-2" slot="content">
 					<TextFont bind:layerId={targetLayer.id} />
 				</div>
@@ -107,7 +107,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion headerTitle="Font size" fontSize="medium" bind:isExpanded={expanded['text-size']}>
+			<Accordion headerTitle="Font size" bind:isExpanded={expanded['text-size']}>
 				<div class="pb-2" slot="content">
 					<TextSize bind:layerId={targetLayer.id} />
 				</div>
@@ -119,7 +119,6 @@
 			{#if fieldType && ['number', 'float'].includes(fieldType)}
 				<Accordion
 					headerTitle="Decimal position"
-					fontSize="medium"
 					bind:isExpanded={expanded['text-decimal-position']}
 				>
 					<div class="pb-2" slot="content">
@@ -133,11 +132,7 @@
 				</Accordion>
 			{/if}
 
-			<Accordion
-				headerTitle="Text color"
-				fontSize="medium"
-				bind:isExpanded={expanded['text-color']}
-			>
+			<Accordion headerTitle="Text color" bind:isExpanded={expanded['text-color']}>
 				<div class="pb-2" slot="content">
 					<TextColor
 						bind:layerId={targetLayer.id}
@@ -153,11 +148,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion
-				headerTitle="Text halo color"
-				fontSize="medium"
-				bind:isExpanded={expanded['text-halo-color']}
-			>
+			<Accordion headerTitle="Text halo color" bind:isExpanded={expanded['text-halo-color']}>
 				<div class="pb-2" slot="content">
 					<TextHaloColor bind:layerId={targetLayer.id} />
 				</div>
@@ -166,11 +157,7 @@
 				</div>
 			</Accordion>
 
-			<Accordion
-				headerTitle="Text halo width"
-				fontSize="medium"
-				bind:isExpanded={expanded['text-halo-width']}
-			>
+			<Accordion headerTitle="Text halo width" bind:isExpanded={expanded['text-halo-width']}>
 				<div class="pb-2" slot="content">
 					<TextHaloWidth bind:layerId={targetLayer.id} />
 				</div>
@@ -184,7 +171,6 @@
 			{#if ['fill', 'line', 'fill-extrusion'].includes(style.type)}
 				<Accordion
 					headerTitle="Label position relative to geometry"
-					fontSize="medium"
 					bind:isExpanded={expanded['symbol-placement']}
 				>
 					<div class="pb-2" slot="content">
@@ -207,11 +193,7 @@
 				</Accordion>
 			{/if}
 
-			<Accordion
-				headerTitle="Maximum width text wrap"
-				fontSize="medium"
-				bind:isExpanded={expanded['text-max-width']}
-			>
+			<Accordion headerTitle="Maximum width text wrap" bind:isExpanded={expanded['text-max-width']}>
 				<div class="pb-2" slot="content">
 					<TextMaxWidth bind:layerId={targetLayer.id} />
 				</div>
diff --git a/sites/geohub/src/components/util/ColorMapPicker.svelte b/sites/geohub/src/components/util/ColorMapPicker.svelte
index bfd85d5c03..7a61c32c0f 100644
--- a/sites/geohub/src/components/util/ColorMapPicker.svelte
+++ b/sites/geohub/src/components/util/ColorMapPicker.svelte
@@ -158,7 +158,6 @@
 	}
 
 	.tooltip {
-		font-size: 13px;
 		z-index: 10;
 		width: 300px;
 	}
diff --git a/sites/geohub/src/components/util/DataPreview.svelte b/sites/geohub/src/components/util/DataPreview.svelte
index 8a04541265..e368249806 100644
--- a/sites/geohub/src/components/util/DataPreview.svelte
+++ b/sites/geohub/src/components/util/DataPreview.svelte
@@ -44,7 +44,6 @@
 	@import 'tippy.js/themes/light.css';
 
 	.tooltip {
-		// font-size: 13px;
 		z-index: 10;
 		width: 400px;
 	}
diff --git a/sites/geohub/src/routes/+layout.svelte b/sites/geohub/src/routes/+layout.svelte
index e97d92cfeb..f79b5c5129 100644
--- a/sites/geohub/src/routes/+layout.svelte
+++ b/sites/geohub/src/routes/+layout.svelte
@@ -42,7 +42,6 @@
 			/* mobile viewport bug fix */
 			min-height: -webkit-fill-available;
 			font-family: ProximaNova, sans-serif;
-			font-size: 13px;
 		}
 
 		html {
diff --git a/sites/static-image-api/src/routes/(app)/+layout.svelte b/sites/static-image-api/src/routes/(app)/+layout.svelte
index e27d325360..61abe61b60 100644
--- a/sites/static-image-api/src/routes/(app)/+layout.svelte
+++ b/sites/static-image-api/src/routes/(app)/+layout.svelte
@@ -82,7 +82,6 @@
 			/* mobile viewport bug fix */
 			min-height: -webkit-fill-available;
 			font-family: ProximaNova, sans-serif;
-			font-size: 13px;
 		}
 
 		html {

From 1de13d6e9649f4df2c87a5dd265defac926f9974 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Fri, 29 Dec 2023 16:16:51 +0000
Subject: [PATCH 2/3] fix: made chevron icon for layer tab accordion smaller

---
 .../pages/map/layers/LayerTemplate.svelte          | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
index 64c58d1021..dbc90da24d 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
@@ -35,7 +35,6 @@
 	const dispatch = createEventDispatcher();
 
 	export let layer: Layer;
-	export let hideToggleButton = false;
 	export let showEditButton = false;
 
 	if (!('isExpanded' in layer)) {
@@ -164,20 +163,17 @@
 <article class="is-flex is-flex-direction-column border">
 	<div class="header is-flex pl-2 py-4">
 		<div
-			class="layer-header is-flex is-align-items-center pr-2 {!hideToggleButton ? 'toggle' : ''}"
+			class="layer-header is-flex is-align-items-center pr-2 toggle"
 			role="button"
 			tabindex="0"
 			on:keydown={handleEnterKey}
 			on:click={() => {
-				if (hideToggleButton) return;
 				isExpanded = !isExpanded;
 			}}
 		>
-			{#if !hideToggleButton}
-				<div class="toggle-button icon has-text-primary mr-3">
-					<i class="fa-solid fa-chevron-{isExpanded ? 'up' : 'down'} fa-xl"></i>
-				</div>
-			{/if}
+			<div class="toggle-button has-text-primary mr-3">
+				<i class="fa-solid fa-chevron-{isExpanded ? 'up' : 'down'}"></i>
+			</div>
 
 			<span
 				class="layer-name is-size-6 has-text-grey-dark"
@@ -226,7 +222,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="has-text-dark pb-2" hidden={hideToggleButton === true ? false : !isExpanded}>
+	<div class="has-text-dark pb-2" hidden={!isExpanded}>
 		{#key isLayerChanged}
 			<slot name="content" />
 		{/key}

From 9175546e61c61741890c0fc2c86c302a5ec865df Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Fri, 29 Dec 2023 16:41:51 +0000
Subject: [PATCH 3/3] changeset

---
 .changeset/spicy-needles-boil.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/spicy-needles-boil.md

diff --git a/.changeset/spicy-needles-boil.md b/.changeset/spicy-needles-boil.md
new file mode 100644
index 0000000000..ec21401119
--- /dev/null
+++ b/.changeset/spicy-needles-boil.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: changed default font size from 13px to 16px