From 13beb2bfa57899a1de273e26325edf94cf0a3002 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Wed, 21 Sep 2022 14:59:38 +0200
Subject: [PATCH] fix: AgentConnect button visibility

---
 .../stylesheets/france-connect-agent-login.scss   | 15 ---------------
 app/assets/stylesheets/france-connect-login.scss  |  4 ----
 app/views/agent_connect/agent/index.html.haml     | 14 ++++++++++----
 config/locales/views/agent_connect/agent/en.yml   |  4 +---
 config/locales/views/agent_connect/agent/fr.yml   |  5 ++---
 5 files changed, 13 insertions(+), 29 deletions(-)
 delete mode 100644 app/assets/stylesheets/france-connect-agent-login.scss

diff --git a/app/assets/stylesheets/france-connect-agent-login.scss b/app/assets/stylesheets/france-connect-agent-login.scss
deleted file mode 100644
index 8b9bf4c6e..000000000
--- a/app/assets/stylesheets/france-connect-agent-login.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "colors";
-@import "constants";
-
-.france-connect-agent-login-button {
-  background-image: image-url("agentconnect-btn-principal.svg"), image-url("agentconnect-btn-principal-hover.svg");
-  display: block;
-  height: 60px;
-  width: 206px;
-  margin: 20px auto;
-  font-size: 0;
-
-  &:hover {
-    background-image: image-url("agentconnect-btn-principal-hover.svg");
-  }
-}
diff --git a/app/assets/stylesheets/france-connect-login.scss b/app/assets/stylesheets/france-connect-login.scss
index 27ad345d2..59fc838f0 100644
--- a/app/assets/stylesheets/france-connect-login.scss
+++ b/app/assets/stylesheets/france-connect-login.scss
@@ -7,10 +7,6 @@
   }
 }
 
-.france-connect-help-link {
-  text-align: center;
-}
-
 a.france-connect-login-button {
   display: inline-block;
   height: 60px;
diff --git a/app/views/agent_connect/agent/index.html.haml b/app/views/agent_connect/agent/index.html.haml
index 7199d8732..8cb2229e5 100644
--- a/app/views/agent_connect/agent/index.html.haml
+++ b/app/views/agent_connect/agent/index.html.haml
@@ -14,11 +14,17 @@
           = link_to t('.citizen_page'), new_user_session_path, class: "button expend secondary"
 
       .column
-        = t('.connect_html')
+        %h1.fr-my-2
+          = t('.connect')
+
+        .fr-connect-group.fr-my-2w
+          = link_to(agent_connect_login_path, class: "fr-btn fr-connect") do
+            %span.fr-connect__login
+              = t('.signin_with')
+            %span.fr-connect__brand AgentConnect
+          %p
+            = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener", class: "fr-underlined"
 
-        = link_to t('.cta'), agent_connect_login_path, class: "france-connect-agent-login-button"
-        .france-connect-help-link
-          = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', class: 'link', target: '_blank', target: "_blank", rel: "noopener", class: "link"
 
         .france-connect-login-separator
           = t('views.shared.france_connect_login.separator')
diff --git a/config/locales/views/agent_connect/agent/en.yml b/config/locales/views/agent_connect/agent/en.yml
index 50c6c171e..b1a1699f3 100644
--- a/config/locales/views/agent_connect/agent/en.yml
+++ b/config/locales/views/agent_connect/agent/en.yml
@@ -15,8 +15,6 @@ en:
           </ul>
         you_are_a_citizen: You are an individual ?
         citizen_page: Go to our dedicated page
-        connect_html: |
-          <h1 class="mt-2 mb-2">Connect</h1>
-          <p><b class="bold">With AgentConnect</b></p>
+        connect: Connect
         whats_agentconnect: 'What is AgentConnect?'
         pro_email: Professional email
diff --git a/config/locales/views/agent_connect/agent/fr.yml b/config/locales/views/agent_connect/agent/fr.yml
index 5e5e02708..75f72459f 100644
--- a/config/locales/views/agent_connect/agent/fr.yml
+++ b/config/locales/views/agent_connect/agent/fr.yml
@@ -15,8 +15,7 @@ fr:
           </ul>
         you_are_a_citizen: Vous êtes un particulier ?
         citizen_page: Accéder à notre page dédiée
-        connect_html: |
-          <h1 class="mt-2 mb-2">Connectez-vous</h1>
-          <p><b class="bold">Avec AgentConnect</b></p>
+        connect: Connectez-vous
+        signin_with: "S'identifier avec"
         whats_agentconnect: 'Quʼest ce quʼAgentConnect ?'
         pro_email: Email professionnel