From 9cb3cb6ee272042fed15309c6f021691dd621cc8 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Thu, 24 Jun 2021 17:21:38 +0200
Subject: [PATCH] public: redesign and translate the 422 error page

---
 public/422.html | 106 ++++++++++++++++++++++--------------------------
 1 file changed, 49 insertions(+), 57 deletions(-)
diff --git a/public/422.html b/public/422.html
index a21f82b3b..899adfc29 100644
--- a/public/422.html
+++ b/public/422.html
@@ -1,67 +1,59 @@
 <!DOCTYPE html>
-<html>
+<html lang='fr'>
 <head>
-  <title>The change you wanted was rejected (422)</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
+  <meta content='IE=edge' http-equiv='X-UA-Compatible'>
+  <meta content='no-cache' name='turbolinks-cache-control'>
+  <meta content='width=device-width, initial-scale=1' name='viewport'>
+  <title>
+    Erreur 422 · demarches-simplifiees.fr
+  </title>
   <style>
-  body {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
+    html,body,div,span,h1,p,a,img,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
+    html,body{height:100%;}
+    body{line-height:1;font-family:"Muli";color:#333333;font-size:16px;line-height:1.42857143;}
+    html{box-sizing:border-box;}
+    *,*::before,*::after{box-sizing:inherit;}
+    a{text-decoration:none;}
+    .page-wrapper{position:relative;min-height:100%;}
+    .container{padding-left:16px;padding-right:16px;max-width:700px;margin:0 auto;}
+    .flex{display:flex;}
+    .flex.align-center{align-items:center;}
+    .header-inner-content{padding-left:16px;padding-right:16px;max-width:1072px;margin:0 auto;display:flex;justify-content:space-between;min-height:72px;}
+    .new-header{background-color:#FFFFFF;}
+    .new-header-with-border{border-bottom:1px solid #CCCCCC;}
+    .header-logo{display:inline-block;margin-right:32px;}
+    .header-logo img{height:34px;}
+    @media (max-width: 1040px){
+      .header-logo img{height:18px;}
+    }
+    .new-h1{color:#333333;text-align:center;font-weight:bold;margin-bottom:60px;font-size:41px;margin-top:60px;}
+    .description{font-size: 18px; margin-bottom: 8px;}
+    /*! CSS Used fontfaces */
+    @font-face{font-family:"Muli";src:url(/fonts/muli/Muli-Regular.woff) format("woff");font-weight:normal;font-style:normal;}
   </style>
 </head>
-
 <body>
-  <!-- This file lives in public/422.html -->
-  <div class="dialog">
-    <div>
-      <h1>The change you wanted was rejected.</h1>
-      <p>Maybe you tried to change something you didn't have access to.</p>
+  <div class='page-wrapper'>
+    <div class='new-header new-header-with-border'>
+      <div class='header-inner-content'>
+        <div class='flex align-center'>
+          <a class="header-logo" href="/"><img alt='demarches-simplifiees.fr' src='/logo-ds.svg'>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class='container'>
+      <h1 class='new-h1'>L’action demandée a été rejetée.</h1>
+      <p class='description'>
+        Pas de panique, c’est probablement temporaire.
+      </p>
+      <p class='description'>
+        Essayez de
+        <a href="javascript:window.location=document.referrer;">recharger la page précédente</a>,
+        et tout devrait rentrer dans l’ordre.
+      </p>
     </div>
-    <p>If you are the application owner check the logs for more information.</p>
   </div>
 </body>
 </html>
