From 7921f1e548ad36907a8617e3f0a5491f2157a67e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 14 Nov 2025 03:16:28 -0800
Subject: [PATCH] improve visiblity of close button on expanded item

---
 .../albums/components/expanded-album-list-item.module.css   | 6 ++++++
 .../features/albums/components/expanded-album-list-item.tsx | 6 ++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/albums/components/expanded-album-list-item.module.css b/src/renderer/features/albums/components/expanded-album-list-item.module.css
index 1225f4f5f..5b3636f24 100644
--- a/src/renderer/features/albums/components/expanded-album-list-item.module.css
+++ b/src/renderer/features/albums/components/expanded-album-list-item.module.css
@@ -43,6 +43,12 @@
     top: 0;
     right: 0;
     z-index: 10;
+    opacity: 0.3;
+    transition: opacity 0.3s ease-in-out;
+
+    &:hover {
+        opacity: 0.6;
+    }
 }
 
 .content {
diff --git a/src/renderer/features/albums/components/expanded-album-list-item.tsx b/src/renderer/features/albums/components/expanded-album-list-item.tsx
index b703318f7..5a0a26dee 100644
--- a/src/renderer/features/albums/components/expanded-album-list-item.tsx
+++ b/src/renderer/features/albums/components/expanded-album-list-item.tsx
@@ -215,9 +215,7 @@ export const ExpandedAlbumListItem = ({ internalState, item }: ExpandedAlbumList
                                 </TextTitle>
                                 {internalState && (
                                     <ActionIcon
-                                        className={clsx(styles.closeButton, {
-                                            [styles.dark]: color.isDark,
-                                        })}
+                                        className={clsx(styles.closeButton)}
                                         icon="x"
                                         iconProps={{
                                             size: 'xl',
@@ -230,7 +228,7 @@ export const ExpandedAlbumListItem = ({ internalState, item }: ExpandedAlbumList
                                         }}
                                         radius="50%"
                                         size="sm"
-                                        variant="subtle"
+                                        variant="default"
                                     />
                                 )}
                             </div>