clean up prompts and improve quality

components/VoiceSession/VoiceControls.tsx

@@ -1,6 +1,6 @@
-
 import React from 'react';
 import { Mic, MicOff, MessageSquare } from 'lucide-react';
+import { Button } from '../ui/button';
 
 interface VoiceControlsProps {
   isMuted: boolean;
@@ -9,25 +9,29 @@ interface VoiceControlsProps {
   onToggleTranscript: () => void;
 }
 
-const VoiceControls: React.FC<VoiceControlsProps> = ({ 
-  isMuted, 
-  onToggleMute, 
-  showTranscript, 
-  onToggleTranscript 
+const VoiceControls: React.FC<VoiceControlsProps> = ({
+  isMuted,
+  onToggleMute,
+  showTranscript,
+  onToggleTranscript
 }) => (
   <div className="p-8 flex justify-center gap-6 relative z-10 bg-black/20 backdrop-blur-md">
-    <button 
+    <Button
+      variant={isMuted ? "destructive" : "secondary"}
+      size="icon"
+      className={`h-16 w-16 rounded-full ${!isMuted && 'bg-white/10 text-white hover:bg-white/20'}`}
       onClick={onToggleMute}
-      className={`p-5 rounded-full transition-all ${isMuted ? 'bg-rose-600 text-white' : 'bg-white/10 text-white hover:bg-white/20'}`}
     >
-      {isMuted ? <MicOff size={24} /> : <Mic size={24} />}
-    </button>
-    <button 
+      {isMuted ? <MicOff className="!w-6 !h-6" /> : <Mic className="!w-6 !h-6" />}
+    </Button>
+    <Button
+      variant="secondary"
+      size="icon"
+      className={`h-16 w-16 rounded-full ${showTranscript ? 'bg-teal-600 text-white hover:bg-teal-700' : 'bg-white/10 text-white hover:bg-white/20'}`}
       onClick={onToggleTranscript}
-      className={`p-5 rounded-full transition-all ${showTranscript ? 'bg-teal-600 text-white' : 'bg-white/10 text-white hover:bg-white/20'}`}
     >
-      <MessageSquare size={24} />
-    </button>
+      <MessageSquare className="!w-6 !h-6" />
+    </Button>
   </div>
 );
 

components/VoiceSession/VoiceHeader.tsx

@@ -1,6 +1,6 @@
-
 import React from 'react';
 import { PhoneOff, Flag } from 'lucide-react';
+import { Button } from '../ui/button';
 
 interface VoiceHeaderProps {
   title: string;
@@ -11,17 +11,25 @@ interface VoiceHeaderProps {
 const VoiceHeader: React.FC<VoiceHeaderProps> = ({ title, onExit, onFinish }) => (
   <div className="p-8 flex justify-between items-center relative z-10">
     <div className="flex items-center gap-4">
-      <button onClick={onExit} className="p-3 bg-white/5 hover:bg-white/10 rounded-2xl text-white/50 hover:text-white transition-all">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onExit}
+        className="h-12 w-12 bg-white/5 hover:bg-white/10 rounded-2xl text-white/50 hover:text-white transition-all"
+      >
         <PhoneOff size={20} />
-      </button>
+      </Button>
       <div>
         <h2 className="text-white font-bold text-lg">{title}</h2>
         <p className="text-teal-400 text-[10px] font-black uppercase tracking-widest">Active Roleplay Session</p>
       </div>
     </div>
-    <button onClick={onFinish} className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-teal-900/40 flex items-center gap-2">
+    <Button
+      onClick={onFinish}
+      className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-teal-900/40 flex items-center gap-2"
+    >
       <Flag size={14} /> Finish
-    </button>
+    </Button>
   </div>
 );