From 60012b81c0836bb63941bb38ac931a1198080709 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Thu, 29 Jan 2026 19:32:05 -0800
Subject: [PATCH] Refactor ProfileForm and SampleList components for improved
 UI and functionality

- Updated button styles in ProfileForm for better visual consistency and user experience.
- Replaced Pencil icon with Edit in SampleList for clearer action representation.
- Introduced CircleButton component for action buttons in SampleList, enhancing UI responsiveness and clarity.
- Improved layout and hover effects for action buttons in SampleList to streamline user interactions.
---
 .../components/VoiceProfiles/ProfileForm.tsx  |  2 +-
 .../components/VoiceProfiles/SampleList.tsx   | 29 +++++++------------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/app/src/components/VoiceProfiles/ProfileForm.tsx b/app/src/components/VoiceProfiles/ProfileForm.tsx
index 4606eadb..f7a84e15 100644
--- a/app/src/components/VoiceProfiles/ProfileForm.tsx
+++ b/app/src/components/VoiceProfiles/ProfileForm.tsx
@@ -810,7 +810,7 @@ export function ProfileForm() {
                                   type="button"
                                   onClick={handleRemoveAvatar}
                                   disabled={deleteAvatar.isPending}
-                                  className="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:bg-destructive/90 transition-colors shadow-sm"
+                                  className="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-background/60 backdrop-blur-sm text-muted-foreground flex items-center justify-center hover:bg-background/80 hover:text-foreground transition-colors shadow-sm border border-border/50"
                                 >
                                   <X className="h-3.5 w-3.5" />
                                 </button>
diff --git a/app/src/components/VoiceProfiles/SampleList.tsx b/app/src/components/VoiceProfiles/SampleList.tsx
index bc17295d..de848737 100644
--- a/app/src/components/VoiceProfiles/SampleList.tsx
+++ b/app/src/components/VoiceProfiles/SampleList.tsx
@@ -1,6 +1,7 @@
-import { Plus, Trash2, Play, Pencil, Check, X, Volume2, Pause } from 'lucide-react';
+import { Plus, Trash2, Play, Edit, Check, X, Volume2, Pause } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { CircleButton } from '@/components/ui/circle-button';
 import { Textarea } from '@/components/ui/textarea';
 import { Slider } from '@/components/ui/slider';
 import { useToast } from '@/components/ui/use-toast';
@@ -212,7 +213,7 @@ export function SampleList({ profileId }: SampleListProps) {
                   /* Edit Mode */
                   <div className="p-4 space-y-3">
                     <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
-                      <Pencil className="h-3 w-3" />
+                      <Edit className="h-3 w-3" />
                       <span>Editing transcription</span>
                     </div>
                     <Textarea
@@ -256,28 +257,18 @@ export function SampleList({ profileId }: SampleListProps) {
                       </div>
 
                       {/* Action Buttons */}
-                      <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-8 w-8"
+                      <div className="shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <CircleButton
+                          icon={Edit}
                           title="Edit transcription"
                           onClick={() => handleStartEdit(sample.id, sample.reference_text)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-8 w-8 text-destructive hover:text-destructive"
+                        />
+                        <CircleButton
+                          icon={Trash2}
                           title="Delete sample"
                           onClick={() => handleDelete(sample.id)}
                           disabled={deleteSample.isPending}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
+                        />
                       </div>
 
                       {/* Sample Number Badge */}