pkp/pkp-lib#10743 Adjust styling of badge with attentive text and mak…

…e popover for review method icons smaller

src/components/Badge/Badge.vue

@@ -95,7 +95,7 @@ export default {
 					'border-primary text-primary bg-secondary':
 						colorVariant === 'primary',
 					// attention-border
-					'border-attention text-attention bg-secondary':
+					'border-dark text-attention bg-secondary':
 						colorVariant === 'attention',
 					// primary-bg
 					'bg-primary text-on-dark border-primary':

src/components/Popover/Popover.vue

@@ -22,7 +22,8 @@
 				></div>
 
 				<div
-					class="text-sm w-screen max-w-sm flex-auto overflow-hidden rounded bg-secondary shadow"
+					:class="sizeClasses"
+					class="text-sm flex-auto overflow-hidden rounded bg-secondary shadow"
 				>
 					<div class="p-4"><slot></slot></div>
 				</div>
@@ -31,11 +32,26 @@
 	</Popover>
 </template>
 
-<script>
+<script setup>
+import {computed} from 'vue';
 import {PopoverButton, Popover, PopoverPanel} from '@headlessui/vue';
-export default {
-	components: {Popover, PopoverButton, PopoverPanel},
-};
+
+const props = defineProps({
+	sizeVariant: {
+		required: false,
+		type: String,
+		default: () => 'default',
+		validator: (prop) => ['default', 'content'].includes(prop),
+	},
+});
+
+const sizeClasses = computed(() => {
+	if (props.sizeVariant === 'content') {
+		return 'max-w-sm';
+	}
+
+	return 'w-screen max-w-sm';
+});
 </script>
 <style>
 .tooltip-arrow {

src/components/ReviewMethodIcons/ReviewMethodIcons.vue

@@ -1,6 +1,6 @@
 <template>
 	<span>
-		<PkpPopover>
+		<PkpPopover size-variant="content">
 			<template #button>
 				<span class="flex gap-x-1">
 					<Icon