page Publier : formulaire de dépôt au style sharp du groupe (étiquettes mono uppercase, champs bordure encre + focus accent décalé, grille 2 colonnes → 1 sous 700 px, couleur d'erreur --danger)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2 changed files +22 −3
modified
frontend/src/pages/Employeurs.tsx
+3 −3
@@ -6,7 +6,7 @@ | |||||
| 6 | * Fichier : frontend/src/pages/Employeurs.tsx | 6 | * Fichier : frontend/src/pages/Employeurs.tsx | ||
| 7 | * Rôle : Page « Publier une offre » — dépôt direct par les employeurs | 7 | * Rôle : Page « Publier une offre » — dépôt direct par les employeurs | ||
| 8 | * (POST /api/employeurs/offres, modération avant publication) | 8 | * (POST /api/employeurs/offres, modération avant publication) | ||
| 9 | − * Créé : 2026-08-18 Modifié : 2026-08-18 | 9 | + * Créé : 2026-08-18 Modifié : 2026-08-22 | ||
| 10 | * ============================================================================= | 10 | * ============================================================================= | ||
| 11 | */ | 11 | */ | ||
| 12 | import { FormEvent, useEffect, useState } from "react"; | 12 | import { FormEvent, useEffect, useState } from "react"; | ||
@@ -105,7 +105,7 @@ export default function EmployeursPage() { | |||||
| 105 | ) : ( | 105 | ) : ( | ||
| 106 | <form onSubmit={submit} className="card depot-form" | 106 | <form onSubmit={submit} className="card depot-form" | ||
| 107 | style={{ padding: 24, display: "grid", gap: 14, maxWidth: 760 }}> | 107 | style={{ padding: 24, display: "grid", gap: 14, maxWidth: 760 }}> | ||
| 108 | − <div style={{ display: "grid", gap: 14, gridTemplateColumns: "1fr 1fr" }}> | 108 | + <div className="depot-grid"> | ||
| 109 | <label>Entreprise * | 109 | <label>Entreprise * | ||
| 110 | <input required minLength={2} maxLength={120} | 110 | <input required minLength={2} maxLength={120} | ||
| 111 | value={form.employer} onChange={set("employer")} /> | 111 | value={form.employer} onChange={set("employer")} /> | ||
@@ -156,7 +156,7 @@ export default function EmployeursPage() { | |||||
| 156 | <input type="text" name="website" value={form.website} | 156 | <input type="text" name="website" value={form.website} | ||
| 157 | onChange={set("website")} autoComplete="off" tabIndex={-1} | 157 | onChange={set("website")} autoComplete="off" tabIndex={-1} | ||
| 158 | style={{ position: "absolute", left: "-9999px" }} aria-hidden="true" /> | 158 | style={{ position: "absolute", left: "-9999px" }} aria-hidden="true" /> | ||
| 159 | − {err && <p style={{ color: "var(--red, #c0392b)" }}>{err}</p>} | 159 | + {err && <p style={{ color: "var(--danger, #b3423a)" }}>{err}</p>} | ||
| 160 | <div> | 160 | <div> | ||
| 161 | <button className="btn btn-primary" type="submit" disabled={sending}> | 161 | <button className="btn btn-primary" type="submit" disabled={sending}> | ||
| 162 | {sending ? "Envoi…" : "Soumettre l'offre pour modération"} | 162 | {sending ? "Envoi…" : "Soumettre l'offre pour modération"} | ||
modified
frontend/src/styles.css
+19 −0
@@ -284,6 +284,25 @@ table.data tr:last-child td { border-bottom: none; } | |||||
| 284 | .section-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 4px; } | 284 | .section-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 4px; } | ||
| 285 | .muted { color: var(--ink-3); font-size: 13px; } | 285 | .muted { color: var(--ink-3); font-size: 13px; } | ||
| 286 | 286 | ||||
| 287 | +/* --- formulaire de dépôt direct (page Publier) ------------------------------------------ */ | ||||
| 288 | +.depot-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } | ||||
| 289 | +@media (max-width: 700px) { .depot-grid { grid-template-columns: 1fr; } } | ||||
| 290 | +.depot-form label { | ||||
| 291 | + display: flex; flex-direction: column; gap: 6px; | ||||
| 292 | + font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; | ||||
| 293 | + text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); | ||||
| 294 | +} | ||||
| 295 | +.depot-form input:not([name="website"]), .depot-form select, .depot-form textarea { | ||||
| 296 | + font: 15px/1.4 var(--font-body); color: var(--ink); | ||||
| 297 | + border: 1.5px solid var(--ink); border-radius: var(--r-ctl); | ||||
| 298 | + background: var(--surface); padding: 10px 12px; min-height: var(--touch); | ||||
| 299 | +} | ||||
| 300 | +.depot-form textarea { resize: vertical; } | ||||
| 301 | +.depot-form input:focus, .depot-form select:focus, .depot-form textarea:focus { | ||||
| 302 | + outline: none; box-shadow: 3px 3px 0 var(--accent); | ||||
| 303 | +} | ||||
| 304 | +.depot-form input::placeholder, .depot-form textarea::placeholder { color: var(--ink-3); } | ||||
| 305 | + | ||||
| 287 | /* --- page Contact (commune Groupe KA) -------------------------------------------------- */ | 306 | /* --- page Contact (commune Groupe KA) -------------------------------------------------- */ | ||
| 288 | .contact-page { padding: 44px 0 90px; } | 307 | .contact-page { padding: 44px 0 90px; } | ||
| 289 | .contact-page h1 { margin: 10px 0 8px; } | 308 | .contact-page h1 { margin: 10px 0 8px; } | ||
| 290 | 309 | ||||