[BUMP] Update dependency @1024pix/pix-ui to v53 (admin)

 #11090

admin/app/components/administration/index.gjs

@@ -6,7 +6,7 @@ import Nav from './nav';
   {{pageTitle "Administration"}}
   <div class="page">
     <header class="page-header">
-      <h1 class="page-title">Administration</h1>
+      <h1>Administration</h1>
       <div class="page-actions">
       </div>
     </header>

admin/app/components/administration/nav.scss

@@ -13,8 +13,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 0 $pix-spacing-s;
-    padding: 0 $pix-spacing-s;
+    margin: 0 var(--pix-spacing-4x);
+    padding: 0 var(--pix-spacing-4x);
     font-weight: 500;
     cursor: pointer;
 

admin/app/components/badges/badge.gjs

@@ -121,7 +121,7 @@ export default class Badge extends Component {
 
   <template>
     <header class="page-header">
-      <div class="page-title">
+      <div>
         <p>
           <LinkTo @route="authenticated.target-profiles.target-profile.insights">{{@targetProfile.name}}</LinkTo>
           <span class="wire">&nbsp;>&nbsp;</span>

admin/app/components/certification-centers/information.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable selector-class-pattern */
+@use 'pix-design-tokens/typography';
+
 .certification-center-information {
 
   &__edit-title{

admin/app/components/certification-centers/invitations-action.scss

@@ -5,13 +5,13 @@
 }
 
 .certification-center-invitations__heading {
-  margin-bottom: $pix-spacing-s;
+  margin-bottom: var(--pix-spacing-4x);
   font-size: 1.125rem;
 }
 
 .certification-center-invitations-form-container {
   display: flex;
-  gap: $pix-spacing-xs;
+  gap: var(--pix-spacing-2x);
   align-items: flex-end;
 }
 

admin/app/components/certifications/certification/details-v3.scss

@@ -1,8 +1,10 @@
+@use 'pix-design-tokens/typography';
+
 .certification-details-v3 {
    &__container {
      display: grid;
      grid-template-columns: 1fr 1fr;
-     gap: $pix-spacing-s;
+     gap: var(--pix-spacing-4x);
    }
 
   &__title {
@@ -40,7 +42,7 @@
 
 .certification-details-v3-list {
   &__completion-date {
-    margin-right: $pix-spacing-s;
+    margin-right: var(--pix-spacing-4x);
   }
 }
 
@@ -104,6 +106,6 @@
 
 .certification-details-v3-modal{
   &__live-alert-subcategory {
-    font-weight: $font-bold;
+    font-weight: var(--pix-font-bold);
   }
 }

admin/app/components/certifications/issue-report.scss

@@ -1,3 +1,5 @@
+@use 'pix-design-tokens/typography';
+
 .certification-issue-report {
   display: flex;
   align-items: center;
@@ -24,13 +26,13 @@
 
     &__label {
       color: var(--pix-neutral-500);
-      font-weight: $font-medium;
-      font-family: $font-roboto;
+      font-weight: var(--pix-font-medium);
+      @extend %pix-body-s;
     }
 
     &__resolution-message {
       color: var(--pix-neutral-100);
-      font-family: $font-roboto;
+      @extend %pix-body-s;
     }
   }
 }

admin/app/components/complementary-certifications/header.gjs

@@ -1,7 +1,7 @@
 import { LinkTo } from '@ember/routing';
 <template>
   <header class="page-header">
-    <div class="page-title">
+    <div>
       <LinkTo @route="authenticated.complementary-certifications.list">Toutes les certifications complémentaires</LinkTo>
       <span class="wire">&nbsp;>&nbsp;</span>
       <h1>{{@complementaryCertificationLabel}}</h1>

admin/app/components/stages/stage.gjs

@@ -14,7 +14,7 @@ export default class Stage extends Component {
 
   <template>
     <header class="page-header">
-      <div class="page-title">
+      <div>
         <p>
           <LinkTo @route="authenticated.target-profiles.target-profile.insights">{{@targetProfileName}}</LinkTo>
           <span class="wire">&nbsp;>&nbsp;</span>

admin/app/components/target-profiles/target-profile.gjs

@@ -169,7 +169,7 @@ export default class TargetProfile extends Component {
   <template>
     {{pageTitle "Profil " @model.id " | Pix Admin" replace=true}}
     <header class="page-header">
-      <div class="page-title">
+      <div>
         <LinkTo @route="authenticated.target-profiles.list">Tous les profils cibles</LinkTo>
         <span class="wire">&nbsp;>&nbsp;</span>
         <h1>{{@model.name}}</h1>

admin/app/styles/app.scss

@@ -1,116 +1,113 @@
-/* Pix UI */
-@import 'pix-design-tokens';
-
 /* global */
-@import 'globals/global';
-@import 'globals/form';
-@import 'globals/page';
-@import 'globals/page-details';
-@import 'globals/tables';
-@import 'globals/table-admin';
-@import 'globals/toggle';
+@use 'globals/global' as *;
+@use 'globals/form' as *;
+@use 'globals/page' as *;
+@use 'globals/page-details' as *;
+@use 'globals/tables' as *;
+@use 'globals/table-admin' as *;
+@use 'globals/toggle' as *;
 
 /* pages */
-@import 'login';
-@import 'authenticated';
-@import 'authenticated/campaigns/get';
-@import 'authenticated/certifications/index';
-@import 'authenticated/certifications/certification/details-v2';
-@import 'authenticated/certifications/certification/informations';
-@import 'authenticated/certification-center/index';
-@import 'authenticated/organizations/get';
-@import 'authenticated/organizations/all-tags';
-@import 'authenticated/sessions/list';
-@import 'authenticated/sessions/session/certifications';
-@import 'authenticated/sessions/session/informations';
-@import 'authenticated/smart-random-simulator/get-next-challenge';
-@import 'authenticated/tools';
-@import 'authenticated/users/list';
+@use 'login' as *;
+@use 'authenticated' as *;
+@use 'authenticated/campaigns/get' as *;
+@use 'authenticated/certifications/index' as *;
+@use 'authenticated/certifications/certification/details-v2' as *;
+@use 'authenticated/certifications/certification/informations' as *;
+@use 'authenticated/certification-center/index' as *;
+@use 'authenticated/organizations/get' as *;
+@use 'authenticated/organizations/all-tags' as *;
+@use 'authenticated/sessions/list' as *;
+@use 'authenticated/sessions/session/certifications' as *;
+@use 'authenticated/sessions/session/informations' as *;
+@use 'authenticated/smart-random-simulator/get-next-challenge' as *;
+@use 'authenticated/tools' as *;
+@use 'authenticated/users/list' as *;
 
 /* components */
-@import 'components/administration';
-@import 'components/administration/certification/certification-scoring-configuration';
-@import 'components/administration/certification/competence-scoring-configuration';
-@import 'components/administration/certification/flash-algorithm-configuration-form';
-@import 'components/administration/certification/sco-whitelist-configuration';
-@import 'components/administration/certification/scoring-simulator';
-@import 'components/autonomous-courses/details';
-@import 'components/autonomous-courses/form';
-@import 'components/badges/badge';
-@import 'components/campaigns/participations-section';
-@import 'components/campaigns/update';
-@import 'components/card';
-@import 'components/certification-center-invitations';
-@import 'components/certification-details-answer';
-@import 'components/certification-details-competence';
-@import 'components/certification-info-field';
-@import 'components/certification-info-tag';
-@import 'components/certification-issue-reports';
-@import 'components/certification/candidate-edit-modal';
-@import 'components/certification/certification-status-select';
-@import 'components/certification/competence-list';
-@import 'components/certified-profile';
-@import 'components/common/tick-or-cross';
-@import 'components/common/tubes-selection';
-@import 'components/complementary-certifications/attach-badges/header';
-@import 'components/complementary-certifications/attach-badges/list';
-@import 'components/complementary-certifications/attach-target-profile';
-@import 'components/complementary-certifications/details';
-@import 'components/complementary-certifications/link-to-current-target-profile';
-@import 'components/complementary-certifications/search-bar';
-@import 'components/complementary-certifications/selected-target-profile';
-@import 'components/confirm-popup';
-@import 'components/layout/breadcrumb';
-@import 'components/layout/menu-bar';
-@import 'components/organization-information-section';
-@import 'components/organization-invitations';
-@import 'components/organization-team-section';
-@import 'components/organizations/all-tags';
-@import 'components/organizations/archiving-confirmation-modal';
-@import 'components/organizations/campaigns-section';
-@import 'components/organizations/children/attach-child-form';
-@import 'components/organizations/list-items';
-@import 'components/organizations/places';
-@import 'components/organizations/places-lot-creation-form';
-@import 'components/participation-row';
-@import 'components/publish-session-button';
-@import 'components/sessions/jury-comment';
-@import 'components/sessions/list-items';
-@import 'components/smart-random-simulator/current-challenge';
-@import 'components/smart-random-simulator/previous-challenges';
-@import 'components/smart-random-simulator/tubes-viewer';
-@import 'components/stages/view-stage';
-@import 'components/target-profiles/badge-form';
-@import 'components/target-profiles/badges';
-@import 'components/target-profiles/details';
-@import 'components/target-profiles/insights';
-@import 'components/target-profiles/list-items';
-@import 'components/target-profiles/organizations';
-@import 'components/target-profiles/pdf-modal';
-@import 'components/target-profiles/stage-form';
-@import 'components/target-profiles/stages';
-@import 'components/target-profiles/target-profile';
-@import 'components/team/add-member';
-@import 'components/team/list';
-@import 'components/trainings/create-or-update-training-form';
-@import 'components/trainings/training-details-card';
-@import 'components/trainings/training-target-profiles-tab';
-@import 'components/trainings/training-triggers-tab';
-@import 'components/ui';
-@import 'components/users/authentication-method';
-@import 'components/users/cgu';
-@import 'components/users/organization-learners-table';
-@import 'components/users/user-overview';
-@import 'components/users/user-profile';
-@import 'display/footer-modal';
-@import 'flatpickr';
+@use 'components/administration' as *;
+@use 'components/administration/certification/certification-scoring-configuration' as *;
+@use 'components/administration/certification/competence-scoring-configuration' as *;
+@use 'components/administration/certification/flash-algorithm-configuration-form' as *;
+@use 'components/administration/certification/sco-whitelist-configuration' as *;
+@use 'components/administration/certification/scoring-simulator' as *;
+@use 'components/autonomous-courses/details' as *;
+@use 'components/autonomous-courses/form' as *;
+@use 'components/badges/badge' as *;
+@use 'components/campaigns/participations-section' as *;
+@use 'components/campaigns/update' as *;
+@use 'components/card' as *;
+@use 'components/certification-center-invitations' as *;
+@use 'components/certification-details-answer' as *;
+@use 'components/certification-details-competence' as *;
+@use 'components/certification-info-field' as *;
+@use 'components/certification-info-tag' as *;
+@use 'components/certification-issue-reports' as *;
+@use 'components/certification/candidate-edit-modal' as *;
+@use 'components/certification/certification-status-select' as *;
+@use 'components/certification/competence-list' as *;
+@use 'components/certified-profile' as *;
+@use 'components/common/tick-or-cross' as *;
+@use 'components/common/tubes-selection' as *;
+@use 'components/complementary-certifications/attach-badges/header' as *;
+@use 'components/complementary-certifications/attach-badges/list' as *;
+@use 'components/complementary-certifications/attach-target-profile' as *;
+@use 'components/complementary-certifications/details' as *;
+@use 'components/complementary-certifications/link-to-current-target-profile' as *;
+@use 'components/complementary-certifications/search-bar' as *;
+@use 'components/complementary-certifications/selected-target-profile' as *;
+@use 'components/confirm-popup' as *;
+@use 'components/layout/breadcrumb' as *;
+@use 'components/layout/menu-bar' as *;
+@use 'components/organization-information-section' as *;
+@use 'components/organization-invitations' as *;
+@use 'components/organization-team-section' as *;
+@use 'components/organizations/all-tags' as *;
+@use 'components/organizations/archiving-confirmation-modal' as *;
+@use 'components/organizations/campaigns-section' as *;
+@use 'components/organizations/children/attach-child-form' as *;
+@use 'components/organizations/list-items' as *;
+@use 'components/organizations/places' as *;
+@use 'components/organizations/places-lot-creation-form' as *;
+@use 'components/participation-row' as *;
+@use 'components/publish-session-button' as *;
+@use 'components/sessions/jury-comment' as *;
+@use 'components/sessions/list-items' as *;
+@use 'components/smart-random-simulator/current-challenge' as *;
+@use 'components/smart-random-simulator/previous-challenges' as *;
+@use 'components/smart-random-simulator/tubes-viewer' as *;
+@use 'components/stages/view-stage' as *;
+@use 'components/target-profiles/badge-form' as *;
+@use 'components/target-profiles/badges' as *;
+@use 'components/target-profiles/details' as *;
+@use 'components/target-profiles/insights' as *;
+@use 'components/target-profiles/list-items' as *;
+@use 'components/target-profiles/organizations' as *;
+@use 'components/target-profiles/pdf-modal' as *;
+@use 'components/target-profiles/stage-form' as *;
+@use 'components/target-profiles/stages' as *;
+@use 'components/target-profiles/target-profile' as *;
+@use 'components/team/add-member' as *;
+@use 'components/team/list' as *;
+@use 'components/trainings/create-or-update-training-form' as *;
+@use 'components/trainings/training-details-card' as *;
+@use 'components/trainings/training-target-profiles-tab' as *;
+@use 'components/trainings/training-triggers-tab' as *;
+@use 'components/ui' as *;
+@use 'components/users/authentication-method' as *;
+@use 'components/users/cgu' as *;
+@use 'components/users/organization-learners-table' as *;
+@use 'components/users/user-overview' as *;
+@use 'components/users/user-profile' as *;
+@use 'display/footer-modal' as *;
+@use 'flatpickr' as *;
 
 /* App/Components */
-@import 'certifications/issue-report';
-@import 'certifications/certification/details-v3';
-@import 'certification-centers/certification-center-form';
-@import 'certification-centers/information';
-@import 'certification-centers/member-item';
-@import 'certification-centers/membership-item';
-@import 'certification-centers/invitations-action';
-@import 'administration/nav';
+@use 'certifications/issue-report' as *;
+@use 'certifications/certification/details-v3' as *;
+@use 'certification-centers/certification-center-form' as *;
+@use 'certification-centers/information' as *;
+@use 'certification-centers/member-item' as *;
+@use 'certification-centers/membership-item' as *;
+@use 'certification-centers/invitations-action' as *;
+@use 'administration/nav' as *;

admin/app/styles/authenticated.scss

@@ -1,17 +1,14 @@
 /* stylelint-disable selector-class-pattern */
-$app-sidebar-width-sm: 80px;
-$app-header-height: 60px;
-
 .app-container {
   display: grid;
-  grid-template-columns: $app-sidebar-width-sm 1fr;
+  grid-template-columns: 80px 1fr;
 
   .app-sidebar {
     background-color: var(--pix-neutral-800);
 
     .app-logo {
       width: 100%;
-      height: $app-header-height;
+      height: 60px;
       text-align: center;
       border-bottom: 1px solid var(--pix-neutral-900);
 
@@ -20,7 +17,7 @@ $app-header-height: 60px;
         width: 100%;
         height: 100%;
         color: var(--pix-neutral-0);
-        line-height: $app-header-height;
+        line-height: 60px;
         text-decoration: none;
         background-color: var(--pix-primary-500);
       }

admin/app/styles/authenticated/certifications/certification/informations.scss

@@ -174,5 +174,5 @@
 
 .certification-information-comments {
   display: flex;
-  gap: $pix-spacing-xs;
+  gap: var(--pix-spacing-2x);
 }

admin/app/styles/authenticated/organizations/all-tags.scss

@@ -1,7 +1,7 @@
 .organization-all-tags-list {
   display: flex;
   flex-wrap: wrap;
-  gap: $pix-spacing-xs;
+  gap: var(--pix-spacing-2x);
   padding: 0;
   list-style: none;