diff --git a/app/src/assets/voicebox-logo.png b/app/src/assets/voicebox-logo.png new file mode 100644 index 00000000..eebe5438 Binary files /dev/null and b/app/src/assets/voicebox-logo.png differ diff --git a/app/src/components/AudioPlayer/AudioPlayer.tsx b/app/src/components/AudioPlayer/AudioPlayer.tsx index bf6c09fb..d6ffb5bd 100644 --- a/app/src/components/AudioPlayer/AudioPlayer.tsx +++ b/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, diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx index dc6b79a6..ee029df6 100644 --- a/app/src/components/History/HistoryTable.tsx +++ b/app/src/components/History/HistoryTable.tsx @@ -79,12 +79,12 @@ export function HistoryTable() { - Text - Profile - Language - Duration - Created - Actions + Text + Profile + Language + Duration + Created + Actions @@ -107,9 +107,9 @@ export function HistoryTable() { {formatDate(gen.created_at)} - +
e.stopPropagation()} > + {/* Logo */} +
+ Voicebox +
+ {/* Navigation Buttons */}
{tabs.map((tab) => { @@ -28,7 +38,7 @@ export function Sidebar({ activeTab, onTabChange }: SidebarProps) { className={cn( 'w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200', 'hover:bg-accent hover:text-accent-foreground', - isActive ? 'bg-primary text-primary-foreground shadow-lg' : 'text-muted-foreground', + isActive ? 'bg-accent text-accent-foreground shadow-lg' : 'text-muted-foreground', )} title={tab.label} aria-label={tab.label} diff --git a/app/src/components/VoiceProfiles/ProfileCard.tsx b/app/src/components/VoiceProfiles/ProfileCard.tsx index 0d15b274..c5f19a20 100644 --- a/app/src/components/VoiceProfiles/ProfileCard.tsx +++ b/app/src/components/VoiceProfiles/ProfileCard.tsx @@ -2,6 +2,7 @@ import { Edit, Eye, Mic, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { CircleButton } from '@/components/ui/circle-button'; import { Dialog, @@ -11,11 +12,9 @@ import { DialogHeader, DialogTitle, } from '@/components/ui/dialog'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; -import { cn } from '@/lib/utils/cn'; import type { VoiceProfileResponse } from '@/lib/api/types'; import { useDeleteProfile } from '@/lib/hooks/useProfiles'; -import { formatDate } from '@/lib/utils/format'; +import { cn } from '@/lib/utils/cn'; import { useUIStore } from '@/stores/uiStore'; import { ProfileDetail } from './ProfileDetail'; @@ -57,54 +56,51 @@ export function ProfileCard({ profile }: ProfileCardProps) { <> - - - - {profile.name} - -
- { - e.stopPropagation(); - setDetailOpen(true); - }} - aria-label="View details" - /> - { - e.stopPropagation(); - handleEdit(); - }} - aria-label="Edit profile" - /> - + +
+
+ {profile.name} - +

{profile.description || 'No description'}

-
+
{profile.language} -

- {formatDate(profile.created_at)} -

+
+
+ { + e.stopPropagation(); + setDetailOpen(true); + }} + aria-label="View details" + /> + { + e.stopPropagation(); + handleEdit(); + }} + aria-label="Edit profile" + /> +
diff --git a/app/src/components/ui/button.tsx b/app/src/components/ui/button.tsx index 04e51493..58c8b8d3 100644 --- a/app/src/components/ui/button.tsx +++ b/app/src/components/ui/button.tsx @@ -4,22 +4,22 @@ import * as React from 'react'; import { cn } from '@/lib/utils/cn'; const buttonVariants = cva( - 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', + 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', + default: 'bg-accent text-accent-foreground hover:bg-accent/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', + link: 'text-accent underline-offset-4 hover:underline', }, size: { default: 'h-10 px-4 py-2', - sm: 'h-9 rounded-md px-3', - lg: 'h-11 rounded-md px-8', - icon: 'h-10 w-10', + sm: 'h-9 rounded-full px-3', + lg: 'h-11 rounded-full px-8', + icon: 'h-10 w-10 rounded-full', }, }, defaultVariants: { diff --git a/app/src/components/ui/circle-button.tsx b/app/src/components/ui/circle-button.tsx index 902689ab..268843ed 100644 --- a/app/src/components/ui/circle-button.tsx +++ b/app/src/components/ui/circle-button.tsx @@ -11,8 +11,8 @@ const CircleButton = React.forwardRef(