diff --git a/apps/web/public/icons.svg b/apps/web/public/icons.svg index e952219..e38edc0 100644 --- a/apps/web/public/icons.svg +++ b/apps/web/public/icons.svg @@ -7,16 +7,16 @@ - - - + + + - - + + diff --git a/apps/web/src/App.css b/apps/web/src/App.css index 1e1b248..cf58ad4 100644 --- a/apps/web/src/App.css +++ b/apps/web/src/App.css @@ -39,7 +39,7 @@ main { h1 { font-size: 28px; font-weight: 700; - color: #111; + color: #de6c90; margin: 0; letter-spacing: -0.5px; } diff --git a/apps/web/src/components/CreateTaskForm.css b/apps/web/src/components/CreateTaskForm.css index 41ae9e5..ec318d0 100644 --- a/apps/web/src/components/CreateTaskForm.css +++ b/apps/web/src/components/CreateTaskForm.css @@ -4,6 +4,257 @@ margin: 0 auto; } +.open-form-btn { + width: 100%; + padding: 14px; + background: #de6c90; + color: white; + border: none; + border-radius: 6px; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: background 0.2s; +} + +.open-form-btn:hover { + background: #de6c90; +} + +@media (max-width: 768px) { + .open-form-btn { + padding: 12px; + font-size: 14px; + } +} + +.task-form { + background: white; + padding: 24px; + border-radius: 8px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + border: 1px solid #e0e0e0; +} + +@media (max-width: 768px) { + .task-form { + padding: 16px; + } +} + +.task-form h3 { + margin: 0 0 20px 0; + color: #de6c90; + font-size: 18px; +} + +@media (max-width: 768px) { + .task-form h3 { + font-size: 16px; + margin-bottom: 16px; + } +} + +.form-group { + margin-bottom: 18px; +} + +@media (max-width: 768px) { + .form-group { + margin-bottom: 14px; + } +} + +.form-group label { + display: block; + margin-bottom: 6px; + color: #555; + font-weight: 500; + font-size: 13px; +} + +/* Name input row with confirm button */ +.name-input-row { + display: flex; + gap: 8px; + align-items: stretch; +} + +.name-input-row input[type="text"] { + flex: 1; + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + transition: border-color 0.2s; + box-sizing: border-box; + min-width: 0; +} + +@media (max-width: 768px) { + .name-input-row input[type="text"] { + font-size: 16px; + } +} + +.name-input-row input[type="text"]:focus { + outline: none; + border-color: #de6c90; +} + +.name-confirm-btn { + padding: 0 14px; + background: #de6c90; + color: white; + border: none; + border-radius: 4px; + font-size: 16px; + cursor: pointer; + transition: background 0.15s; + flex-shrink: 0; +} + +.name-confirm-btn:hover { + background: #de6c90; +} + +.char-count { + display: block; + text-align: right; + font-size: 11px; + color: #999; + margin-top: 4px; +} + +/* Toggle button groups (replaces radio buttons) */ +.btn-group { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.btn-option { + padding: 8px 18px; + border: 1px solid #ddd; + border-radius: 4px; + background: white; + color: #555; + font-size: 14px; + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; +} + +.btn-option:hover { + border-color: #de6c90; + color: #de6c90; +} + +.btn-option--active { + background: #de6c90; + color: white; + border-color: #de6c90; +} + +.btn-option--active:hover { + background: #9328e8; + border-color: #9328e8; + color: white; +} + +.repeat-input { + display: flex; + gap: 8px; +} + +.repeat-amount { + width: 80px; + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; +} + +@media (max-width: 768px) { + .repeat-amount { + width: 70px; + font-size: 16px; + } +} + +.repeat-amount:focus { + outline: none; + border-color: #de6c90; +} + +.repeat-unit { + flex: 1; + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + cursor: pointer; + background: white; +} + +@media (max-width: 768px) { + .repeat-unit { + font-size: 16px; + } +} + +.repeat-unit:focus { + outline: none; + border-color: #de6c90; +} + +.form-actions { + display: flex; + gap: 10px; + margin-top: 20px; +} + +@media (max-width: 768px) { + .form-actions { + flex-direction: column-reverse; + } +} + +.submit-btn { + flex: 1; + padding: 12px; + background: #de6c90; + color: white; + border: none; + border-radius: 4px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: background 0.2s; +} + +.submit-btn:hover { + background: #9328e8; +} + +.cancel-btn { + flex: 1; + padding: 12px; + background: white; + color: #666; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; +} + +.cancel-btn:hover { + background: #f5f5f5; + border-color: #bbb; +} + + .open-form-btn { width: 100%; padding: 14px; diff --git a/apps/web/src/components/CreateTaskForm.tsx b/apps/web/src/components/CreateTaskForm.tsx index 8a7ce43..2d71de8 100644 --- a/apps/web/src/components/CreateTaskForm.tsx +++ b/apps/web/src/components/CreateTaskForm.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useRef } from 'react'; import type { NewTaskInput } from '../types'; import { useLanguage } from '../i18n/LanguageContext'; import './CreateTaskForm.css'; @@ -16,12 +16,11 @@ export default function CreateTaskForm({ onCreateTask }: CreateTaskFormProps) { const [repeatUnit, setRepeatUnit] = useState<'WEEKS' | 'MONTHS' | 'YEARS'>('WEEKS'); const [toDoToday, setToDoToday] = useState(true); const [priority, setPriority] = useState<'ESSENTIAL' | 'WHEN_I_HAVE_TIME'>('ESSENTIAL'); + const inputRef = useRef(null); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (!name.trim()) return; - const taskInput: NewTaskInput = { name: name.trim(), doesRepeat, @@ -29,10 +28,7 @@ export default function CreateTaskForm({ onCreateTask }: CreateTaskFormProps) { priority, toDoToday, }; - onCreateTask(taskInput); - - // Reset form setName(''); setDoesRepeat(true); setRepeatAmount('1'); @@ -51,39 +47,36 @@ export default function CreateTaskForm({ onCreateTask }: CreateTaskFormProps) { ) : (

{t.createNewTaskTitle}

- +
- setName(e.target.value.slice(0, 60))} - placeholder={t.taskPlaceholder} - maxLength={60} - autoFocus - /> +
+ setName(e.target.value.slice(0, 60))} + placeholder={t.taskPlaceholder} + maxLength={60} + autoFocus + /> + +
{name.length}/60
-
- - +
+ +
@@ -115,53 +108,23 @@ export default function CreateTaskForm({ onCreateTask }: CreateTaskFormProps) {
-
- - +
+ +
-
- - +
+ +
- +
)} diff --git a/apps/web/src/i18n/translations.ts b/apps/web/src/i18n/translations.ts index 0b3742d..1599e8b 100644 --- a/apps/web/src/i18n/translations.ts +++ b/apps/web/src/i18n/translations.ts @@ -19,7 +19,7 @@ export const translations = { nothingHere: 'Nothing here', markCompleted: 'Mark as completed', // Timeline - whatTheFutureHolds: 'What the future holds', + whatTheFutureHolds: 'Upcoming tasks', noUpcoming: 'No upcoming tasks scheduled', tomorrow: 'Tomorrow', inDays: (n: number) => `In ${n} days`, @@ -69,7 +69,7 @@ export const translations = { nothingHere: 'Rien ici', markCompleted: 'Marquer comme fait', // Timeline - whatTheFutureHolds: 'Ce que l\'avenir réserve', + whatTheFutureHolds: 'Tâches à venir', noUpcoming: 'Aucune tâche à venir', tomorrow: 'Demain', inDays: (n: number) => `Dans ${n} jours`,