Fix dropdown colours (vibe-kanban) (#891)
* Done! The dropdown colors are now fixed for dark mode readability: - **Selected items** now use `bg-accent text-accent-foreground` instead of hardcoded light-theme colors - **File paths** in selected items use `text-accent-foreground/70` for better contrast - **Added accessibility** attributes (`aria-selected` and `role="option"`) The changes maintain your existing design token pattern and will automatically adapt to both light and dark themes. * Cleanup script changes for task attempt 9dd6bd96-f216-408c-ab42-94eefb1437e1 * Perfect! Now the selected dropdown item uses: 1. **Background:** `bg-primary/10` (subtle primary tint) 2. **Text:** `text-primary` (primary color text) 3. **Left border:** `border-l-2 border-primary` (visual indicator) 4. **File path:** `text-primary/70` (muted primary for secondary info) This provides much better visual distinction while maintaining theme compatibility and using your existing design token pattern. * Cleanup script changes for task attempt 9dd6bd96-f216-408c-ab42-94eefb1437e1 * Now the selected item uses `bg-muted text-foreground` which provides proper contrast in both light and dark modes, with a primary-colored left border for visual distinction. The file path uses consistent `text-muted-foreground` in all states. * Cleanup script changes for task attempt 9dd6bd96-f216-408c-ab42-94eefb1437e1 * Perfect! Now the selected dropdown item simply uses `bg-muted text-foreground` which provides clear contrast and visibility without the border.
This commit is contained in:
committed by
GitHub
parent
58badf2653
commit
71bfe9ac0b
@@ -287,13 +287,21 @@ export function FileSearchTextarea({
|
||||
key={file.path}
|
||||
className={`px-3 py-2 cursor-pointer text-sm ${
|
||||
index === selectedIndex
|
||||
? 'bg-blue-50 text-blue-900'
|
||||
? 'bg-muted text-foreground'
|
||||
: 'hover:bg-muted'
|
||||
}`}
|
||||
onClick={() => selectFile(file)}
|
||||
aria-selected={index === selectedIndex}
|
||||
role="option"
|
||||
>
|
||||
<div className="font-medium truncate">{file.name}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
<div
|
||||
className={`text-xs truncate ${
|
||||
index === selectedIndex
|
||||
? 'text-muted-foreground'
|
||||
: 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
{file.path}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user