Update UI components and styles for improved functionality and aesthetics

- Changed accent color variables in index.css for better visual consistency.
- Added a new voicebox logo to the Sidebar component for branding enhancement.
- Refactored AudioPlayer to utilize CSS variables for wave and progress colors, improving theme adaptability.
- Adjusted HistoryTable column widths for better layout and readability.
- Enhanced ProfileCard layout with improved button positioning and styling.
- Updated button styles to use accent colors for better visual coherence.
- Improved CircleButton styling for consistent appearance across the application.

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -73,11 +73,22 @@ export function AudioPlayer() {
       });
 
       try {
+        // Get computed CSS variable values
+        const root = document.documentElement;
+        const getCSSVar = (varName: string) => {
+          const value = getComputedStyle(root).getPropertyValue(varName).trim();
+          return value ? `hsl(${value})` : '';
+        };
+
+        const waveColor = getCSSVar('--muted');
+        const progressColor = getCSSVar('--accent');
+        const cursorColor = getCSSVar('--accent');
+
         const wavesurfer = WaveSurfer.create({
           container: container,
-          waveColor: '#ffffff',
-          progressColor: '#d3d3d3',
-          cursorColor: 'hsl(var(--primary))',
+          waveColor: waveColor,
+          progressColor: progressColor,
+          cursorColor: cursorColor,
           barWidth: 2,
           barRadius: 2,
           height: 80,