From 50eba457f65e4acd382e3f7d4ddd512d6497e173 Mon Sep 17 00:00:00 2001
From: mbrucedogs <mbrucedogs@gmail.com>
Date: Sun, 20 Jul 2025 18:32:19 -0500
Subject: [PATCH] Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

---
 src/components/common/SelectSinger.tsx | 27 ++++++++++++++------------
 src/components/common/SongInfo.tsx     | 17 +++++++++-------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/common/SelectSinger.tsx b/src/components/common/SelectSinger.tsx
index 1ffe674..09b3d10 100644
--- a/src/components/common/SelectSinger.tsx
+++ b/src/components/common/SelectSinger.tsx
@@ -73,18 +73,21 @@ const SelectSinger: React.FC<SelectSingerProps> = ({ isOpen, onClose, song }) =>
       breakpoints={[0, 0.5, 0.8]}
       initialBreakpoint={0.8}
     >
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Select Singer</IonTitle>
-          <ActionButton
-            onClick={onClose}
-            variant={ActionButtonVariant.SECONDARY}
-            size={ActionButtonSize.SMALL}
-            icon={Icons.CLOSE}
-            iconSlot={ActionButtonIconSlot.ICON_ONLY}
-          />
-        </IonToolbar>
-      </IonHeader>
+              <IonHeader>
+          <IonToolbar>
+            <IonTitle>Select Singer</IonTitle>
+            <div slot="end">
+              <ActionButton
+                onClick={onClose}
+                variant={ActionButtonVariant.SECONDARY}
+                size={ActionButtonSize.SMALL}
+                icon={Icons.CLOSE}
+                iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                fill="clear"
+              />
+            </div>
+          </IonToolbar>
+        </IonHeader>
       
       <IonContent>
         {/* Song Information */}
diff --git a/src/components/common/SongInfo.tsx b/src/components/common/SongInfo.tsx
index 171c009..5c3f6d2 100644
--- a/src/components/common/SongInfo.tsx
+++ b/src/components/common/SongInfo.tsx
@@ -93,13 +93,16 @@ const SongInfo: React.FC<SongInfoProps> = ({ isOpen, onClose, song }) => {
         <IonHeader>
           <IonToolbar>
             <IonTitle>Song Info</IonTitle>
-            <ActionButton
-              onClick={onClose}
-              variant={ActionButtonVariant.SECONDARY}
-              size={ActionButtonSize.SMALL}
-              icon={Icons.CLOSE}
-              iconSlot={ActionButtonIconSlot.ICON_ONLY}
-            />
+            <div slot="end">
+              <ActionButton
+                onClick={onClose}
+                variant={ActionButtonVariant.SECONDARY}
+                size={ActionButtonSize.SMALL}
+                icon={Icons.CLOSE}
+                iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                fill="clear"
+              />
+            </div>
           </IonToolbar>
         </IonHeader>