mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 13:34:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(slider): light theme styles

Browse Source
This commit is contained in:
alexsparkes
2024-12-16 18:55:44 +00:00
parent c518d51431
commit 5e35289ae4
1 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Form/Settings/Slider/Slider.jsx
View File

@@ -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);
}
}}