fix(weatherstatus): fix location marker icon with dark theme, only use icons from @mdi/svg

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

2 files changed, 26 insertions, 16 deletions

diff --git a/apps/weather_status/img/cross.svg b/apps/weather_status/img/cross.svg
deleted file mode 100644
index daaca07c30f..00000000000
--- a/apps/weather_status/img/cross.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
-	<path d="M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
-</svg>
\ No newline at end of file
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 95f55b844f5..2a9b197cb80 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -24,18 +24,25 @@
 				{{ forecastMessage }}
 			</NcActionText>
 			<NcActionLink v-if="gotWeather"
-				icon="icon-address"
 				target="_blank"
 				:aria-hidden="true"
 				:href="weatherLinkTarget"
 				:close-after-click="true">
+				<template #icon>
+					<NcIconSvgWrapper name="MapMarker"
+						:svg="mapMarkerSvg"
+						:size="20" />
+				</template>
 				{{ locationText }}
 			</NcActionLink>
 			<NcActionButton v-if="gotWeather"
 				:aria-hidden="true"
 				@click="onAddRemoveFavoriteClick">
 				<template #icon>
-					<component :is="addRemoveFavoriteIcon" :size="20" class="favorite-color" />
+					<NcIconSvgWrapper name="Star"
+						:svg="addRemoveFavoriteSvg"
+						:size="20"
+						class="favorite-color" />
 				</template>
 				{{ addRemoveFavoriteText }}
 			</NcActionButton>
@@ -45,8 +52,8 @@
 				:aria-hidden="true"
 				@click="onBrowserLocationClick">
 				<template #icon>
-					<NcIconSvgWrapper :name="t('weather_status', 'Detect location')"
-						:svg="crossSvg"
+					<NcIconSvgWrapper name="Crosshairs"
+						:svg="crosshairsSvg"
 						:size="20" />
 				</template>
 				{{ t('weather_status', 'Detect location') }}
@@ -66,7 +73,10 @@
 					:aria-hidden="true"
 					@click="onFavoriteClick($event, favorite)">
 					<template #icon>
-						<IconStar :size="20" :class="{'favorite-color': address === favorite}" />
+						<NcIconSvgWrapper name="Star"
+							:svg="starSvg"
+							:size="20"
+							class="favorite-color" />
 					</template>
 					{{ favorite }}
 				</NcActionButton>
@@ -80,8 +90,6 @@ import { showError } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { getLocale } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
-import IconStar from 'vue-material-design-icons/Star.vue'
-import IconStarOutline from 'vue-material-design-icons/StarOutline.vue'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption.js'
@@ -92,7 +100,10 @@ import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import * as network from './services/weatherStatusService.js'
-import crossSvg from '../img/cross.svg?raw'
+import crosshairsSvg from '@mdi/svg/svg/crosshairs.svg?raw'
+import mapMarkerSvg from '@mdi/svg/svg/map-marker.svg?raw'
+import starSvg from '@mdi/svg/svg/star.svg?raw'
+import starOutlineSvg from '@mdi/svg/svg/star-outline.svg?raw'
 
 const MODE_BROWSER_LOCATION = 1
 const MODE_MANUAL_LOCATION = 2
@@ -227,7 +238,6 @@ const weatherOptions = {
 export default {
 	name: 'App',
 	components: {
-		IconStar,
 		NcActions,
 		NcActionButton,
 		NcActionCaption,
@@ -240,7 +250,10 @@ export default {
 	},
 	data() {
 		return {
-			crossSvg,
+			crosshairsSvg,
+			mapMarkerSvg,
+			starSvg,
+			starOutlineSvg,
 			locale: getLocale(),
 			loading: true,
 			errorMessage: '',
@@ -314,10 +327,10 @@ export default {
 		gotWeather() {
 			return this.address && !this.errorMessage
 		},
-		addRemoveFavoriteIcon() {
+		addRemoveFavoriteSvg() {
 			return this.currentAddressIsFavorite
-				? IconStar
-				: IconStarOutline
+				? starSvg
+				: starOutlineSvg
 		},
 		addRemoveFavoriteText() {
 			return this.currentAddressIsFavorite