idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(MediaBrowser, MediaEntry, MediaManager): enhance button styles for improved aesthetics and interaction

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-11 11:52:55 -04:00
parent 4b2456859f
commit a77971e58e
3 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/MediaBrowser.tsx
View File

@ -193,7 +193,7 @@ export default function MediaBrowser({ currentPath, onSelect, onClose }: MediaBr
{!loading && !error && path !== null && ( {!loading && !error && path !== null && (
<> <>
{path !== '/' && ( {path !== '/' && (
<button onClick={navigateUp} className="w-full px-4 py-3 flex items-center gap-3 hover:bg-neutral-50 border-b border-neutral-100 text-left"> <button onClick={navigateUp} className="w-full pl-[14px] pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left">
<ArrowLeft className="w-5 h-5 text-neutral-400" /> <ArrowLeft className="w-5 h-5 text-neutral-400" />
<span className="text-neutral-600">..</span> <span className="text-neutral-600">..</span>
</button> </button>

2
src/app/components/MediaEntry.tsx
View File

@ -80,7 +80,7 @@ export function MediaEntry({
entry, onPrimaryClick, onActionsClick, leftSlot, nameSlot, selected, className, entry, onPrimaryClick, onActionsClick, leftSlot, nameSlot, selected, className,
}: MediaEntryProps) { }: MediaEntryProps) {
return ( return (
<div className={`px-4 py-3 flex items-center gap-3 border-b border-neutral-100 hover:bg-neutral-50 ${selected ? 'bg-blue-50' : ''} ${className ?? ''}`}> <div className={`pl-[14px] pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 ${selected ? 'bg-blue-50 border-l-blue-400' : ''} ${className ?? ''}`}>
{leftSlot} {leftSlot}
<button className="flex-1 flex items-center gap-3 text-left min-w-0" onClick={onPrimaryClick}> <button className="flex-1 flex items-center gap-3 text-left min-w-0" onClick={onPrimaryClick}>
<EntryIcon entry={entry} /> <EntryIcon entry={entry} />

2
src/app/components/MediaManager.tsx
View File

@ -1018,7 +1018,7 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi
{path !== '/' && ( {path !== '/' && (
<button <button
onClick={navigateUp} onClick={navigateUp}
className="w-full px-4 py-3 flex items-center gap-3 hover:bg-neutral-50 border-b border-neutral-100 text-left" className="w-full pl-[14px] pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left"
> >
<div className="w-4 flex-shrink-0" /> <div className="w-4 flex-shrink-0" />
<ArrowLeft className="w-5 h-5 text-neutral-400 flex-shrink-0" /> <ArrowLeft className="w-5 h-5 text-neutral-400 flex-shrink-0" />