mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-16 21:30:39 -07:00
Jamie Pine
586b19f40f
- 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.
30 lines
939 B
TypeScript
30 lines
939 B
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
export interface CircleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
}
|
|
|
|
const CircleButton = React.forwardRef<HTMLButtonElement, CircleButtonProps>(
|
|
({ className, icon: Icon, ...props }, ref) => {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={cn(
|
|
'h-7 w-7 rounded-full flex items-center justify-center flex-shrink-0',
|
|
'hover:bg-muted 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',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<Icon className="h-3.5 w-3.5 text-muted-foreground/60" />
|
|
</button>
|
|
);
|
|
},
|
|
);
|
|
CircleButton.displayName = 'CircleButton';
|
|
|
|
export { CircleButton };
|