From 482ef1e04008199fcd30234f631d2d30d7b6b16d Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Mon, 23 Sep 2024 21:32:18 +0800
Subject: [PATCH] pkp/pkp-lib#10447 Adjust button size for ButtonIcon component

---
 src/components/ButtonIcon/ButtonIcon.stories.js | 7 +++++++
 src/components/ButtonIcon/ButtonIcon.vue        | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ButtonIcon/ButtonIcon.stories.js b/src/components/ButtonIcon/ButtonIcon.stories.js
index f7a073641..28f84eaad 100644
--- a/src/components/ButtonIcon/ButtonIcon.stories.js
+++ b/src/components/ButtonIcon/ButtonIcon.stories.js
@@ -25,10 +25,17 @@ export const EnlargedIcon = {
 			return {args};
 		},
 		template: `
+			enlarged icon:&nbsp;
 			<div class="inline-flex gap-1">
 				<ButtonIcon icon="ChevronUp" :enlarged="true"/>
 				<ButtonIcon icon="ChevronDown" :enlarged="true" />
 			</div>
+			<br>
+			vs default size:
+			<div class="inline-flex gap-1">
+				<ButtonIcon icon="ChevronUp"/>
+				<ButtonIcon icon="ChevronDown" />
+			</div>
 			`,
 	}),
 	args: {},
diff --git a/src/components/ButtonIcon/ButtonIcon.vue b/src/components/ButtonIcon/ButtonIcon.vue
index 011d21008..4564d43f8 100644
--- a/src/components/ButtonIcon/ButtonIcon.vue
+++ b/src/components/ButtonIcon/ButtonIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<button :class="styles" :aria-label="ariaLabel" :disabled="isDisabled">
 		<Icon
-			:class="enlarged ? 'h-12 w-12' : 'h-6 w-6'"
+			:class="enlarged ? 'h-9 w-9' : 'h-5 w-5'"
 			:icon="icon"
 			aria-hidden="true"
 		/>
@@ -42,7 +42,7 @@ const props = defineProps({
 
 const styles = computed(() => ({
 	// Base
-	'inline-flex relative items-center justify-center text-lg-semibold rounded w-12 h-12': true,
+	'inline-flex relative items-center justify-center text-lg-semibold rounded w-9 h-9': true,
 	// Default
 	'text-primary bg-secondary': !props.isActive,
 	// Hover