feat(mon-pix): replace FaIcon in details of Module with PixIcon

Co-authored-by: Clément Latzarus <[email protected]> Co-authored-by: Eric Lim <[email protected]>
1024pix · Dec 16, 2024 · 21c2d5d · 21c2d5d
1 parent c40e0dc
commit 21c2d5d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/mon-pix/app/components/module/_details.scss b/mon-pix/app/components/module/_details.scss
@@ -85,15 +85,16 @@
   &__title {
     @extend %pix-body-xs;
 
+    display: flex;
+    align-items: center;
     color: var(--pix-neutral-800);
-    text-align: center;
     text-transform: uppercase;
   }
 }
 
 .module-details-infos-indications-category-title {
   &__icon {
-    margin-right: var(--pix-spacing-2x);
+    margin-right: var(--pix-spacing-1x);
   }
 }
 

diff --git a/mon-pix/app/components/module/details.gjs b/mon-pix/app/components/module/details.gjs
@@ -1,8 +1,8 @@
 import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixModal from '@1024pix/pix-ui/components/pix-modal';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
@@ -135,17 +135,21 @@ export default class ModulixDetails extends Component {
         <div class="module-details-infos__indications">
           <div class="module-details-infos-indications__category">
             <div class="module-details-infos-indications-category__title">
-              <FaIcon @icon="stopwatch" class="module-details-infos-indications-category-title__icon" />{{t
-                "pages.modulix.details.duration"
-              }}
+              <PixIcon
+                @name="stopwatch"
+                class="module-details-infos-indications-category-title__icon"
+                @ariaHidden="true"
+              />{{t "pages.modulix.details.duration"}}
             </div>
             <p>{{t "pages.modulix.details.durationValue" htmlSafe=true duration=@module.details.duration}}</p>
           </div>
           <div class="module-details-infos-indications__category">
             <div class="module-details-infos-indications-category__title">
-              <FaIcon @icon="signal" class="module-details-infos-indications-category-title__icon" />{{t
-                "pages.modulix.details.level"
-              }}
+              <PixIcon
+                @name="barsUp"
+                class="module-details-infos-indications-category-title__icon"
+                @ariaHidden="true"
+              />{{t "pages.modulix.details.level"}}
             </div>
             <p>{{@module.details.level}}</p>
           </div>