Merge pull request #3070 from MTES-MCT/bugfix/3011-bo---stats-et-dash…

…board-uniformisation-couleur-fond [BO - stats et dashboard] uniformisation couleur fond
MTES-MCT · Sep 20, 2024 · b183154 · b183154
2 parents 8a9f4d4 + 76760fb
commit b183154
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 26 deletions.
diff --git 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
@@ -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
@@ -54,18 +54,22 @@ 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 {
  box-shadow: none;
  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
@@ -247,7 +247,6 @@ export default defineComponent({
 
 <style>
  #app-dashboard {
- background-color: #F6F6F6;
  height: 100%;
  }
 </style>
diff --git 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
@@ -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
@@ -193,14 +193,6 @@ export default defineComponent({
 </script>
 
 <style>
- .histo-app-stats {
- background-color: var(--background-alt-grey);
- }
-
- .histo-app-stats a {
- color: var(--blue-france-sun-113-625);
- }
-
  .loading {
  font-size: 2rem;
  }

diff --git 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
@@ -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
@@ -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>
@@ -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>