style: adjust spacing and sizing in DailyCheckboxItem and DailySection
- 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:
@@ -74,7 +74,7 @@ export function DailyCheckboxItem({
|
|||||||
|
|
||||||
return (
|
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'
|
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-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)]'
|
: '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}
|
checked={checkbox.isChecked}
|
||||||
onChange={() => onToggle(checkbox.id)}
|
onChange={() => onToggle(checkbox.id)}
|
||||||
disabled={saving}
|
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 */}
|
{/* Contenu principal */}
|
||||||
@@ -96,13 +96,13 @@ export function DailyCheckboxItem({
|
|||||||
onKeyDown={handleInlineEditKeyPress}
|
onKeyDown={handleInlineEditKeyPress}
|
||||||
onBlur={handleSaveInlineEdit}
|
onBlur={handleSaveInlineEdit}
|
||||||
autoFocus
|
autoFocus
|
||||||
className="flex-1 h-8 text-sm"
|
className="flex-1 h-7 text-sm"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex-1 flex items-center gap-2">
|
<div className="flex-1 flex items-center gap-2">
|
||||||
{/* Texte cliquable pour édition inline */}
|
{/* Texte cliquable pour édition inline */}
|
||||||
<span
|
<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
|
checkbox.isChecked
|
||||||
? 'line-through text-[var(--muted-foreground)]'
|
? 'line-through text-[var(--muted-foreground)]'
|
||||||
: 'text-[var(--foreground)]'
|
: 'text-[var(--foreground)]'
|
||||||
@@ -117,7 +117,7 @@ export function DailyCheckboxItem({
|
|||||||
<button
|
<button
|
||||||
onClick={handleStartAdvancedEdit}
|
onClick={handleStartAdvancedEdit}
|
||||||
disabled={saving}
|
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)"
|
title="Éditer les options (type, liaison tâche)"
|
||||||
>
|
>
|
||||||
✏️
|
✏️
|
||||||
@@ -129,7 +129,7 @@ export function DailyCheckboxItem({
|
|||||||
{checkbox.task && (
|
{checkbox.task && (
|
||||||
<Link
|
<Link
|
||||||
href={`/?highlight=${checkbox.task.id}`}
|
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}`}
|
title={`Tâche: ${checkbox.task.title}`}
|
||||||
>
|
>
|
||||||
{checkbox.task.title}
|
{checkbox.task.title}
|
||||||
@@ -140,7 +140,7 @@ export function DailyCheckboxItem({
|
|||||||
<button
|
<button
|
||||||
onClick={() => onDelete(checkbox.id)}
|
onClick={() => onDelete(checkbox.id)}
|
||||||
disabled={saving}
|
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"
|
title="Supprimer"
|
||||||
>
|
>
|
||||||
×
|
×
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ export function DailySection({
|
|||||||
|
|
||||||
{/* Liste des checkboxes - zone scrollable */}
|
{/* Liste des checkboxes - zone scrollable */}
|
||||||
<div className="flex-1 px-4 overflow-y-auto min-h-0">
|
<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) => (
|
{checkboxes.map((checkbox) => (
|
||||||
<DailyCheckboxItem
|
<DailyCheckboxItem
|
||||||
key={checkbox.id}
|
key={checkbox.id}
|
||||||
|
|||||||
Reference in New Issue
Block a user