refac

src/lib/components/admin/Evaluations/FeedbackModal.svelte

@@ -42,12 +42,16 @@
 <Modal size="sm" bind:show>
 	{#if selectedFeedback}
 		<div>
-			<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-				<div class="text-lg font-normal self-center">
+			<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+				<div class="text-sm font-medium self-center">
 					{$i18n.t('Feedback Details')}
 				</div>
-				<button class="self-center" on:click={close} aria-label="Close">
-					<XMark className={'size-5'} />
+				<button
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+					on:click={close}
+					aria-label="Close"
+				>
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 

src/lib/components/admin/Evaluations/LeaderboardModal.svelte

@@ -61,14 +61,18 @@
 
 <Modal size="md" bind:show>
 	{#if model}
-		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
+		<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
 			<Tooltip content={`${model.name} (${model.id})`} placement="top-start">
-				<div class="text-lg font-normal self-center line-clamp-1">
+				<div class="text-sm font-medium self-center line-clamp-1">
 					{model.name}
 				</div>
 			</Tooltip>
-			<button class="self-center" on:click={close} aria-label="Close">
-				<XMark className={'size-5'} />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				on:click={close}
+				aria-label="Close"
+			>
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 		<div class="px-5 pb-4 dark:text-gray-200">