From 5e35289ae403ef2a7663831a57c106169648f014 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 16 Dec 2024 18:55:44 +0000
Subject: [PATCH] fix(slider): light theme styles

---
 .../Form/Settings/Slider/Slider.jsx           | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/Form/Settings/Slider/Slider.jsx b/src/components/Form/Settings/Slider/Slider.jsx
index 6fe70a93..41eadd4e 100644
--- a/src/components/Form/Settings/Slider/Slider.jsx
+++ b/src/components/Form/Settings/Slider/Slider.jsx
@@ -2,7 +2,7 @@ import variables from 'config/variables';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import ReactSlider from 'react-slider';
-import { MdRefresh, MdSpeed } from 'react-icons/md';
+import { MdRefresh } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
 
 function SliderComponent(props) {
@@ -12,9 +12,7 @@ function SliderComponent(props) {
 
   const handleChange = (newValue) => {
     if (typeof newValue !== 'number') return;
-
     newValue = Math.min(Math.max(newValue, props.min), props.max);
-
     localStorage.setItem(props.name, newValue);
     setValue(newValue);
 
@@ -47,18 +45,19 @@ function SliderComponent(props) {
   return (
     <div className="w-full">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-sm font-medium">{props.title}</span>
+        <span className="text-sm font-medium text-neutral-800 dark:text-white">{props.title}</span>
         <div className="flex items-center gap-2 justify-between w-full">
-          <span className="text-sm bg-white/15 px-3 py-1.5 rounded-md font-medium">
+          <span className="text-sm bg-neutral-200 dark:bg-white/15 text-neutral-800 dark:text-white px-3 py-1.5 rounded-md font-medium">
             {value}
             {props.display}
           </span>
           <button
             onClick={resetItem}
             className="inline-flex items-center text-sm px-3 py-1.5 rounded-md
-              bg-white/10 hover:bg-white/15 active:bg-white/20
-              dark:bg-white/5 dark:hover:bg-white/10 dark:active:bg-white/15
-              transition-colors duration-200 font-medium"
+              bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400
+              dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20
+              transition-colors duration-200 font-medium
+              text-neutral-800 dark:text-white"
           >
             <MdRefresh className="w-4 h-4 mr-1.5" />
             {variables.getMessage('settings:buttons.reset')}
@@ -77,36 +76,40 @@ function SliderComponent(props) {
         className="h-14 flex items-center"
         thumbClassName={`
           w-5 h-5 rounded-full 
-          bg-gradient-to-br from-white to-neutral-100
+          bg-gradient-to-br from-neutral-50 to-neutral-200
+          dark:from-white dark:to-neutral-100
           cursor-pointer
-          focus:outline-none focus:ring-2 focus:ring-white/40
-          hover:from-white hover:to-neutral-200
+          focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:focus:ring-white/40
+          hover:from-neutral-100 hover:to-neutral-300
+          dark:hover:from-white dark:hover:to-neutral-200
           active:scale-95
           transition-all duration-200
           flex items-center justify-center
-          shadow-lg shadow-black/25
+          shadow-lg shadow-black/10 dark:shadow-black/25
           absolute top-1/2 transform -translate-y-1/2
           before:content-[attr(aria-valuenow)]
           before:absolute before:top-[-28px]
-          before:text-xs before:bg-black/90 before:text-white
-          before:px-2 before:py-1 before:rounded-md
+          before:text-xs before:bg-neutral-800 dark:before:bg-black/90 
+          before:text-white before:px-2 before:py-1 before:rounded-md
           before:opacity-0 hover:before:opacity-100
           before:transition-all before:duration-200 before:whitespace-nowrap
           before:shadow-lg
         `}
-        trackClassName="h-2 bg-white/15 rounded-full absolute top-1/2 transform -translate-y-1/2"
+        trackClassName="h-2 bg-neutral-300 dark:bg-white/15 rounded-full absolute top-1/2 transform -translate-y-1/2"
         markClassName={`
-          h-3 w-1.5 bg-white/30 rounded-full cursor-pointer
-          hover:bg-white/50 hover:scale-110
+          h-3 w-1.5 bg-neutral-400 dark:bg-white/30 rounded-full cursor-pointer
+          hover:bg-neutral-600 dark:hover:bg-white/50 hover:scale-110
           hover:transition-transform hover:duration-200
           absolute top-1/2 transform -translate-y-1/2
+          select-none
           after:content-[attr(data-value)]
           after:absolute after:top-5
           after:text-xs after:opacity-85
           after:transform after:-translate-x-1/2
           after:whitespace-nowrap
+          after:pointer-events-none
           after:font-medium
-          after:text-white/85
+          after:text-neutral-700 dark:after:text-white/85
         `}
         renderThumb={(props, state) => (
           <div
@@ -123,7 +126,12 @@ function SliderComponent(props) {
             return (
               <div
                 {...props}
-                onClick={() => handleMarkClick(props.key)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleMarkClick(props.key);
+                }}
+                onMouseDown={(e) => e.preventDefault()}
                 data-value={multiplierMarks[props.key]}
                 role="button"
                 tabIndex={0}
@@ -131,6 +139,7 @@ function SliderComponent(props) {
                 className={`${props.className} cursor-pointer`}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
                     handleMarkClick(props.key);
                   }
                 }}