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 | 6 | * Fichier : frontend/src/pages/Employeurs.tsx |
| 7 | 7 | * Rôle : Page « Publier une offre » — dépôt direct par les employeurs |
| 8 | 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 | 12 | import { FormEvent, useEffect, useState } from "react"; |
@@ -105,7 +105,7 @@ export default function EmployeursPage() { | ||
| 105 | 105 | ) : ( |
| 106 | 106 | <form onSubmit={submit} className="card depot-form" |
| 107 | 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 | 109 | <label>Entreprise * |
| 110 | 110 | <input required minLength={2} maxLength={120} |
| 111 | 111 | value={form.employer} onChange={set("employer")} /> |
@@ -156,7 +156,7 @@ export default function EmployeursPage() { | ||
| 156 | 156 | <input type="text" name="website" value={form.website} |
| 157 | 157 | onChange={set("website")} autoComplete="off" tabIndex={-1} |
| 158 | 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 | 160 | <div> |
| 161 | 161 | <button className="btn btn-primary" type="submit" disabled={sending}> |
| 162 | 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 | 284 | .section-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 4px; } |
| 285 | 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 | 306 | /* --- page Contact (commune Groupe KA) -------------------------------------------------- */ |
| 288 | 307 | .contact-page { padding: 44px 0 90px; } |
| 289 | 308 | .contact-page h1 { margin: 10px 0 8px; } |
| 290 | 309 | |