💄 mon-pix: apply design modification on not certifiable page

Author: AndreiaPena

mon-pix/app/components/certification-not-certifiable.hbs

@@ -5,10 +5,7 @@
   <p class="certification-not-certifiable__text">
     {{t "pages.certification-not-certifiable.text"}}
   </p>
-  <LinkTo
-    @route="authenticated"
-    class="button button--link button--big button--thin certification-not-certifiable__button"
-  >
+  <PixButtonLink @route="authenticated" class="certification-not-certifiable__button">
     {{t "pages.certification-not-certifiable.action.back"}}
-  </LinkTo>
+  </PixButtonLink>
 </PixBlock>

mon-pix/app/styles/components/_certification-not-certifiable.scss

@@ -1,38 +1,32 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/typography';
 
-.certification-not-certifiable__panel {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-right: 10px;
-  margin-bottom: 50px;
-  margin-left: 10px;
-  padding: var(--pix-spacing-8x);
-  text-rendering: optimizelegibility;
-
-  @include breakpoints.device-is('desktop') {
-    padding: 50px 70px 40px;
+.certification-not-certifiable {
+
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: var(--pix-spacing-3x) 0;
+    padding: var(--pix-spacing-4x) var(--pix-spacing-4x) var(--pix-spacing-12x) var(--pix-spacing-4x);
+
+    @include breakpoints.device-is('tablet') {
+      margin: var(--pix-spacing-6x) 0;
+    }
   }
-}
-
-.certification-not-certifiable__button {
-  margin-top: 20px;
-}
 
-.certification-not-certifiable__title {
-  @extend %pix-title-m;
-
-  text-align: center;
-}
+  &__button {
+    margin-top: 20px;
+  }
 
-.certification-not-certifiable__text {
-  @extend %pix-body-l;
+  &__title {
+    @extend %pix-title-m;
+  }
 
-  margin-top: var(--pix-spacing-4x);
-  text-align: center;
+  &__text {
+    @extend %pix-body-l;
 
-  @include breakpoints.device-is('desktop') {
-    max-width: 850px;
+    margin-top: var(--pix-spacing-4x);
+    text-align: center;
   }
 }