julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine button styles and layout in KanbanFilters

Browse Source 
- Changed button padding and layout from grid to flex for better responsiveness.
- Adjusted gap sizes for a more compact design.
- Ensured consistent styling across priority and tag buttons for improved UI coherence.
This commit is contained in:
Julien Froidefond
2025-09-25 22:10:00 +02:00
parent 551279efcb
commit cd71824cc8
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/kanban/KanbanFilters.tsx
View File

@@ -346,12 +346,12 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
<label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
Priorités
</label>
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-wrap gap-1">
{priorityOptions.filter(priority => priority.count > 0).map((priority) => (
<button
key={priority.value}
onClick={() => handlePriorityToggle(priority.value)}
className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium whitespace-nowrap ${
className={`flex items-center gap-2 px-2 py-1 rounded border transition-all text-xs font-medium ${
filters.priorities?.includes(priority.value)
? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
: 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]'
@@ -373,12 +373,12 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
<label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
Tags
</label>
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
<div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
{sortedTags.filter(tag => (tagCounts[tag.name] || 0) > 0).map((tag) => (
<button
key={tag.id}
onClick={() => handleTagToggle(tag.name)}
className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium ${
className={`flex items-center gap-2 px-2 py-1 rounded border transition-all text-xs font-medium ${
filters.tags?.includes(tag.name)
? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
: 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]'
@@ -401,11 +401,11 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
<label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider mb-3">
Filtres généraux
</label>
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-1">
<button
type="button"
onClick={handleDueDateFilterToggle}
className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium cursor-pointer ${
className={`flex items-center gap-2 px-2 py-1 rounded border transition-all text-xs font-medium cursor-pointer ${
filters.showWithDueDate
? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
: 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)] hover:bg-[var(--card)]/80'