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 @@
-
+
{{t "pages.timed-challenge-instructions.primary" time=this.allocatedTime htmlSafe=true}}
-
+
-
+
{{t "pages.timed-challenge-instructions.secondary"}}
-
+
-
-

-
{{this.allocatedTime}}
-
+
+
{{this.allocatedTime}}
-
-
- {{t "pages.timed-challenge-instructions.action"}}
-
-
+
+ {{t "pages.timed-challenge-instructions.action"}}
+
\ 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 @@
-
-

-
-
+

+
+
{{t "pages.focused-certification-challenge-instructions.title"}}
-
+
-
+
{{t "pages.focused-certification-challenge-instructions.description"}}
-
+
-
-
- {{t "pages.focused-certification-challenge-instructions.action"}}
-
-
+
+ {{t "pages.focused-certification-challenge-instructions.action"}}
+
\ No newline at end of file