fix dashboard widged icons

Signed-off-by: dartcafe <github@dartcafe.de>

5 files changed, 23 insertions, 30 deletions

diff --git a/img/polls.svg b/img/polls.svg
index f94d056b..1aed7c39 100644
--- a/img/polls.svg
+++ b/img/polls.svg
@@ -1,7 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">
-	<g fill="#fff">
-		<rect y="2" x="3" height="26" width="7" />
-		<rect y="12" x="12" height="16" width="7" />
-		<rect y="8" x="21" height="20" width="7" />
-	</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">

+	<rect y="2" x="3" height="26" width="7" />

+	<rect y="12" x="12" height="16" width="7" />

+	<rect y="8" x="21" height="20" width="7" />

+</svg>

diff --git a/src/js/assets/scss/dashboard.scss b/src/js/assets/scss/dashboard.scss
deleted file mode 100644
index 4eedc925..00000000
--- a/src/js/assets/scss/dashboard.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.icon-polls {

-    background-image: url(../../../../img/polls-black.svg);

-}

-

-body.dark .icon-polls {

-    background-image: url(../../../../img/polls.svg);

-}
\ No newline at end of file
diff --git a/src/js/assets/scss/polls-icon.scss b/src/js/assets/scss/polls-icon.scss
index 50408068..f506cdfe 100644
--- a/src/js/assets/scss/polls-icon.scss
+++ b/src/js/assets/scss/polls-icon.scss
@@ -1,14 +1,4 @@
-:root {
-	--icon-polls: url('../icons/polls.svg');
-	--icon-polls--fff: url('../icons/polls-fff.svg');
-}
-
 .icon-polls {
-	background-image: var(--icon-polls);
-	background-size: 16px 16px;
-}
-@media (prefers-color-scheme: dark) {
-	.icon-polls {
-		background-image: var(--icon-polls--fff);
-	}
-}
+	background-image: url(../../../../img/polls.svg);
+	filter: var(--background-invert-if-dark);
+}
\ No newline at end of file
diff --git a/src/js/init-dashboard.js b/src/js/init-dashboard.js
index 4040d68c..4401e100 100644
--- a/src/js/init-dashboard.js
+++ b/src/js/init-dashboard.js
@@ -28,7 +28,7 @@ import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath } from '@nextcloud/router'
 
 import Dashboard from './views/Dashboard.vue'
-import './assets/scss/dashboard.scss'
+import './assets/scss/polls-icon.scss'
 
 Vue.config.debug = process.env.NODE_ENV !== 'production'
 Vue.config.devTools = process.env.NODE_ENV !== 'production'
diff --git a/src/js/views/Dashboard.vue b/src/js/views/Dashboard.vue
index 4ad6193c..dee3fa3c 100644
--- a/src/js/views/Dashboard.vue
+++ b/src/js/views/Dashboard.vue
@@ -23,12 +23,15 @@
 <template>
 	<div>
 		<NcDashboardWidget :items="relevantPolls"
-			empty-content-icon="icon-polls"
 			:empty-content-message="t('polls', 'No polls found for this category')"
 			:show-more-text="t('polls', 'Relevant polls')"
 			:loading="loading"
 			@hide="() => {}"
 			@markDone="() => {}">
+			<template #emptyContentIcon>
+				<PollsAppIcon />
+			</template>
+
 			<template #default="{ item }">
 				<a :href="pollLink(item)">
 					<div class="poll-item__item">
@@ -58,6 +61,7 @@ import { NcDashboardWidget } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import TextPollIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import DatePollIcon from 'vue-material-design-icons/CalendarBlank.vue'
+import PollsAppIcon from '../components/AppIcons/PollsAppIcon.vue'
 import { mapGetters } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
 
@@ -65,28 +69,34 @@ export default {
 	name: 'Dashboard',
 	components: {
 		NcDashboardWidget,
-		TextPollIcon,
 		DatePollIcon,
+		PollsAppIcon,
+		TextPollIcon,
 	},
+
 	data() {
 		return {
 			loading: false,
 		}
 	},
+
 	computed: {
 		...mapGetters({
 			filteredPolls: 'polls/filtered',
 		}),
+
 		relevantPolls() {
 			const list = [
 				...this.filteredPolls('relevant'),
 			]
 			return list.slice(0, 6)
 		},
+
 		pollLink() {
 			return (card) => generateUrl(`/apps/polls/vote/${card.id}`)
 		},
 	},
+
 	beforeMount() {
 		this.loading = true
 		this.$store.dispatch('polls/list').then(() => {
@@ -97,7 +107,9 @@ export default {
 		})
 	},
 }
+
 </script>
+
 <style lang="scss">
 	[class^='poll-item__'] {
 		display: flex;