feat(admin): improve authentication-methods tab styles

Author: bpetetot

admin/app/components/users/user-detail-personal-information/authentication-method.gjs

@@ -216,34 +216,30 @@ export default class AuthenticationMethod extends Component {
       <h2 class="page-section__title">Méthodes de connexion</h2>
     </header>
 
-    <ul>
-      <li class="authentication-method__connexions-information">
-        Date de dernière connexion :
+    <ul class="authentication-method__connexions-information">
+      <li>
+        <strong>Date de dernière connexion :</strong>
         {{#if @user.lastLoggedAt}}{{dayjsFormat @user.lastLoggedAt "DD/MM/YYYY"}}{{/if}}
       </li>
       {{#if @user.emailConfirmedAt}}
-        <li class="authentication-method__connexions-information">
-          Adresse e-mail confirmée le :
+        <li>
+          <strong>Adresse e-mail confirmée le :</strong>
           {{dayjsFormat @user.emailConfirmedAt "DD/MM/YYYY"}}
         </li>
       {{else}}
-        <li class="authentication-method__connexions-information">
-          Adresse e-mail non confirmée
+        <li>
+          <strong>Adresse e-mail non confirmée</strong>
         </li>
       {{/if}}
-    </ul>
-
-    {{#if this.hasPixAuthenticationMethod}}
-      <br />
-      <ul>
-        <li class="authentication-method__connexions-information">
-          {{t "components.users.user-detail-personal-information.authentication-method.should-change-password-status"}}
+      {{#if this.hasPixAuthenticationMethod}}
+        <li>
+          <strong>{{t
+              "components.users.user-detail-personal-information.authentication-method.should-change-password-status"
+            }}</strong>
           {{#if this.shouldChangePassword}}{{t "common.words.yes"}}{{else}}{{t "common.words.no"}}{{/if}}
         </li>
-      </ul>
-    {{/if}}
-
-    <br />
+      {{/if}}
+    </ul>
 
     <table class="authentication-method-table">
 

admin/app/styles/components/users/authentication-method.scss

@@ -1,15 +1,9 @@
 .authentication-method {
-
   &__connexions-information {
     display: flex;
-
-    dt {
-      font-weight: normal;
-    }
-
-    dd {
-      margin-left: 6px;
-    }
+    flex-direction: column;
+    margin-bottom: var(--pix-spacing-6x);
+    margin-left: var(--pix-spacing-6x);
   }
 }
 
@@ -21,37 +15,32 @@
   }
 
   &__name-column {
-    min-width: 200px;
+    padding-left: var(--pix-spacing-6x);
   }
 
   &__actions-column {
-
     > div {
       display: flex;
 
       button:not(:first-child) {
-        margin-left: 10px;
+        margin-left: var(--pix-spacing-3x);
       }
     }
   }
 
   &__check {
-    margin: 0 20px;
     color: var(--pix-success-700);
   }
 
   &__uncheck {
-    margin: 0 20px;
     color: var(--pix-neutral-100);
   }
 }
 
 .reassign-authentication-method-modal {
-
   &__form-body {
-
     p {
-      margin-bottom: 40px;
+      margin-bottom: var(--pix-spacing-10x);
       padding: 0;
     }
   }