Update the user status dashboard widget and fix the icon color

Signed-off-by: Joas Schilling <coding@schilljs.com>

7 files changed, 31 insertions, 30 deletions

diff --git a/apps/user_status/css/user-status-menu.css b/apps/user_status/css/user-status-menu.css
index 124c753128b..e522462557e 100644
--- a/apps/user_status/css/user-status-menu.css
+++ b/apps/user_status/css/user-status-menu.css
@@ -80,6 +80,10 @@
   background-image: url("../img/app.svg");
 }
 
+.icon-user-status-dark {
+  background-image: url("../img/app-dark.svg");
+}
+
 .icon-user-status-online {
   background-image: url("../img/user-status-online.svg");
 }
diff --git a/apps/user_status/css/user-status-menu.css.map b/apps/user_status/css/user-status-menu.css.map
index 61ee5d7e261..d09e479094c 100644
--- a/apps/user_status/css/user-status-menu.css.map
+++ b/apps/user_status/css/user-status-menu.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA","file":"user-status-menu.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;EACC;;;AAGD;EACC;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA","file":"user-status-menu.css"}
\ No newline at end of file
diff --git a/apps/user_status/css/user-status-menu.scss b/apps/user_status/css/user-status-menu.scss
index e6c0e3d2427..c4566cbf334 100644
--- a/apps/user_status/css/user-status-menu.scss
+++ b/apps/user_status/css/user-status-menu.scss
@@ -26,6 +26,11 @@
 	background-image: url("../img/app.svg");
 }
 
+.icon-user-status-dark {
+	background-image: url("../img/app-dark.svg");
+
+}
+
 .icon-user-status-online {
 	background-image: url('../img/user-status-online.svg');
 }
diff --git a/apps/user_status/img/app-dark.svg b/apps/user_status/img/app-dark.svg
new file mode 100644
index 00000000000..b9ea9f2cfb0
--- /dev/null
+++ b/apps/user_status/img/app-dark.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none"/><path d="m10.615 2.1094c-4.8491 0.68106-8.6152 4.8615-8.6152 9.8906 0 5.5 4.5 10 10 10 5.0292 0 9.2096-3.7661 9.8906-8.6152-1.4654 1.601-3.5625 2.6152-5.8906 2.6152-4.4 0-8-3.6-8-8 0-2.3281 1.0143-4.4252 2.6152-5.8906z" fill="#000000"/></svg>
diff --git a/apps/user_status/lib/Dashboard/UserStatusWidget.php b/apps/user_status/lib/Dashboard/UserStatusWidget.php
index 5a89040dfa5..2e1de3cd6cf 100644
--- a/apps/user_status/lib/Dashboard/UserStatusWidget.php
+++ b/apps/user_status/lib/Dashboard/UserStatusWidget.php
@@ -109,7 +109,7 @@ class UserStatusWidget implements IAPIWidget, IIconWidget, IOptionWidget {
 	 * @inheritDoc
 	 */
 	public function getIconClass(): string {
-		return 'icon-user-status';
+		return 'icon-user-status-dark';
 	}
 
 	/**
@@ -117,7 +117,7 @@ class UserStatusWidget implements IAPIWidget, IIconWidget, IOptionWidget {
 	 */
 	public function getIconUrl(): string {
 		return $this->urlGenerator->getAbsoluteURL(
-			$this->urlGenerator->imagePath(Application::APP_ID, 'app.svg')
+			$this->urlGenerator->imagePath(Application::APP_ID, 'app-dark.svg')
 		);
 	}
 
diff --git a/apps/user_status/src/views/Dashboard.vue b/apps/user_status/src/views/Dashboard.vue
index 2b24ec6032f..ef5a9832ebc 100644
--- a/apps/user_status/src/views/Dashboard.vue
+++ b/apps/user_status/src/views/Dashboard.vue
@@ -20,11 +20,12 @@
   -->
 
 <template>
-	<DashboardWidget id="user-status_panel"
+	<NcDashboardWidget id="user-status_panel"
 		:items="items"
-		:loading="loading">
+		:loading="loading"
+		:empty-content-message="t('user_status', 'No recent status changes')">
 		<template #default="{ item }">
-			<DashboardWidgetItem :main-text="item.mainText"
+			<NcDashboardWidgetItem :main-text="item.mainText"
 				:sub-text="item.subText">
 				<template #avatar>
 					<NcAvatar class="item-avatar"
@@ -34,33 +35,27 @@
 						:show-user-status="false"
 						:show-user-status-compact="false" />
 				</template>
-			</DashboardWidgetItem>
+			</NcDashboardWidgetItem>
 		</template>
-		<template #empty-content>
-			<NcEmptyContent id="user_status-widget-empty-content">
-				<template #icon>
-					<div class="icon-user-status" />
-				</template>
-				{{ t('user_status', 'No recent status changes') }}
-			</NcEmptyContent>
+		<template #emptyContentIcon>
+			<div class="icon-user-status-dark" />
 		</template>
-	</DashboardWidget>
+	</NcDashboardWidget>
 </template>
 
 <script>
-import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
 import { loadState } from '@nextcloud/initial-state'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget'
+import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem'
 import moment from '@nextcloud/moment'
 
 export default {
 	name: 'Dashboard',
 	components: {
 		NcAvatar,
-		DashboardWidget,
-		DashboardWidgetItem,
-		NcEmptyContent,
+		NcDashboardWidget,
+		NcDashboardWidgetItem,
 	},
 	data() {
 		return {
@@ -117,14 +112,10 @@ export default {
 </script>
 
 <style lang="scss">
-#user_status-widget-empty-content {
-	text-align: center;
-	margin-top: 5vh;
-	.icon-user-status {
-		width: 64px;
-		height: 64px;
-		background-size: 64px;
-		filter: var(--background-invert-if-dark);
-	}
+.icon-user-status-dark {
+	width: 64px;
+	height: 64px;
+	background-size: 64px;
+	filter: var(--background-invert-if-dark);
 }
 </style>
diff --git a/apps/user_status/tests/Unit/Dashboard/UserStatusWidgetTest.php b/apps/user_status/tests/Unit/Dashboard/UserStatusWidgetTest.php
index ab7252370ce..5481325510c 100644
--- a/apps/user_status/tests/Unit/Dashboard/UserStatusWidgetTest.php
+++ b/apps/user_status/tests/Unit/Dashboard/UserStatusWidgetTest.php
@@ -95,7 +95,7 @@ class UserStatusWidgetTest extends TestCase {
 	}
 
 	public function testGetIconClass(): void {
-		$this->assertEquals('icon-user-status', $this->widget->getIconClass());
+		$this->assertEquals('icon-user-status-dark', $this->widget->getIconClass());
 	}
 
 	public function testGetUrl(): void {