[FEATURE] Ajustements sur les mires d'inscription/connexion (pix-15056)

 #10435

mon-pix/app/components/authentication-layout/header.gjs

@@ -1,6 +1,19 @@
-<template>
-  <header class="authentication-layout-header" role="banner">
-    <img class="authentication-layout-header__pix-logo" alt="" role="presentation" src="/images/pix-logo.svg" />
-    {{yield}}
-  </header>
-</template>
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class Header extends Component {
+  @service url;
+
+  get showcase() {
+    return this.url.showcase;
+  }
+
+  <template>
+    <header class="authentication-layout-header" role="banner">
+      <a href={{this.showcase.url}} class="pix-logo__link">
+        <img class="pix-logo__image" src="/images/pix-logo.svg" alt="{{this.showcase.linkText}}" />
+      </a>
+      {{yield}}
+    </header>
+  </template>
+}

mon-pix/app/components/authentication-layout/index.scss

@@ -1,5 +1,5 @@
 .authentication-layout {
-  width: 100vw;
+  width: 100%;
   min-height: 100vh;
   background-color: var(--pix-neutral-0);
 
@@ -15,6 +15,15 @@
   }
 }
 
+@include device-is('tablet'){
+  .authentication-layout {
+    .authentication-layout__main {
+      width: 70%;
+      margin: 0 auto;
+    }
+  }
+}
+
 @include device-is('desktop') {
   .authentication-layout {
       display: grid;
@@ -51,15 +60,14 @@
         flex-direction: column;
         grid-column: 7 / span 5;
         width: 100%;
-        padding: 0;
-
-        > main {
-          flex-grow: 1;
-        }
+        max-width: 800px;
+        padding: 20px auto;
       }
   }
 }
 
+
+
 .authentication-layout-header {
   display: flex;
   align-items: center;
@@ -73,7 +81,7 @@
 
 .authentication-layout-footer {
   width: 100%;
-  margin-top: var(--pix-spacing-10x);
+  margin-top: var(--pix-spacing-12x);
 
   .footer-container-content__navigation {
     margin-top: var(--pix-spacing-2x);
@@ -85,10 +93,10 @@
 
       text-decoration: underline;
     }
-  }
 
-  .footer-navigation__item{
-    margin: 0 var(--pix-spacing-3x) 0 0;
+    .footer-navigation__item {
+      margin: 0 var(--pix-spacing-3x) 0 0;
+    }
   }
 }
 

mon-pix/app/components/language-switcher.hbs

@@ -1,4 +1,5 @@
 <PixSelect
+  class="language-switcher"
   @id="language-switcher"
   @icon="earth-europe"
   @value={{this.selectedLanguage}}

mon-pix/app/services/url.js

@@ -137,6 +137,9 @@ export default class Url extends Service {
     if (currentLanguage === ENGLISH_INTERNATIONAL_LOCALE) {
       return `https://pix.${this.currentDomain.getExtension()}/en`;
     }
+    if (currentLanguage === DUTCH_INTERNATIONAL_LOCALE) {
+      return `https://pix.${this.currentDomain.getExtension()}/nl-be`;
+    }
     return `https://pix.${this.currentDomain.getExtension()}`;
   }
 

mon-pix/app/styles/app.scss

@@ -59,6 +59,7 @@ of an adaptative/mobile-first approach — refactoring is welcome here */
 @import 'components/footer';
 @import 'components/form-textfield';
 @import 'components/hexagon-score';
+@import 'components/language-switcher';
 @import 'components/learning-more-tutorial-panel';
 @import 'components/levelup-notif';
 @import 'components/login-form';

mon-pix/app/styles/components/language-switcher.scss

@@ -0,0 +1,3 @@
+.language-switcher {
+  min-width: 170px;
+}