From f06e14074a4bdeff7abe40d087922210fb3177a1 Mon Sep 17 00:00:00 2001
From: Hariharan Mudaliar <hrhn.mudaliar251@gmail.com>
Date: Sun, 24 Aug 2025 00:13:59 +0530
Subject: [PATCH] Working

---
 .../components/Clipboard/ClipboardPanel.swift | 14 ++-----
 .../ColorPicker/ColorPickerPanel.swift        | 38 +++++++++++++------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/DynamicIsland/components/Clipboard/ClipboardPanel.swift b/DynamicIsland/components/Clipboard/ClipboardPanel.swift
index 974ea6c..905e148 100644
--- a/DynamicIsland/components/Clipboard/ClipboardPanel.swift
+++ b/DynamicIsland/components/Clipboard/ClipboardPanel.swift
@@ -200,17 +200,9 @@ struct ClipboardPanelView: View {
             // Close button positioned in top-left corner
             VStack {
                 HStack {
-                    Button(action: onClose) {
-                        Image(systemName: "xmark")
-                            .font(.system(size: 12, weight: .medium))
-                            .foregroundColor(.white)
-                            .frame(width: 24, height: 24)
-                            .background(Color.red)
-                            .clipShape(Circle())
-                    }
-                    .buttonStyle(PlainButtonStyle())
-                    .padding(.leading, 12)
-                    .padding(.top, 12)
+                    NativeStyleCloseButton(action: onClose)
+                        .padding(.leading, 8)
+                        .padding(.top, 8)
                     
                     Spacer()
                 }
diff --git a/DynamicIsland/components/ColorPicker/ColorPickerPanel.swift b/DynamicIsland/components/ColorPicker/ColorPickerPanel.swift
index 9ea32ce..90a6f86 100644
--- a/DynamicIsland/components/ColorPicker/ColorPickerPanel.swift
+++ b/DynamicIsland/components/ColorPicker/ColorPickerPanel.swift
@@ -194,17 +194,9 @@ struct ColorPickerPanelView: View {
             // Close button positioned in top-left corner
             VStack {
                 HStack {
-                    Button(action: onClose) {
-                        Image(systemName: "xmark")
-                            .font(.system(size: 12, weight: .medium))
-                            .foregroundColor(.white)
-                            .frame(width: 24, height: 24)
-                            .background(Color.red)
-                            .clipShape(Circle())
-                    }
-                    .buttonStyle(PlainButtonStyle())
-                    .padding(.leading, 12)
-                    .padding(.top, 12)
+                    NativeStyleCloseButton(action: onClose)
+                        .padding(.leading, 8)
+                        .padding(.top, 8)
                     
                     Spacer()
                 }
@@ -668,6 +660,30 @@ struct ColorPickerVisualEffectView: NSViewRepresentable {
     func updateNSView(_ nsView: NSVisualEffectView, context: Context) {}
 }
 
+// MARK: - Native Style Close Button Component
+struct NativeStyleCloseButton: View {
+    let action: () -> Void
+    @State private var isHovered = false
+    
+    var body: some View {
+        Button(action: action) {
+            Image(systemName: "xmark")
+                .font(.system(size: 8, weight: .medium))
+                .foregroundColor(.white)
+                .frame(width: 13, height: 13)
+                .background(isHovered ? Color.red.opacity(0.8) : Color.red)
+                .clipShape(Circle())
+                .scaleEffect(isHovered ? 1.1 : 1.0)
+        }
+        .buttonStyle(PlainButtonStyle())
+        .onHover { hovering in
+            withAnimation(.easeInOut(duration: 0.1)) {
+                isHovered = hovering
+            }
+        }
+    }
+}
+
 #Preview {
     ColorPickerPanelView {
         print("Close panel")