style(app): mobile-first layout polish

src/components/NoteEditor.tsx

@@ -33,7 +33,7 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
   if (editing) {
     return (
       <form
-        className="flex flex-col gap-4"
+        className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
         onSubmit={(event) => {
           event.preventDefault()
           save()
@@ -44,7 +44,7 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
           <input
             value={title}
             onChange={(event) => setTitle(event.target.value)}
-            className="w-full border border-gray-300 rounded px-3 py-2"
+            className="w-full rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
             placeholder="Sans titre"
           />
         </label>
@@ -53,19 +53,22 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
           <textarea
             value={content}
             onChange={(event) => setContent(event.target.value)}
-            className="w-full border border-gray-300 rounded px-3 py-2 min-h-40"
+            className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
             placeholder="Écrire ici…"
           />
         </label>
-        <div className="flex justify-between">
+        <div className="flex justify-end gap-3">
           <button
             type="button"
             onClick={cancel}
-            className="px-4 py-2 rounded border border-gray-300 text-gray-600"
+            className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
           >
             Annuler
           </button>
-          <button type="submit" className="px-4 py-2 rounded bg-blue-600 text-white">
+          <button
+            type="submit"
+            className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
+          >
             Enregistrer
           </button>
         </div>
@@ -74,26 +77,26 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
   }
 
   return (
-    <article className="flex flex-col gap-4">
+    <article className="flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
       <div className="flex items-start justify-between gap-4">
-        <h2 className="text-2xl font-semibold">{note.title || 'Sans titre'}</h2>
+        <h2 className="text-xl font-semibold leading-snug">{note.title || 'Sans titre'}</h2>
         <button
           type="button"
           onClick={() => setConfirmDelete(true)}
           aria-label="Supprimer la note"
-          className="px-2 py-1 rounded text-gray-600 hover:text-red-600"
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-2xl leading-none text-gray-400 hover:bg-red-50 hover:text-red-600 active:bg-red-100"
         >
           ×
         </button>
       </div>
-      <p className="whitespace-pre-wrap">
+      <p className="whitespace-pre-wrap text-base leading-relaxed">
         {note.content || <span className="text-gray-400 italic">Note vide</span>}
       </p>
-      <div>
+      <div className="flex justify-end">
         <button
           type="button"
           onClick={startEditing}
-          className="px-4 py-2 rounded bg-blue-600 text-white"
+          className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
         >
           Éditer
         </button>