From fcad40ec66617dd15d683fca787c829ba4be5eb8 Mon Sep 17 00:00:00 2001
From: shidorien <gaetangerard@hotmail.fr>
Date: Sun, 7 Jan 2024 00:26:10 +0100
Subject: [PATCH] Update filter panel component

---
 .../filter-panel.component.tsx                     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/maps-mangement-components/filter-panel.component.tsx b/src/renderer/components/maps-mangement-components/filter-panel.component.tsx
index 5332c5ce..c9f701b7 100644
--- a/src/renderer/components/maps-mangement-components/filter-panel.component.tsx
+++ b/src/renderer/components/maps-mangement-components/filter-panel.component.tsx
@@ -56,7 +56,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
     const renderDurationLabel = (sec: number): JSX.Element => {
         const textValue = (() => {
             if (sec === MIN_DURATION) {
-                return t("maps.map-filter-panel.duration");
+                return "0";
             }
             if (sec === MAX_DURATION) {
                 return "∞";
@@ -72,7 +72,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
     const renderNpsLabel = (nps: number): JSX.Element => {
         const textValue = (() => {
             if (nps === MIN_NPS) {
-                return "NPS";
+                return "0"
             }
             if (nps === MAX_NPS) {
                 return "∞";
@@ -167,9 +167,13 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
 
     return !playlist ? (
         <motion.div ref={ref} className={`${className} bg-light-main-color-2 dark:bg-main-color-3`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-            <div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-2">
-                <BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
-                <BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
+
+            <div className="w-full h-8 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-1">
+
+              <BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
+              <BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
+              <span className=" text-sm font-bold text-center mt-[10px]">{t("maps.map-filter-panel.nps")}</span>
+              <span className=" text-sm font-bold text-center mt-[10px]">{t("maps.map-filter-panel.duration")}</span>
             </div>
             <div className="w-full h-full flex gap-x-2">
                 <section className="shrink-0">