Change color of displayname and ellipsis status message

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
nextcloud · Aug 20, 2020 · 393a34e · 393a34e
1 parent af3a59f
commit 393a34e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/apps/user_status/js/user-status-menu.js b/apps/user_status/js/user-status-menu.js
diff --git a/apps/user_status/js/user-status-menu.js.map b/apps/user_status/js/user-status-menu.js.map
diff --git a/apps/user_status/src/App.vue b/apps/user_status/src/App.vue
@@ -244,15 +244,18 @@ export default {
 </script>
 
 <style lang="scss">
+$max-width-user-status: 200px;
+
 li:not(.inline) #user-status-menu-item {
 	&__header {
 		display: block;
-		color: var(--color-main-text);
+		box-sizing: border-box;
+		color: var(--color-text-maxcontrast);
 		padding: 10px 12px 5px 38px;
 		opacity: 1;
 		white-space: nowrap;
 		text-align: left;
-		max-width: 150px;
+		max-width: $max-width-user-status;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
@@ -261,6 +264,8 @@ li:not(.inline) #user-status-menu-item {
 		width: 100%;
 
 		> button {
+			display: block;
+			box-sizing: border-box;
 			background-color: var(--color-main-background);
 			background-position: 12px center;
 			background-size: 16px;
@@ -269,6 +274,9 @@ li:not(.inline) #user-status-menu-item {
 			font-weight: normal;
 			padding-left: 38px;
 			opacity: 1;
+			max-width: $max-width-user-status;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
 			&:hover,
 			&:focus {