From d4cb4c560e7919e6719bc40efa4c9e98909bd035 Mon Sep 17 00:00:00 2001
From: mcampourcy <mireille.campourcy@pix.fr>
Date: Tue, 19 Nov 2024 15:28:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20admin:=20Add=20PixIcon=20f?=
 =?UTF-8?q?or=20common=20responsive=20mobile=20or=20tablet=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/tubes-details/tube.gjs  | 20 ++++++++++---------
 .../common/tubes-selection/tube.gjs           | 20 ++++++++++---------
 .../components/common/tubes-selection.scss    | 13 +++++-------
 .../styles/components/layout/menu-bar.scss    |  6 +++---
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/admin/app/components/common/tubes-details/tube.gjs b/admin/app/components/common/tubes-details/tube.gjs
index ea7b63f85cc..a43e44128a5 100644
--- a/admin/app/components/common/tubes-details/tube.gjs
+++ b/admin/app/components/common/tubes-details/tube.gjs
@@ -1,4 +1,4 @@
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -17,6 +17,14 @@ export default class Tube extends Component {
     }
   }
 
+  get mobileIcon() {
+    return this.args.mobile ? 'mobile' : 'mobileOff';
+  }
+
+  get tabletIcon() {
+    return this.args.tablet ? 'tablet' : 'tabletOff';
+  }
+
   <template>
     <td data-testid="title-{{@id}}">
       {{@title}}
@@ -42,20 +50,14 @@ export default class Tube extends Component {
           aria-label="{{if @mobile 'compatible mobile' 'incompatible mobile'}}"
           data-testid="mobile-compliant-{{@id}}"
         >
-          <FaIcon @icon="mobile-screen-button" class="fa-2x {{if @mobile 'is-responsive'}}" />
-          {{#unless @mobile}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.mobileIcon}} @plainIcon={{true}} class="{{if @mobile 'is-responsive'}}" />
         </div>
         <div
           class="icon-container"
           aria-label="{{if @tablet 'compatible tablette' 'incompatible tablette'}}"
           data-testid="tablet-compliant-{{@id}}"
         >
-          <FaIcon @icon="tablet-screen-button" class="fa-2x {{if @tablet 'is-responsive'}}" />
-          {{#unless @tablet}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.tabletIcon}} @plainIcon={{true}} class="{{if @mobile 'is-responsive'}}" />
         </div>
       </td>
     {{/if}}
diff --git a/admin/app/components/common/tubes-selection/tube.gjs b/admin/app/components/common/tubes-selection/tube.gjs
index 364c86df6b3..d684c95b2f1 100644
--- a/admin/app/components/common/tubes-selection/tube.gjs
+++ b/admin/app/components/common/tubes-selection/tube.gjs
@@ -1,8 +1,8 @@
 import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -47,6 +47,14 @@ export default class Tube extends Component {
     return this.state === 'checked';
   }
 
+  get mobileIcon() {
+    return this.args.tube.mobile ? 'mobile' : 'mobileOff';
+  }
+
+  get tabletIcon() {
+    return this.args.tube.tablet ? 'tablet' : 'tabletOff';
+  }
+
   @action
   onChange(event) {
     if (event.target.checked) {
@@ -102,16 +110,10 @@ export default class Tube extends Component {
     {{#if @displayDeviceCompatibility}}
       <td class="table__column--center">
         <div class="icon-container" aria-label="{{if @tube.mobile 'compatible mobile' 'incompatible mobile'}}">
-          <FaIcon @icon="mobile-screen-button" class="fa-2x {{if @tube.mobile 'is-responsive'}}" />
-          {{#unless @tube.mobile}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.mobileIcon}} @plainIcon={{true}} class="{{if @tube.mobile 'is-responsive'}}" />
         </div>
         <div class="icon-container" aria-label="{{if @tube.tablet 'compatible tablette' 'incompatible tablette'}}">
-          <FaIcon @icon="tablet-screen-button" class="fa-2x {{if @tube.tablet 'is-responsive'}}" />
-          {{#unless @tube.tablet}}
-            <FaIcon @icon="slash" class="fa-2x not-responsive" />
-          {{/unless}}
+          <PixIcon @name={{this.tabletIcon}} @plainIcon={{true}} class="{{if @tube.tablet 'is-responsive'}}" />
         </div>
       </td>
     {{/if}}
diff --git a/admin/app/styles/components/common/tubes-selection.scss b/admin/app/styles/components/common/tubes-selection.scss
index aaaac9017b3..dabf5286683 100644
--- a/admin/app/styles/components/common/tubes-selection.scss
+++ b/admin/app/styles/components/common/tubes-selection.scss
@@ -44,16 +44,13 @@
 }
 
 .select-tube-table {
-  .is-responsive {
-    color: var(--pix-success-700);
+  .icon-container > svg {
+    width: 1.8rem;
+    height: 1.8rem;
   }
 
-  .not-responsive {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    color: var(--pix-error-700);
-    transform: translate(-50%, -50%);
+  .is-responsive {
+    color: var(--pix-success-700);
   }
 
   table {
diff --git a/admin/app/styles/components/layout/menu-bar.scss b/admin/app/styles/components/layout/menu-bar.scss
index b568af77ef7..860e0ca97ad 100644
--- a/admin/app/styles/components/layout/menu-bar.scss
+++ b/admin/app/styles/components/layout/menu-bar.scss
@@ -14,11 +14,11 @@
 
       a {
         display: flex;
+        align-items: center;
         width: 50px;
+        height: 50px;
         border-radius: 5px;
         cursor: pointer;
-        height: 50px;
-        align-items: center;
 
         &:hover {
           text-decoration: none;
@@ -30,9 +30,9 @@
         }
 
         svg {
-          fill: var(--pix-neutral-100);
           width: 32px;
           margin: 0 10px;
+          fill: var(--pix-neutral-100);
         }
 
         &:hover svg,