Remets les boutons d'accueil ISO à la maquette

betagouv · Sep 14, 2022 · d5da1c6 · d5da1c6
1 parent 394d1ef
commit d5da1c6
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 101 deletions.
diff --git a/src/situations/accueil/assets/precedent.svg b/src/situations/accueil/assets/precedent.svg
diff --git a/src/situations/accueil/assets/suivant.svg b/src/situations/accueil/assets/suivant.svg
diff --git a/src/situations/accueil/infra/depot_ressources_accueil.js b/src/situations/accueil/infra/depot_ressources_accueil.js
@@ -2,8 +2,6 @@ import DepotRessourcesCommunes from 'commun/infra/depot_ressources_communes';
 import fondAccueil from 'accueil/assets/fond-accueil.jpg';
 import casque from 'commun/assets/casque.svg';
 import personnage from 'accueil/assets/personnage.png';
-import precedent from 'accueil/assets/precedent.svg';
-import suivant from 'accueil/assets/suivant.svg';
 import avatarFin from 'accueil/assets/avatar-fin.png';
 import consigneAccueil from 'accueil/assets/consigne_accueil.mp3';
 import avatarAvis from 'accueil/assets/avatar-avis.svg';
@@ -33,7 +31,7 @@ const AUDIOS_RESULTAT = {
 export default class DepotRessourcesAccueil extends DepotRessourcesCommunes {
   constructor (chargeurs) {
     super(chargeurs, messagesVideos, AUDIOS_RESULTAT, fondAccueil, consigneAccueil);
-    this.charge([fondAccueil, personnage, precedent, suivant, casque, avatarFin, avatarAvis, avatarDeconnexion, boutonAvis]);
+    this.charge([fondAccueil, personnage, casque, avatarFin, avatarAvis, avatarDeconnexion, boutonAvis]);
     this.chargeContexte(batimentsContext);
     this.batiments = extraitDictionnaire(batimentsContext, /batiment-(.+)\.png/);
   }
@@ -46,14 +44,6 @@ export default class DepotRessourcesAccueil extends DepotRessourcesCommunes {
     return this.ressource(personnage);
   }
 
-  precedent () {
-    return this.ressource(precedent);
-  }
-
-  suivant () {
-    return this.ressource(suivant);
-  }
-
   casque () {
     return this.ressource(casque);
   }

diff --git a/src/situations/accueil/styles/accueil.scss b/src/situations/accueil/styles/accueil.scss
@@ -6,6 +6,9 @@
   display: flex;
   flex-direction: column;
   @include conteneur;
+  .conteneur {
+    background-color: #A2ADAF;
+  }
 
   .titre {
     display: flex;
@@ -57,21 +60,30 @@
     z-index: 100;
   }
 
-  .bouton-navigation-situation {
-    @include bouton($couleur-fond-bouton-bleu, $couleur-fond-bouton-bleu-focus);
-    border-radius: 3.125rem;
-  }
-
-  .bouton-et-etiquette {
-    &:not(.desactivee) {
-      &:hover {
-        .bouton-navigation-situation {
-          background-color: $couleur-fond-bouton-bleu-focus;
+  .fleche-navigation-situation {
+    display: flex;
+    background: none;
+    &.desactivee {
+      svg {
+        path {
+          fill: $bleu-gris;
         }
       }
     }
+  }
+
+  .bouton-et-etiquette {
     &.desactivee {
       pointer-events: none;
+      span {
+        opacity: 1;
+        color: $bleu-gris;
+      }
+    }
+    .bouton-arrondi {
+      font-size: 1rem;
+      line-height: 1.188rem;
+      padding: 0.5rem 1.5rem;
     }
   }
 
@@ -90,4 +102,20 @@
       color: $couleur-fond;
     }
   }
+
+  .actions-accueil {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+
+    .bouton-commence-situation {
+      border: 2px solid $eva-light;
+      font-size: 1.125rem;
+    }
+  }
 }
diff --git a/src/situations/accueil/vues/accueil.vue b/src/situations/accueil/vues/accueil.vue
@@ -35,25 +35,34 @@
          />
       </div>
     </div>
-    <div class="actions">
+    <div class="actions-accueil">
       <div
         :class="{ desactivee: precedentDesactivee }"
         class="bouton-et-etiquette"
         @click="indexBatiment--"
       >
         <button
           :disabled="precedentDesactivee"
-          class="bouton-navigation-situation"
+          class="fleche-navigation-situation"
          >
-          <img :src="precedent">
+          <svg width="36" height="36" viewBox="0 0 36 36" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="18" cy="18" r="17" fill="white"/>
+            <path fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36ZM7.93934 19.0607L17.4853 28.6066C18.0711 29.1924 19.0208 29.1924 19.6066 28.6066C20.1924 28.0208 20.1924 27.0711 19.6066 26.4853L12.6213 19.5H27C27.8284 19.5 28.5 18.8284 28.5 18C28.5 17.1716 27.8284 16.5 27 16.5H12.6213L19.6066 9.51472C20.1924 8.92893 20.1924 7.97919 19.6066 7.3934C19.0208 6.80761 18.0711 6.80761 17.4853 7.3934L7.93934 16.9393C7.35355 17.5251 7.35355 18.4749 7.93934 19.0607Z"
+                  fill="#6E84FE"
+            />
+          </svg>
         </button>
-        <span>{{ $traduction('accueil.precedent') }}</span>
+        <span class="bouton-arrondi bouton-arrondi-blanc">
+          {{ $traduction('accueil.precedent') }}
+        </span>
       </div>
       <div>
         <acces-situation
           v-if="afficheBoutonSituation"
           :situation="batiments[indexBatiment]"
-          class="bouton-arrondi"
+          class="bouton-arrondi commence-situation"
         />
       </div>
       <div
@@ -63,11 +72,21 @@
       >
         <button
           :disabled="suivantDesactivee"
-          class="bouton-navigation-situation"
+          :class="{ desactivee: suivantDesactivee }"
+          class="fleche-navigation-situation"
          >
-          <img :src="suivant">
+          <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="18" cy="18" r="17" fill="white"/>
+            <path fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M18 1.57361e-06C8.05887 2.44269e-06 -2.44269e-06 8.05888 -1.57361e-06 18C-7.04529e-07 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 7.04529e-07 18 1.57361e-06ZM28.0607 16.9393L18.5147 7.3934C17.9289 6.80761 16.9792 6.80761 16.3934 7.3934C15.8076 7.97918 15.8076 8.92893 16.3934 9.51472L23.3787 16.5L9 16.5C8.17157 16.5 7.5 17.1716 7.5 18C7.5 18.8284 8.17157 19.5 9 19.5L23.3787 19.5L16.3934 26.4853C15.8076 27.0711 15.8076 28.0208 16.3934 28.6066C16.9792 29.1924 17.9289 29.1924 18.5147 28.6066L28.0607 19.0607C28.6464 18.4749 28.6464 17.5251 28.0607 16.9393Z"
+                  fill="#6E84FE"
+            />
+          </svg>
         </button>
-        <span>{{ $traduction('accueil.suivant') }}</span>
+        <span class="bouton-arrondi bouton-arrondi-blanc">
+          {{ $traduction('accueil.suivant') }}
+        </span>
       </div>
     </div>
     <formulaire-identification :force-campagne="forceCampagne" :force-nom="forceNom" />
@@ -131,8 +150,6 @@ export default {
       altLogo: traduction('alt-logo'),
       fondAccueil: `url(${this.$depotRessources.fondAccueil().src})`,
       personnage: this.$depotRessources.personnage().src,
-      precedent: this.$depotRessources.precedent().src,
-      suivant: this.$depotRessources.suivant().src,
       indexBatiment: indexPrecedent,
       ecranFinAfficher: false,
       annonceGenerale: process.env.ANNONCE_GENERALE

diff --git a/src/situations/commun/styles/boutons.scss b/src/situations/commun/styles/boutons.scss
@@ -1,7 +1,7 @@
 @import 'commun/styles/variables.scss';
 @import 'commun/styles/mixins/boutons.scss';
 
-@mixin bouton-arrondi-couleur($couleur, $couleur-focus) {
+@mixin bouton-couleur($couleur, $couleur-focus) {
   background-color: $couleur;
 
   &:hover,
@@ -11,7 +11,7 @@
 }
 
 .bouton-arrondi {
-  @include bouton-arrondi-couleur($couleur-fond-bouton-bleu, $couleur-fond-bouton-bleu-focus);
+  @include bouton-couleur($couleur-fond-bouton-bleu, $couleur-fond-bouton-bleu-focus);
   padding: .5rem 2.5rem;
   text-decoration: none;
   border-radius: 2rem;
@@ -60,16 +60,21 @@
   }
 
   &-rouge {
-    @include bouton-arrondi-couleur($couleur-fond-bouton-rouge, $couleur-fond-bouton-rouge-focus);
+    @include bouton-couleur($couleur-fond-bouton-rouge, $couleur-fond-bouton-rouge-focus);
   }
 
   &-vert {
-    @include bouton-arrondi-couleur($couleur-fond-bouton-vert, $couleur-fond-bouton-vert-focus);
+    @include bouton-couleur($couleur-fond-bouton-vert, $couleur-fond-bouton-vert-focus);
     color: $couleur-texte;
   }
 
   &-orange {
-    @include bouton-arrondi-couleur($couleur-fond-bouton-orange, $couleur-fond-bouton-orange-focus);
+    @include bouton-couleur($couleur-fond-bouton-orange, $couleur-fond-bouton-orange-focus);
+  }
+
+  &-blanc {
+    @include bouton-couleur($couleur-fond-bouton-blanc, $couleur-fond-bouton-blanc-focus);
+    color: $couleur-texte;
   }
 }
 

diff --git a/src/situations/commun/styles/variables.scss b/src/situations/commun/styles/variables.scss
@@ -11,6 +11,7 @@ $gris-clair: #DDDDDD;
 $orange: #FDAF54;
 $bleu-gris: #D6DAEC;
 $bleu-gris-fonce: #7b83b0;
+$eva-light: #fbf9fa;
 
 // branding & style-guide
 $couleur-sombre: $bleu-fonce;
@@ -20,7 +21,7 @@ $couleur-legere-accent-et-validation: $vert-clair;
 $couleur-clair: $gris-clair;
 
 // général
-$couleur-fond: #fbf9fa;
+$couleur-fond: $eva-light;
 $couleur-texte: $couleur-sombre;
 
 // boutons
@@ -29,6 +30,8 @@ $couleur-fond-bouton-vert: $vert-clair;
 $couleur-fond-bouton-vert-focus: darken($vert-clair, 10%);
 $couleur-fond-bouton-bleu: $bleu;
 $couleur-fond-bouton-bleu-focus: darken($bleu, 10%);
+$couleur-fond-bouton-blanc: $blanc;
+$couleur-fond-bouton-blanc-focus: darken($blanc, 10%);
 $couleur-ombre: rgba(0, 0, 0, 0.31);
 $couleur-fond-bouton-rouge: $rouge;
 $couleur-fond-bouton-rouge-focus: darken($rouge, 10%);