fix styling of sidebar entries

Signed-off-by: szaimen <szaimen@e.mail.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

2 files changed, 22 insertions, 10 deletions

diff --git a/src/components/Activity.vue b/src/components/Activity.vue
index 34139887..7d305336 100644
--- a/src/components/Activity.vue
+++ b/src/components/Activity.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<li class="activity-entry">
-		<Avatar class="activity-entry__icon"
+		<Avatar :class="[applyMonochromeIconColor, 'activity-entry__icon', 'activity-icon']"
 			:disable-menu="true"
 			:disable-tooltip="true"
 			:url="activity.icon"
@@ -106,6 +106,14 @@ export default {
 		subjectArguments() {
 			return this.mapRichObjectsToRichArguments(this.activity.subjectRichObjects)
 		},
+		applyMonochromeIconColor() {
+			// copied from https://github.com/nextcloud/activity/blob/db919d45c45356082b17104614018e2c7e691996/js/script.js#L225
+			const monochromeIcon = this.activity.type !== 'file_created' && this.activity.type !== 'file_deleted' && this.activity.type !== 'favorite' && !this.activity.icon.endsWith('-color.svg');
+			if (monochromeIcon) {
+				return 'monochrome'
+			}
+			return ''
+		},
 	},
 	created() {
 		this.updateDateFromNow()
@@ -204,6 +212,10 @@ export default {
 		margin-right: 8px;
 	}
 
+	.avatardiv  {
+		background-color: unset !important;
+	}
+
 	&__content {
 		display: flex;
 		flex-direction: column;
diff --git a/src/tests/__snapshots__/Activity.test.js.snap b/src/tests/__snapshots__/Activity.test.js.snap
index e8193e3f..c1c7be76 100644
--- a/src/tests/__snapshots__/Activity.test.js.snap
+++ b/src/tests/__snapshots__/Activity.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Display correct information for changes 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -28,7 +28,7 @@ exports[`Display correct information for changes 1`] = `
 exports[`Display correct information for comments 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -53,7 +53,7 @@ exports[`Display correct information for comments 1`] = `
 exports[`Display correct information for creations 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -78,7 +78,7 @@ exports[`Display correct information for creations 1`] = `
 exports[`Display correct information for favorites 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -103,7 +103,7 @@ exports[`Display correct information for favorites 1`] = `
 exports[`Display correct information for moves 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -128,7 +128,7 @@ exports[`Display correct information for moves 1`] = `
 exports[`Display correct information for renames 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -153,7 +153,7 @@ exports[`Display correct information for renames 1`] = `
 exports[`Display correct information for shares 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -178,7 +178,7 @@ exports[`Display correct information for shares 1`] = `
 exports[`Display correct information for tags 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->
@@ -203,7 +203,7 @@ exports[`Display correct information for tags 1`] = `
 exports[`Display correct information for unfavorites 1`] = `
 <div>
   <li class="activity-entry">
-    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper activity-entry__icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
+    <div data-v-27dcfb0b="" aria-label="Avatar of {displayName}" class="avatardiv popovermenu-wrapper monochrome activity-entry__icon activity-icon" style="--size: 15px; line-height: 15px; font-size: 8px; background-color: rgb(0, 130, 201);">
       <!---->
       <!---->
       <!---->