From 4fa0e66bde41f3954e7610657c0414b7ff7f0aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Meneuvrier?= <hmeneuvrier@gmail.com>
Date: Thu, 19 Sep 2024 17:07:48 +0200
Subject: [PATCH 1/2] ui dashboard and stats #3011

---
 .../vue/components/common/HistoMultiSelect.vue  |  4 ++--
 .../vue/components/common/HistoSelect.vue       |  2 +-
 .../common/external/HistoDataTable.vue          | 17 +++++++++++------
 .../dashboard/TheHistoAppDashboard.vue          |  2 +-
 .../dashboard/TheHistoDashboardCards.vue        |  1 +
 .../components/SignalementListFilters.vue       |  6 ------
 .../vue/components/stats/TheHistoAppStats.vue   |  2 +-
 .../components/stats/TheHistoStatsDetails.vue   |  6 +++++-
 .../stats/TheHistoStatsDetailsItem.vue          |  1 +
 .../components/stats/TheHistoStatsFilters.vue   |  5 +++++
 10 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/assets/scripts/vue/components/common/HistoMultiSelect.vue b/assets/scripts/vue/components/common/HistoMultiSelect.vue
index aa8ad6032..223913a53 100644
--- a/assets/scripts/vue/components/common/HistoMultiSelect.vue
+++ b/assets/scripts/vue/components/common/HistoMultiSelect.vue
@@ -140,7 +140,7 @@ export default defineComponent({
   }
 
   .histo-multi-select .selector {
-    background-color: #FFF;
+    background-color: var(--background-contrast-grey);
     cursor: pointer;
   }
   .histo-multi-select.inactive .selector {
@@ -153,7 +153,7 @@ export default defineComponent({
     width: 100%;
     font-size: 1rem;
     line-height: 1.5rem;
-    background-color: #FFF;
+    background-color: var(--background-contrast-grey);
     border-radius: 4px;
   }
 
diff --git a/assets/scripts/vue/components/common/HistoSelect.vue b/assets/scripts/vue/components/common/HistoSelect.vue
index 29cac575f..401e80f56 100644
--- a/assets/scripts/vue/components/common/HistoSelect.vue
+++ b/assets/scripts/vue/components/common/HistoSelect.vue
@@ -72,6 +72,6 @@ export default defineComponent({
 
 <style>
   .histo-select select {
-    background-color: #FFF;
+    background-color: var(--background-contrast-grey);
   }
 </style>
diff --git a/assets/scripts/vue/components/common/external/HistoDataTable.vue b/assets/scripts/vue/components/common/external/HistoDataTable.vue
index 3673211e4..5d8b8430a 100644
--- a/assets/scripts/vue/components/common/external/HistoDataTable.vue
+++ b/assets/scripts/vue/components/common/external/HistoDataTable.vue
@@ -54,8 +54,14 @@ export default defineComponent({
 <style>
   @import 'datatables.net-dt';
 
+  .histo-data-table table {
+    border: 1px solid var(--border-contrast-grey);
+  }
+
   .histo-data-table table thead {
-    color: var(--blue-france-sun-113-625);
+    color: var(--text-default-grey);
+    background-color: var(--background-alt-grey);
+    text-decoration: underline;
   }
 
   .histo-data-table table.dataTable.display tbody td {
@@ -63,9 +69,7 @@ export default defineComponent({
     background-color: #FFF;
     text-align: left;
   }
-  .histo-data-table table.dataTable.display > tbody > tr.odd > td {
-    background-color: #CACAFBA6;
-  }
+
   .histo-data-table table.dataTable.display > tbody > tr.even > td.sorting_1, .histo-data-table table.dataTable.display > tbody > tr.odd > td.sorting_1 {
     box-shadow: none;
   }
@@ -78,11 +82,12 @@ export default defineComponent({
   }
   .histo-data-table .dataTables_wrapper .dataTables_paginate .paginate_button.current {
     border: 0px;
-    background: var(--blue-france-850-200);
+    background-color: var(--background-active-blue-france);
+    color: var(--text-inverted-blue-france) !important;
   }
   .histo-data-table .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
     color: #161616 !important;
     background-color: #E5E5E5;
-
+    --hover-tint: var(--hover);
   }
 </style>
diff --git a/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue b/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue
index ddf558807..fed043e90 100644
--- a/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue
+++ b/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue
@@ -247,7 +247,7 @@ export default defineComponent({
 
 <style>
   #app-dashboard {
-    background-color: #F6F6F6;
+    background-color: #fff;
     height: 100%;
   }
 </style>
diff --git a/assets/scripts/vue/components/dashboard/TheHistoDashboardCards.vue b/assets/scripts/vue/components/dashboard/TheHistoDashboardCards.vue
index 5a3a91ff5..6694bb5f4 100644
--- a/assets/scripts/vue/components/dashboard/TheHistoDashboardCards.vue
+++ b/assets/scripts/vue/components/dashboard/TheHistoDashboardCards.vue
@@ -293,6 +293,7 @@ export default defineComponent({
 <style>
   .histo-dashboard-cards .fr-card .fr-card__body {
     padding: 1.5rem;
+    box-shadow: 0px 3px 6px #16161633;
   }
   .histo-dashboard-cards .fr-card .fr-card__content {
     padding: 0px;
diff --git a/assets/scripts/vue/components/signalement-list/components/SignalementListFilters.vue b/assets/scripts/vue/components/signalement-list/components/SignalementListFilters.vue
index b46a17a21..52d8243f3 100644
--- a/assets/scripts/vue/components/signalement-list/components/SignalementListFilters.vue
+++ b/assets/scripts/vue/components/signalement-list/components/SignalementListFilters.vue
@@ -511,12 +511,6 @@ export default defineComponent({
 </script>
 <style>
   .grey-background {
-    .histo-select select {
-      background-color: var(--background-contrast-grey);
-    }
-    .histo-multi-select .selector {
-      background-color: var(--background-contrast-grey);
-    }
     .histo-date-picker input {
       background-color: var(--background-contrast-grey);
       box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
diff --git a/assets/scripts/vue/components/stats/TheHistoAppStats.vue b/assets/scripts/vue/components/stats/TheHistoAppStats.vue
index 6e04a6f2f..1821d74f5 100644
--- a/assets/scripts/vue/components/stats/TheHistoAppStats.vue
+++ b/assets/scripts/vue/components/stats/TheHistoAppStats.vue
@@ -194,7 +194,7 @@ export default defineComponent({
 
 <style>
   .histo-app-stats {
-    background-color: var(--background-alt-grey);
+    background-color: #FFF;
   }
 
   .histo-app-stats a {
diff --git a/assets/scripts/vue/components/stats/TheHistoStatsDetails.vue b/assets/scripts/vue/components/stats/TheHistoStatsDetails.vue
index e3faf02eb..4a48a4768 100644
--- a/assets/scripts/vue/components/stats/TheHistoStatsDetails.vue
+++ b/assets/scripts/vue/components/stats/TheHistoStatsDetails.vue
@@ -10,7 +10,7 @@
           <template #title>Criticité moyenne</template>
         </TheHistoStatsDetailsItem>
 
-        <div class="fr-col-12">
+        <div class="fr-col-12 histo-chart-line">
           <HistoChartLine :items=sharedState.stats.countSignalementPerMonth>
             <template #title>Nombre total de signalements</template>
           </HistoChartLine>
@@ -146,4 +146,8 @@ export default defineComponent({
     font-style: italic;
     font-size: 0.8rem;
   }
+
+  .histo-chart-line {
+    border: 1px solid var(--blue-france-sun-113-625);
+  }
 </style>
diff --git a/assets/scripts/vue/components/stats/TheHistoStatsDetailsItem.vue b/assets/scripts/vue/components/stats/TheHistoStatsDetailsItem.vue
index 92a6d3160..be9487aed 100644
--- a/assets/scripts/vue/components/stats/TheHistoStatsDetailsItem.vue
+++ b/assets/scripts/vue/components/stats/TheHistoStatsDetailsItem.vue
@@ -25,6 +25,7 @@ export default defineComponent({
     font-weight: bold;
     background: #FFF;
     padding: 1rem 0.5rem;
+    border: 1px solid var(--border-default-grey);
   }
   .histo-stats-details-item div p:first-child {
     font-size: 0.8rem;
diff --git a/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue b/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue
index 584f39adf..52a5e99f1 100644
--- a/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue
+++ b/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue
@@ -172,4 +172,9 @@ export default defineComponent({
     color: var(--blue-france-sun-113-625);
     --icon-size: 1.1rem;
   }
+  .histo-date-picker input {
+    background-color: var(--background-contrast-grey);
+    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
+    border-radius: .25rem .25rem 0 0;
+  }
 </style>

From 76760fbbc48aa2ee84c6dfe812c6f247e56d033c Mon Sep 17 00:00:00 2001
From: emilschn <emilien.schneider@beta.gouv.fr>
Date: Fri, 20 Sep 2024 11:58:37 +0200
Subject: [PATCH 2/2] remove useless styles #3011

---
 .../vue/components/dashboard/TheHistoAppDashboard.vue     | 1 -
 assets/scripts/vue/components/stats/TheHistoAppStats.vue  | 8 --------
 .../scripts/vue/components/stats/TheHistoStatsFilters.vue | 2 +-
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue b/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue
index fed043e90..5408a28b3 100644
--- a/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue
+++ b/assets/scripts/vue/components/dashboard/TheHistoAppDashboard.vue
@@ -247,7 +247,6 @@ export default defineComponent({
 
 <style>
   #app-dashboard {
-    background-color: #fff;
     height: 100%;
   }
 </style>
diff --git a/assets/scripts/vue/components/stats/TheHistoAppStats.vue b/assets/scripts/vue/components/stats/TheHistoAppStats.vue
index 1821d74f5..c686c9920 100644
--- a/assets/scripts/vue/components/stats/TheHistoAppStats.vue
+++ b/assets/scripts/vue/components/stats/TheHistoAppStats.vue
@@ -193,14 +193,6 @@ export default defineComponent({
 </script>
 
 <style>
-  .histo-app-stats {
-    background-color: #FFF;
-  }
-
-  .histo-app-stats a {
-    color: var(--blue-france-sun-113-625);
-  }
-
   .loading {
     font-size: 2rem;
   }
diff --git a/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue b/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue
index 52a5e99f1..3c70dd35a 100644
--- a/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue
+++ b/assets/scripts/vue/components/stats/TheHistoStatsFilters.vue
@@ -75,7 +75,7 @@
           </HistoCheckbox>
         </div>
         <div class="fr-col-12 fr-col-lg-12 fr-col-xl-3 align-right">
-          <a href="#" @click="onReinitLocalEvent"><span class="fr-fi-refresh-line"></span>Tout réinitialiser</a>
+          <a href="#" @click="onReinitLocalEvent" class="fr-link"><span class="fr-fi-refresh-line"></span>Tout réinitialiser</a>
         </div>
       </div>
     </div>