♻️ admin: Add PixIcon for common responsive mobile or tablet icon

1024pix · Nov 19, 2024 · d4cb4c5 · d4cb4c5
1 parent e111708
commit d4cb4c5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,