Merge pull request #7004 from betagouv/agent_connect_is_beautiful

Rend la page de connexion visible en entier en 1280

app/assets/stylesheets/auth.scss

@@ -18,7 +18,15 @@
   }
 
   .column {
-    padding-top: 2 * $default-spacer;
+    padding-top: $default-spacer;
+  }
+
+  h1 {
+    margin-bottom: $default-spacer;
+  }
+
+  .form label {
+    margin-bottom: $default-spacer / 2;
   }
 }
 
@@ -26,7 +34,7 @@
   .auth-options {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 4 * $default-spacer;
+    margin-bottom: 2 * $default-spacer;
   }
 
   .remember-me {
@@ -60,7 +68,7 @@
 
 .sign-in-form .form {
   input[type="email"] {
-    margin-bottom: $default-padding;
+    margin-bottom: $default-spacer;
   }
 
   input[type="password"] {

app/assets/stylesheets/france-connect-agent-login.scss

@@ -2,10 +2,14 @@
 @import "constants";
 
 .france-connect-agent-login-button {
-  background-image: image-url("logo-agent-connect.png");
+  background-image: image-url("agentconnect-btn-principal.svg"), image-url("agentconnect-btn-principal-hover.svg");
   display: block;
   height: 60px;
-  width: 230px;
+  width: 206px;
   margin: 20px auto;
   font-size: 0;
+
+  &:hover {
+    background-image: image-url("agentconnect-btn-principal-hover.svg");
+  }
 }

app/assets/stylesheets/france-connect-login.scss

@@ -19,14 +19,14 @@
   width: 230px;
   margin: auto;
   margin-bottom: 8px;
-  background-image: image-url("login-with-fc.svg"), image-url("login-with-fc-hover.svg");
+  background-image: image-url("franceconnect-btn.svg"), image-url("franceconnect-btn-hover.svg");
   background-repeat: no-repeat;
   background-size: cover;
   cursor: pointer;
   font-size: 0;
 
   &:hover {
-    background-image: image-url("login-with-fc-hover.svg");
+    background-image: image-url("franceconnect-btn-hover.svg");
   }
 }
 
@@ -36,8 +36,8 @@
   align-items: center;
   color: $black;
   text-transform: uppercase;
-  padding-bottom: $default-padding;
-  padding-top: $default-padding;
+  padding-bottom: $default-spacer;
+  padding-top: $default-spacer;
 
   &::before,
   &::after {

app/views/users/sessions/new.html.haml

@@ -27,6 +27,5 @@
     .france-connect-login-separator
       = t('views.shared.france_connect_login.separator')
     .center
-      %h2.important-header= t('views.users.sessions.new.state_civil_servant')
-      %br
+      %h2.important-header.mb-1= t('views.users.sessions.new.state_civil_servant')
       = link_to t('views.users.sessions.new.connect_with_agent_connect'), agent_connect_path, class: "button expend secondary"

config/locales/views/agent_connect/agent/en.yml

@@ -11,7 +11,7 @@ en:
             The ministries and operators that can currently benefit from it are :
           </p>
           <ul>
-            <li>the Ministry of Ecological Transition</li>
+            <li>the Insee</li>
           </ul>
         you_are_a_citizen: You are an individual ?
         citizen_page: Go to our dedicated page

config/locales/views/agent_connect/agent/fr.yml

@@ -8,10 +8,10 @@ fr:
           <p>
             <b class="bold">AgentConnect est en cours de déploiement.</b>
             <br>
-            Les ministères et opérateurs qui peuvent l'utiliser à ce jour sont&nbsp;:
+            Les ministères et opérateurs qui peuvent lʼutiliser à ce jour sont&nbsp;:
           </p>
           <ul>
-            <li>le ministère de la Transition écologique</li>
+            <li>lʼInsee</li>
           </ul>
         you_are_a_citizen: Vous êtes un particulier ?
         citizen_page: Accéder à notre page dédiée

config/locales/views/shared/en.yml

@@ -11,7 +11,7 @@ en:
         en_attente: "Waiting for response"
       france_connect_login:
         title: "With FranceConnect"
-        description: "France connect is a solution proposed by the government to secure and simplify the connection to web services."
+        description: "FranceConnect is a solution proposed by the government to secure and simplify the connection to web services."
         login_button: "Sign in with FranceConnect"
         help_link: What is FranceConnect?
         separator: or

config/locales/views/shared/fr.yml

@@ -11,7 +11,7 @@ fr:
         en_attente: "En attente de réponse"
       france_connect_login:
         title: 'Avec FranceConnect'
-        description: "France connect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne."
+        description: "FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne."
         login_button: "S’identifier avec FranceConnect"
         help_link: "Qu’est-ce que FranceConnect ?"
         separator: 'ou'