refactor: migrate app level badge to css modules

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/appstore/src/components/AppLevelBadge.vue

@@ -2,19 +2,9 @@
   - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-<template>
-	<span
-		v-if="isSupported || isFeatured"
-		class="app-level-badge"
-		:class="{ 'app-level-badge--supported': isSupported }"
-		:title="badgeTitle">
-		<NcIconSvgWrapper :path="badgeIcon" :size="20" inline />
-		{{ badgeText }}
-	</span>
-</template>
 
 <script setup lang="ts">
-import { mdiCheck, mdiStarShootingOutline } from '@mdi/js'
+import { mdiStar, mdiStarShootingOutline } from '@mdi/js'
 import { translate as t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -28,30 +18,42 @@ const props = defineProps<{
 
 const isSupported = computed(() => props.level === 300)
 const isFeatured = computed(() => props.level === 200)
-const badgeIcon = computed(() => isSupported.value ? mdiStarShootingOutline : mdiCheck)
+const badgeIcon = computed(() => isSupported.value
+	? mdiStarShootingOutline
+	: mdiStar)
 const badgeText = computed(() => isSupported.value ? t('appstore', 'Supported') : t('appstore', 'Featured'))
 const badgeTitle = computed(() => isSupported.value
 	? t('appstore', 'This app is supported via your current Nextcloud subscription.')
 	: t('appstore', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.'))
 </script>
 
-<style scoped lang="scss">
-.app-level-badge {
+<template>
+	<span
+		v-if="isSupported || isFeatured"
+		:class="[ $style.appLevelBadge, { [$style.appLevelBadge__supported]: isSupported } ]"
+		:title="badgeTitle">
+		<NcIconSvgWrapper :path="badgeIcon" :size="20" inline />
+		{{ badgeText }}
+	</span>
+</template>
+
+<style module>
+.appLevelBadge {
 	color: var(--color-text-maxcontrast);
 	background-color: transparent;
 	border: 1px solid var(--color-text-maxcontrast);
 	border-radius: var(--border-radius);
 
 	display: flex;
 	flex-direction: row;
-	gap: 6px;
+	gap: var(--default-grid-baseline);
 	padding: 3px 6px;
 	width: fit-content;
+}
 
-	&--supported {
-		background-color: var(--color-success);
-		border-color: var(--color-border-success);
-		color: var(--color-success-text);
-	}
+.appLevelBadge__supported {
+	background-color: var(--color-success);
+	border-color: var(--color-border-success);
+	color: var(--color-success-text);
 }
 </style>