From ed4a101fae550968761f278cd1d7666e823bf62a Mon Sep 17 00:00:00 2001
From: AndreiaPena <andreia.pena@pix.fr>
Date: Wed, 6 Nov 2024 17:07:19 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20mon-pix:=20improve=20focus?=
 =?UTF-8?q?=20and=20time=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timed-challenge-instructions.hbs          | 30 +++++-------
 ...-certification-challenge-instructions.scss | 35 ++++----------
 .../_timed-challenge-instructions.scss        | 48 ++++++-------------
 ...d-certification-challenge-instructions.hbs | 29 +++++------
 4 files changed, 50 insertions(+), 92 deletions(-)

diff --git a/mon-pix/app/components/timed-challenge-instructions.hbs b/mon-pix/app/components/timed-challenge-instructions.hbs
index 5d9f8db63ce..97398ea3522 100644
--- a/mon-pix/app/components/timed-challenge-instructions.hbs
+++ b/mon-pix/app/components/timed-challenge-instructions.hbs
@@ -1,26 +1,22 @@
 <div class="rounded-panel rounded-panel--no-margin-bottom timed-challenge-instructions">
-  <div class="timed-challenge-instructions__primary">
+  <h1 class="timed-challenge-instructions__primary">
     {{t "pages.timed-challenge-instructions.primary" time=this.allocatedTime htmlSafe=true}}
-  </div>
+  </h1>
 
-  <div class="timed-challenge-instructions__secondary">
+  <p class="timed-challenge-instructions__secondary">
     {{t "pages.timed-challenge-instructions.secondary"}}
-  </div>
+  </p>
 
   <div class="timed-challenge-instructions__allocated-time">
-    <div class="timed-challenge-instructions-allocated-time__gauge">
-      <img class="timed-challenge-instructions-gauge__icon" src="/images/icons/icon-timed-challenge.svg" alt="" />
-      <span class="timed-challenge-instructions-gauge__value">{{this.allocatedTime}}</span>
-    </div>
+    <PixIcon @name="clock" @ariaHidden={{true}} class="timed-challenge-instructions-allocated-time__icon" />
+    <span>{{this.allocatedTime}}</span>
   </div>
 
-  <div class="timed-challenge-instructions__action">
-    <PixButton
-      @triggerAction={{@hasUserConfirmedWarning}}
-      class="timed-challenge-instructions-action__confirmation-button"
-      @variant="success"
-    >
-      {{t "pages.timed-challenge-instructions.action"}}
-    </PixButton>
-  </div>
+  <PixButton
+    @triggerAction={{@hasUserConfirmedWarning}}
+    class="timed-challenge-instructions-action__confirmation-button"
+    @variant="success"
+  >
+    {{t "pages.timed-challenge-instructions.action"}}
+  </PixButton>
 </div>
\ No newline at end of file
diff --git a/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss b/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss
index 7f379f69f06..c8aba9d7325 100644
--- a/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss
+++ b/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss
@@ -10,44 +10,27 @@
   justify-content: center;
 
   &__image {
-    img {
-      width: 158px;
-      height: 158px;
-    }
+    width: 158px;
+    height: 158px;
   }
 
   &__title {
-    margin-top: 22px;
+    @extend %pix-title-l;
+
+    margin: var(--pix-spacing-6x) 0;
     color: var(--pix-neutral-800);
-    font-size: 3rem;
-    font-family: $font-open-sans;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 56px;
   }
 
   &__description {
+    @extend %pix-body-l;
+
     max-width: 450px;
-    margin-top: 24px;
-    margin-bottom: 50px;
+    margin-bottom: var(--pix-spacing-6x);
     color: var(--pix-neutral-800);
-    font-weight: 500;
-    font-size: 1.25rem;
-    font-family: $font-roboto;
-    font-style: normal;
-    font-stretch: normal;
     text-align: center;
   }
 
-  &__action {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.focused-challenge-instructions-action {
   &__confirmation-button {
-    font-size: 0.875rem;
-    text-transform: uppercase;
+    margin-top: var(--pix-spacing-6x);
   }
 }
diff --git a/mon-pix/app/styles/components/_timed-challenge-instructions.scss b/mon-pix/app/styles/components/_timed-challenge-instructions.scss
index 7f29aa3ab6d..2cef95ffca3 100644
--- a/mon-pix/app/styles/components/_timed-challenge-instructions.scss
+++ b/mon-pix/app/styles/components/_timed-challenge-instructions.scss
@@ -1,27 +1,25 @@
 .timed-challenge-instructions {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding: var(--pix-spacing-10x) var(--pix-spacing-6x);
   overflow: hidden;
   text-align: center;
 
   &__primary {
-    margin-top: 22px;
+    @extend %pix-title-s;
+
     color: var(--pix-neutral-800);
     font-weight: var(--pix-font-bold);
-    font-size: 1.5rem;
-    font-style: normal;
-    font-stretch: normal;
   }
 
   &__secondary {
-    margin-top: 9px;
+    @extend %pix-body-l;
+
+    margin-top: var(--pix-spacing-3x);
     margin-bottom: 50px;
     color: var(--pix-neutral-800);
-    font-size: 1.125rem;
-    font-style: normal;
-    font-stretch: normal;
   }
 
   &__time {
@@ -29,44 +27,28 @@
   }
 
   &__allocated-time {
-    color: var(--pix-neutral-800);
-    font-size: 1.7375rem;
-  }
-
-  &__action {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.timed-challenge-instructions-allocated-time {
-  &__gauge {
     display: flex;
-    flex-direction: row;
+    gap: var(--pix-spacing-2x);
     align-items: center;
-    justify-content: center;
-    width: fit-content;
     height: 50px;
     margin: 0 auto;
-    padding: 4px 12px;
-    line-height: 3.125rem;
+    padding: var(--pix-spacing-1x) var(--pix-spacing-3x);
+    color: var(--pix-neutral-800);
+    font-size: 1.5rem;
     background-color: var(--pix-neutral-20);
     border-radius: 7px;
   }
 }
 
-.timed-challenge-instructions-gauge {
+.timed-challenge-instructions-allocated-time {
   &__icon {
-    width: 42px;
-    padding-right: 6px;
-    padding-bottom: 6px;
+    width: 2.5rem;
+    fill: var(--pix-neutral-800);
   }
 }
 
 .timed-challenge-instructions-action {
   &__confirmation-button {
-    margin-top: 22px;
-    font-size: 0.875rem;
-    text-transform: uppercase;
+    margin-top: var(--pix-spacing-6x);
   }
 }
diff --git a/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs b/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs
index 49f332a1c17..cd91863f957 100644
--- a/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs
+++ b/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs
@@ -1,22 +1,19 @@
 <div class="focused-certification-challenge-instructions">
-  <div class="focused-certification-challenge-instructions__image">
-    <img src="/images/icone-pix-focus-rounded.svg" alt="" />
-  </div>
-  <div class="focused-certification-challenge-instructions__title">
+  <img src="/images/icone-pix-focus-rounded.svg" alt="" class="focused-certification-challenge-instructions__image" />
+
+  <h1 class="focused-certification-challenge-instructions__title">
     {{t "pages.focused-certification-challenge-instructions.title"}}
-  </div>
+  </h1>
 
-  <div class="focused-certification-challenge-instructions__description">
+  <p class="focused-certification-challenge-instructions__description">
     {{t "pages.focused-certification-challenge-instructions.description"}}
-  </div>
+  </p>
 
-  <div class="focused-certification-challenge-instructions__action">
-    <PixButton
-      @triggerAction={{@hasUserConfirmedWarning}}
-      class="focused-certification-challenge-instructions-action__confirmation-button"
-      @variant="success"
-    >
-      {{t "pages.focused-certification-challenge-instructions.action"}}
-    </PixButton>
-  </div>
+  <PixButton
+    @triggerAction={{@hasUserConfirmedWarning}}
+    class="focused-certification-challenge-instructions__confirmation-button"
+    @variant="success"
+  >
+    {{t "pages.focused-certification-challenge-instructions.action"}}
+  </PixButton>
 </div>
\ No newline at end of file