From bfafe0e4b1eabb80ec6563059e7308e339de7a95 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Mon, 5 Jun 2023 14:28:10 +0200
Subject: [PATCH] [hotfix] tweak models ui to improve images visibility

---
 .../components/models-management/model-item.component.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/models-management/model-item.component.tsx b/src/renderer/components/models-management/model-item.component.tsx
index 7737983b..6110b504 100644
--- a/src/renderer/components/models-management/model-item.component.tsx
+++ b/src/renderer/components/models-management/model-item.component.tsx
@@ -102,7 +102,8 @@ function modelItem<T = unknown>(props: Props<T>) {
             <GlowEffect visible={props.selected || hovered}/>
             <div className="absolute top-0 left-0 w-full h-full rounded-lg overflow-hidden blur-none bg-black shadow-sm shadow-black">
                 <div ref={ref} className="contents">
-                    <BsmImage className={`absolute top-0 left-0 w-full h-full object-cover ${props.type === MSModelType.Avatar ? "object-top" : ""}`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
+                    <BsmImage className={`absolute top-0 left-0 w-full h-full object-cover brightness-50 scale-[200%] blur-md`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
+                    <BsmImage className={`absolute top-0 left-1/2 -translate-x-1/2 max-w-[20rem] w-full h-full object-cover`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
                     <div className="absolute top-0 right-0 h-full w-0 flex flex-col items-end gap-1 pt-1.5 pr-1.5">
                         {!props.isDownloading ? (
                             actionButtons().map((button, index) => (