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

style: adjust spacing and sizing in DailyCheckboxItem and DailySection

Browse Source 
- Reduced padding and margin in DailyCheckboxItem for a more compact layout.
- Updated checkbox sizes for consistency and improved visual hierarchy.
- Adjusted the scrollable area in DailySection to enhance user experience.
This commit is contained in:
Julien Froidefond
2025-09-16 08:15:45 +02:00
parent 11200f85ac
commit 845d12f098
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/daily/DailyCheckboxItem.tsx
View File

@@ -74,7 +74,7 @@ export function DailyCheckboxItem({
return (
<>
<div className={`flex items-center gap-3 p-2 rounded border transition-colors group ${
<div className={`flex items-center gap-2 px-3 py-1.5 rounded border transition-colors group ${
checkbox.type === 'meeting'
? 'border-l-4 border-l-blue-500 border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)]'
: 'border-l-4 border-l-green-500 border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)]'
@@ -85,7 +85,7 @@ export function DailyCheckboxItem({
checked={checkbox.isChecked}
onChange={() => onToggle(checkbox.id)}
disabled={saving}
className="w-4 h-4 rounded border border-[var(--border)] text-[var(--primary)] focus:ring-[var(--primary)]/20 focus:ring-2"
className="w-3.5 h-3.5 rounded border border-[var(--border)] text-[var(--primary)] focus:ring-[var(--primary)]/20 focus:ring-1"
/>
{/* Contenu principal */}
@@ -96,13 +96,13 @@ export function DailyCheckboxItem({
onKeyDown={handleInlineEditKeyPress}
onBlur={handleSaveInlineEdit}
autoFocus
className="flex-1 h-8 text-sm"
className="flex-1 h-7 text-sm"
/>
) : (
<div className="flex-1 flex items-center gap-2">
{/* Texte cliquable pour édition inline */}
<span
className={`flex-1 text-sm font-mono transition-all cursor-pointer hover:bg-[var(--muted)]/50 p-1 rounded ${
className={`flex-1 text-xs font-mono transition-all cursor-pointer hover:bg-[var(--muted)]/50 py-0.5 px-1 rounded ${
checkbox.isChecked
? 'line-through text-[var(--muted-foreground)]'
: 'text-[var(--foreground)]'
@@ -117,7 +117,7 @@ export function DailyCheckboxItem({
<button
onClick={handleStartAdvancedEdit}
disabled={saving}
className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full bg-[var(--muted)]/50 hover:bg-[var(--muted)] border border-[var(--border)]/30 hover:border-[var(--border)] flex items-center justify-center transition-all duration-200 text-[var(--foreground)] text-xs"
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--muted)]/50 hover:bg-[var(--muted)] border border-[var(--border)]/30 hover:border-[var(--border)] flex items-center justify-center transition-all duration-200 text-[var(--foreground)] text-xs"
title="Éditer les options (type, liaison tâche)"
>
✏️
@@ -129,7 +129,7 @@ export function DailyCheckboxItem({
{checkbox.task && (
<Link
href={`/?highlight=${checkbox.task.id}`}
className="text-xs text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono truncate max-w-[120px]"
className="text-xs text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono truncate max-w-[100px]"
title={`Tâche: ${checkbox.task.title}`}
>
{checkbox.task.title}
@@ -140,7 +140,7 @@ export function DailyCheckboxItem({
<button
onClick={() => onDelete(checkbox.id)}
disabled={saving}
className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] text-xs"
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] text-xs"
title="Supprimer"
>
×

2
components/daily/DailySection.tsx
View File

@@ -73,7 +73,7 @@ export function DailySection({
{/* Liste des checkboxes - zone scrollable */}
<div className="flex-1 px-4 overflow-y-auto min-h-0">
<div className="space-y-2 pb-4">
<div className="space-y-1.5 pb-4">
{checkboxes.map((checkbox) => (
<DailyCheckboxItem
key={checkbox.id}