From b2d053589ae9addbdae08396047bf10280beaa5f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 30 Jul 2024 14:37:22 +0200
Subject: [PATCH] fix(user_status): Adjust AccountMenu entry for user status

fixup: Adjust to design comments

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/user_status/src/UserStatus.vue           | 74 +++++++------------
 .../AccountMenu/AccountMenuEntry.vue          |  6 +-
 core/src/views/AccountMenu.vue                |  3 +-
 3 files changed, 31 insertions(+), 52 deletions(-)

diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index d662d69a3d2..d25629f3e5f 100644
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@@ -4,38 +4,42 @@
 -->
 
 <template>
-	<component :is="inline ? 'div' : 'li'">
-		<!-- User Status = Status modal toggle -->
-		<button v-if="!inline"
+	<Fragment>
+		<NcListItem v-if="!inline"
 			class="user-status-menu-item"
-			@click.stop="openModal">
-			<NcUserStatusIcon class="user-status-icon"
-				:status="statusType"
-				aria-hidden="true" />
-			{{ visibleMessage }}
-		</button>
-
-		<!-- Dashboard Status -->
-		<NcButton v-else
+			compact
+			:name="visibleMessage"
 			@click.stop="openModal">
 			<template #icon>
 				<NcUserStatusIcon class="user-status-icon"
 					:status="statusType"
 					aria-hidden="true" />
 			</template>
-			{{ visibleMessage }}
-		</NcButton>
-
+		</NcListItem>
+
+		<div v-else>
+			<!-- Dashboard Status -->
+			<NcButton @click.stop="openModal">
+				<template #icon>
+					<NcUserStatusIcon class="user-status-icon"
+						:status="statusType"
+						aria-hidden="true" />
+				</template>
+				{{ visibleMessage }}
+			</NcButton>
+		</div>
 		<!-- Status management modal -->
 		<SetStatusModal v-if="isModalOpen"
 			:inline="inline"
 			@close="closeModal" />
-	</component>
+	</Fragment>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { Fragment } from 'vue-frag'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
 import debounce from 'debounce'
 
@@ -46,7 +50,9 @@ export default {
 	name: 'UserStatus',
 
 	components: {
+		Fragment,
 		NcButton,
+		NcListItem,
 		NcUserStatusIcon,
 		SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
 	},
@@ -166,40 +172,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-status-menu-item {
-	// Ensure the maxcontrast color is set for the background
-	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
-	width: auto;
-	min-width: 44px;
-	height: 44px;
-	margin: 0;
-	border: 0;
-	border-radius: var(--border-radius-pill);
-	background-color: var(--color-main-background-blur);
-	font-size: inherit;
-	font-weight: normal;
-
-	-webkit-backdrop-filter: var(--background-blur);
-	backdrop-filter: var(--background-blur);
-
-	&:active,
-	&:hover,
-	&:focus-visible {
-		background-color: var(--color-background-hover);
-	}
-	&:focus-visible {
-		box-shadow: 0 0 0 4px var(--color-main-background) !important;
-		outline: 2px solid var(--color-main-text) !important;
-	}
-}
-
 .user-status-icon {
-	width: 16px;
-	height: 16px;
-	margin-right: 10px;
+	width: 20px;
+	height: 20px;
+	margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size
 	opacity: 1 !important;
-	background-size: 16px;
+	background-size: 20px;
 	vertical-align: middle !important;
 }
 </style>
diff --git a/core/src/components/AccountMenu/AccountMenuEntry.vue b/core/src/components/AccountMenu/AccountMenuEntry.vue
index 47ce884fc2b..c0cff323c12 100644
--- a/core/src/components/AccountMenu/AccountMenuEntry.vue
+++ b/core/src/components/AccountMenu/AccountMenuEntry.vue
@@ -86,9 +86,9 @@ export default {
 <style lang="scss" scoped>
 .account-menu-entry {
 	&__icon {
-		height: 20px;
-		width: 20px;
-		margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size
+		height: 16px;
+		width: 16px;
+		margin: calc((var(--default-clickable-area) - 16px) / 2); // 16px icon size
 		filter: var(--background-invert-if-dark);
 
 		&--active {
diff --git a/core/src/views/AccountMenu.vue b/core/src/views/AccountMenu.vue
index 1eef398e087..0eb6a76e4dd 100644
--- a/core/src/views/AccountMenu.vue
+++ b/core/src/views/AccountMenu.vue
@@ -226,7 +226,8 @@ export default defineComponent({
 	&__list {
 		display: inline-flex;
 		flex-direction: column;
-		gap: var(--default-grid-baseline);
+		padding-block: var(--default-grid-baseline) 0;
+		padding-inline: 0 var(--default-grid-baseline);
 
 		> :deep(li) {
 			box-sizing: border-box;