feat: uniformize import report and list design

PnX-SI · Oct 16, 2024 · 39b109a · 39b109a
1 parent c7bb770
commit 39b109a
Show file tree

Hide file tree

Showing 5 changed files with 317 additions and 316 deletions.
diff --git a/frontend/src/app/modules/imports/components/import_list/import-list.component.html b/frontend/src/app/modules/imports/components/import_list/import-list.component.html
@@ -3,8 +3,8 @@
   data-qa="import-list"
 >
   <div class="card">
-    <div class="card-header">
-      <h5 class="card-title mb-0">Liste des imports</h5>
+    <div class="card-header d-flex flex-column justify-content-center ImportList__title">
+      <h5 class="card-title">Liste des imports</h5>
     </div>
     <div class="card-body">
       <div *ngIf="!empty; else emptyBlock">

diff --git a/frontend/src/app/modules/imports/components/import_list/import-list.component.scss b/frontend/src/app/modules/imports/components/import_list/import-list.component.scss
@@ -7,6 +7,12 @@ $icon-size: 19px;
 }
 
 .ImportList {
+  &__title {
+    h5 {
+      margin: 0;
+    }
+  }
+
   .Toolbar {
     display: flex;
     flex-flow: row wrap;
@@ -23,14 +29,37 @@ $icon-size: 19px;
     &__destinations {
       max-width: 200px;
     }
+
     &__search {
       input {
         max-height: 36px;
+
         &::placeholder {
-          color: #999; /* default theme ng-placehodler color */
+          color: #999;
+          /* default theme ng-placehodler color */
         }
       }
     }
+
+    .card-header {
+      height: 64px;
+
+      h5 {
+        margin: 0;
+      }
+    }
+
+    .button {
+      margin-top: -0.5 * $line-tb-padding !important;
+      padding: 0 !important;
+      height: 2 * $icon-size !important;
+      width: 2 * $icon-size !important;
+
+      mat-icon {
+        font-size: $icon-size !important;
+        margin: auto;
+      }
+    }
   }
 
   .Datatable {
@@ -39,6 +68,7 @@ $icon-size: 19px;
     ::ng-deep .datatable-header-cell,
     ::ng-deep .datatable-body-cell {
       padding: $line-tb-padding $line-tb-padding * 0.5 !important;
+
       .datatable-body-cell-label,
       .datatable-body-cell-label p {
         overflow-y: hidden;
@@ -56,21 +86,25 @@ $icon-size: 19px;
       ::ng-deep .datatable-row-left {
         background-color: rgb(238, 238, 238) !important;
       }
+
       ::ng-deep .datatable-row-right {
         background-color: rgb(238, 238, 238) !important;
       }
     }
 
     ::ng-deep .datatable-row-left {
       background-color: #fff;
+
       .datatable-body-cell {
         text-align: left;
       }
     }
+
     ::ng-deep .datatable-row-right {
       .datatable-body-cell {
         background-color: inherit;
-        transform: translate3d(12px, 0px, 0px); /* trick to remove extra space on the right */
+        transform: translate3d(12px, 0px, 0px);
+        /* trick to remove extra space on the right */
         text-align: right;
         padding: 0 !important;
         margin: auto !important;
@@ -82,15 +116,18 @@ $icon-size: 19px;
       padding: $icon-size / 4;
       height: 2 * $icon-size !important;
       width: 2 * $icon-size !important;
+
       mat-icon {
         font-size: $icon-size !important;
       }
+
       &:disabled {
         color: rgba(0, 0, 0, $button-disabled-opacity) !important;
       }
 
       &Tooltip {
         filter: opacity(0.6);
+
         &--disabled {
           filter: opacity($button-disabled-opacity);
         }

diff --git a/.../src/app/modules/imports/components/import_process/import-step/import-step.component.html b/.../src/app/modules/imports/components/import_process/import-step/import-step.component.html
@@ -41,8 +41,8 @@ <h4 class="card-header">
     data-qa="import-recapitulatif"
   >
     <h3 class="title mb-0">Récapitulatif avant import</h3>
-    <div class="card">
-      <h4 class="card-header">
+    <div class="card card-margin">
+      <h4 class="card-header card-margin">
         <mat-icon>build</mat-icon>
         Rapports
       </h4>