1 files changed, 17 insertions, 23 deletions
diff --git a/apps/dashboard/src/components/ApiDashboardWidget.vue b/apps/dashboard/src/components/ApiDashboardWidget.vue
index c956a2e1023..4aa8628fac8 100644
--- a/apps/dashboard/src/components/ApiDashboardWidget.vue
+++ b/apps/dashboard/src/components/ApiDashboardWidget.vue
@@ -10,16 +10,7 @@
 		:show-items-and-empty-content="!!halfEmptyContentMessage"
 		:half-empty-content-message="halfEmptyContentMessage">
 		<template #default="{ item }">
-			<NcDashboardWidgetItem :target-url="item.link"
-				:overlay-icon-url="item.overlayIconUrl ? item.overlayIconUrl : ''"
-				:main-text="item.title"
-				:sub-text="item.subtitle">
-				<template #avatar>
-					<template v-if="item.iconUrl">
-						<NcAvatar :size="44" :url="item.iconUrl" />
-					</template>
-				</template>
-			</NcDashboardWidgetItem>
+			<ApiDashboardWidgetItem :item="item" :icon-size="iconSize" :rounded-icons="widget.item_icons_round" />
 		</template>
 		<template #empty-content>
 			<NcEmptyContent v-if="items.length === 0"
@@ -38,24 +29,20 @@
 </template>
 
 <script>
-import {
-	NcAvatar,
-	NcDashboardWidget,
-	NcDashboardWidgetItem,
-	NcEmptyContent,
-	NcButton,
-} from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDashboardWidget from '@nextcloud/vue/components/NcDashboardWidget'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
+import ApiDashboardWidgetItem from './ApiDashboardWidgetItem.vue'
 
 export default {
 	name: 'ApiDashboardWidget',
 	components: {
-		NcAvatar,
+		ApiDashboardWidgetItem,
+		CheckIcon,
 		NcDashboardWidget,
-		NcDashboardWidgetItem,
 		NcEmptyContent,
 		NcButton,
-		CheckIcon,
 	},
 	props: {
 		widget: {
@@ -71,6 +58,11 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			iconSize: 44,
+		}
+	},
 	computed: {
 		/** @return {object[]} */
 		items() {
@@ -115,8 +107,10 @@ export default {
 			return this.moreButton?.link
 		},
 	},
+	mounted() {
+		const size = window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area')
+		const numeric = Number.parseFloat(size)
+		this.iconSize = Number.isNaN(numeric) ? 44 : numeric
+	},
 }
 </script>
-
-<style lang="scss" scoped>
-</style>