From afaba47a609afdb6de6ed54509834fd3ec913e7a Mon Sep 17 00:00:00 2001
From: JEEEEEEEEEEEEEEEEEEEEEED <118366366+jadjoud@users.noreply.github.com>
Date: Sat, 30 Mar 2024 02:07:12 +0000
Subject: [PATCH] fix#44356 link preview folder icon color updated

Signed-off-by: JEEEEEEEEEEEEEEEEEEEEEED <118366366+jadjoud@users.noreply.github.com>
---
 apps/files/css/files.scss                    | 25 ++++++++++----------
 apps/files/src/views/ReferenceFileWidget.vue |  3 ++-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 194d1542de9ff..9d970c872d09c 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -348,18 +348,19 @@ table td.filename .thumbnail-wrapper.icon-loading-small {
 	}
 }
 table td.filename .thumbnail {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-	margin-left: 9px;
-	margin-top: 9px;
-	border-radius: var(--border-radius);
-	cursor: pointer;
-	position: absolute;
-	z-index: 4;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-left: 9px;
+    margin-top: 9px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    position: absolute;
+    z-index: 4;
+    background-color: var(--primary-color); /* Set the background color to the primary color */
 }
 table td.filename p.name .thumbnail {
 	cursor: default;
diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue
index 896105f02070d..fa3e252460a29 100644
--- a/apps/files/src/views/ReferenceFileWidget.vue
+++ b/apps/files/src/views/ReferenceFileWidget.vue
@@ -55,7 +55,7 @@
 		:href="richObject.link"
 		target="_blank"
 		@click="navigate">
-		<span class="widget-file__image" :class="filePreviewClass" :style="filePreviewStyle">
+		<span class="widget-file__image" :class="filePreviewClass" :style="{ backgroundColor: primaryColor }">
 			<template v-if="!previewUrl">
 				<FolderIcon v-if="isFolder" :size="88" />
 				<FileIcon v-else :size="88" />
@@ -141,6 +141,7 @@ export default defineComponent({
 		return {
 			previewUrl: null as string | null,
 			failedViewer: false,
+			primaryColor: 'var(--primary-color)'
 		}
 	},