fix(fundings): update table styles

Author: Mihoub2

client/src/boards/financements-par-aap/pages/structures/components/projects-data/datatable.tsx

@@ -18,7 +18,7 @@ export default function DataTable({ aggregations, columns, dataTable, filters, n
       if ((id === sorting?.id) && (sorting?.order === 'desc')) icon = <i className="ri-sort-desc" />
       return (
         <button
-          className="button-action border p-1 rounded"
+          className="fr-btn fundings-datatable__test1"
           onClick={() => handleSort(column)}
         >
           {icon}
@@ -67,24 +67,24 @@ export default function DataTable({ aggregations, columns, dataTable, filters, n
             <div className="fr-table__content">
               <table>
                 <thead>
-                  <tr className="test0">
+                  <tr>
                     {columns.map((column) => {
                       return (
-                        <th className="test1" key={column.id} scope="col">
+                        <th key={column.id} scope="col">
                           {column.isPlaceholder ? null : (
                             <>
-                              <span className="test2 first">
+                              <div className="test">
                                 {column?.label ?? column.id}
                                 {' '}
-                                {column?.isFilterable && <i className="ri-filter-line" />}
+                                {column?.isFilterable}
                                 {' '}
                                 {getSortableIcon(column)}
-                              </span>
-                              <div className="test2 second">
+                              </div>
+                              <div>
                                 {column?.isFilterable && (
                                   column?.isFilterableBySelect && aggregations?.[column.id] ? (
                                     <select
-                                      className="fr-select"
+                                      className="fr-select fundings-datatable__test3"
                                       id={`fundings-structure-data-${column.id}`}
                                       name={`fundings-structure-data-${column.id}`}
                                       onChange={(event) => handleFilter(column, event)}
@@ -101,7 +101,7 @@ export default function DataTable({ aggregations, columns, dataTable, filters, n
                                     </select>
                                   ) : (
                                     <input
-                                      className="border"
+                                      className="fr-input fundings-datatable__test2"
                                       onChange={(event) => handleFilter(column, event)}
                                       type="text"
                                       value={inputs[column.id]}

client/src/boards/financements-par-aap/pages/structures/components/projects-data/style.scss

@@ -1,103 +1,10 @@
-// .button-action:hover {
-//   background-color: var(--background-contrast-grey-hover);
-//   border-radius: 5px;
-// }
-
-// .button-action:disabled,
-// .button-action[disabled] {
-//   background-color: transparent;
-// }
-
-// input.border {
-//   border: 1px solid white;
-// }
-
-// .fundings-datatable {
-//   border-spacing: 0;
-//   font-size: 12px;
-//   width: 100%;
-
-//   input, select {
-//     font-size: 12px;
-//     line-height: 12px;
-//   }
-
-//   thead tr {
-//     background-color: var(--background-alt-grey);
-//     text-align: left;
-
-//     th {
-//       div:nth-child(1) {
-//         height: 50px;
-//       }
-//     }
-//   }
-
-//   thead th,
-//   tbody td {
-//     padding: 5px;
-//   }
-
-//   tbody tr {
-//     &:nth-child(even) {
-//       background-color: var(--background-alt-grey);
-//     }
-//     &:nth-child(odd) {
-//       background-color: var(--background-default-grey-hover);
-//     }
-
-//     &:hover {
-//       background-color: var(--background-contrast-blue-ecume);
-//     }
-//   }
-// }
-.fundings-datatable {
-  // .test0 {
-  //   align-items: center;
-  //   display: flex;
-  //   &.first {
-  //     flex-grow: 2;
-  //   }
-  // }
-
-  .test1 {
-    padding: 5px;
-    height: 120px;
-
-    &:last-child {
-
-      .test2 {
-              background-color: red;
-display: flex;
-justify-content: flex-start;
-height: 100%;
-      }
-    }
-  }
-
-  .test2 {
-    padding: 10;
-    display: block;
-    
-    &.first {
-      height: 50px;
-    }
-    &.second {
-      // height: 25px;
-      // font-size: 0.20px;
-    }
-  }
-
-  input.border {
-    border: 1px solid white;
-  }
-}
-
 .fr-table.fr-table--sm {
   font-size: 0.75rem;
 
   th {
     font-size: 0.75rem;
+    vertical-align: top;
+    font-weight: 700;
   }
 
   td {
@@ -108,3 +15,28 @@ height: 100%;
     max-width: 0;
   }
 }
+
+.test {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+}
+
+.fundings-datatable__test1 {
+  min-height: unset;
+  padding: 0;
+  line-height: 1;
+}
+
+.fundings-datatable__test2 {
+  height: 2rem;
+  font-size: 0.75rem;
+  width: 100%;
+}
+
+.fundings-datatable__test3 {
+  height: 2rem;
+  font-size: 0.75rem;
+  width: 100%;
+}