From 52b38b65703b2ff786430b5c35f7cb97162a6bd6 Mon Sep 17 00:00:00 2001
From: Viktor Riabkov <vriabkov@scnsoft.com>
Date: Thu, 21 Mar 2024 16:26:26 +0800
Subject: [PATCH] Change styles of slider and remove css file

---
 src/entities/activity/ui/items/SliderItem.tsx | 32 ++++++------
 src/shared/ui/Items/Slider/index.tsx          | 50 ++++++++++++++-----
 src/shared/ui/Items/Slider/style.css          | 39 ---------------
 3 files changed, 55 insertions(+), 66 deletions(-)
 delete mode 100644 src/shared/ui/Items/Slider/style.css

diff --git a/src/entities/activity/ui/items/SliderItem.tsx b/src/entities/activity/ui/items/SliderItem.tsx
index 2e15e123c..84152973e 100644
--- a/src/entities/activity/ui/items/SliderItem.tsx
+++ b/src/entities/activity/ui/items/SliderItem.tsx
@@ -1,3 +1,5 @@
+import Box from '@mui/material/Box';
+
 import { SliderItem as SliderItemType } from '../../lib';
 
 import { SliderItemBase } from '~/shared/ui';
@@ -17,19 +19,21 @@ export const SliderItem = ({ value, item, onValueChange, isDisabled }: SliderIte
   };
 
   return (
-    <SliderItemBase
-      value={value ? value : responseValues.minValue.toString()}
-      minValue={responseValues.minValue}
-      minLabel={responseValues.minLabel}
-      minImage={responseValues.minImage}
-      maxValue={responseValues.maxValue}
-      maxLabel={responseValues.maxLabel}
-      maxImage={responseValues.maxImage}
-      onChange={onHandleValueChange}
-      disabled={isDisabled}
-      continiusSlider={config.continuousSlider}
-      showStickLabel={config.showTickLabels}
-      showStickMarks={config.showTickMarks}
-    />
+    <Box padding="0px 16px">
+      <SliderItemBase
+        value={value ? value : responseValues.minValue.toString()}
+        minValue={responseValues.minValue}
+        minLabel={responseValues.minLabel}
+        minImage={responseValues.minImage}
+        maxValue={responseValues.maxValue}
+        maxLabel={responseValues.maxLabel}
+        maxImage={responseValues.maxImage}
+        onChange={onHandleValueChange}
+        disabled={isDisabled}
+        continiusSlider={config.continuousSlider}
+        showStickLabel={config.showTickLabels}
+        showStickMarks={config.showTickMarks}
+      />
+    </Box>
   );
 };
diff --git a/src/shared/ui/Items/Slider/index.tsx b/src/shared/ui/Items/Slider/index.tsx
index c3b4ce1cd..11a18d159 100644
--- a/src/shared/ui/Items/Slider/index.tsx
+++ b/src/shared/ui/Items/Slider/index.tsx
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 
+import Box from '@mui/material/Box';
 import Slider from '@mui/material/Slider';
 
 import { Theme } from '~/shared/constants';
-
-import './style.css';
+import { useCustomMediaQuery } from '~/shared/utils';
 
 type Props = {
   minImage: string | null;
@@ -41,6 +41,8 @@ export const SliderItemBase = (props: Props) => {
     showStickMarks,
   } = props;
 
+  const { lessThanSM } = useCustomMediaQuery();
+
   const defaultStep = 1;
 
   const marksAndLabelsList = useMemo(() => {
@@ -54,7 +56,7 @@ export const SliderItemBase = (props: Props) => {
   }, [maxValue, minValue]);
 
   return (
-    <div className={`slider-widget ${value ? 'no-value' : ''}`}>
+    <Box width="100%" margin="auto" className={`slider-widget ${value ? 'no-value' : ''}`}>
       <Slider
         size="medium"
         min={minValue}
@@ -63,7 +65,7 @@ export const SliderItemBase = (props: Props) => {
         disabled={disabled}
         marks={showStickLabel ? marksAndLabelsList : true} // The settings behavior: If boolean, marks will be evenly spaced based on the value of step. If an array, it should contain objects with value and an optional label keys.
         step={continiusSlider ? 0.1 : defaultStep}
-        valueLabelDisplay="auto"
+        valueLabelDisplay={continiusSlider ? 'off' : 'auto'}
         onChange={(e, value) => onChange(String(value))}
         sx={{
           height: '8px',
@@ -115,18 +117,40 @@ export const SliderItemBase = (props: Props) => {
         }}
       />
 
-      <div className="slider-description">
-        <div className="first" style={{ maxWidth: `100px` }}>
+      <Box display="flex" justifyContent="space-between">
+        <Box
+          position="relative"
+          sx={{
+            maxWidth: lessThanSM ? '44px' : '64px',
+            transform: 'translateX(-50%)',
+            '& > img': { borderRadius: '8px', overflow: 'hidden' },
+          }}
+        >
           {minImage && <img src={minImage} width="100%"></img>}
 
-          {minLabel && <div className="label">{minLabel}</div>}
-        </div>
-        <div className="last" style={{ maxWidth: `100px` }}>
+          {minLabel && (
+            <Box textAlign="center" fontSize={lessThanSM ? '14px' : '18px'}>
+              {minLabel}
+            </Box>
+          )}
+        </Box>
+        <Box
+          position="relative"
+          sx={{
+            maxWidth: lessThanSM ? '44px' : '64px',
+            transform: 'translateX(50%)',
+            '& > img': { borderRadius: '8px', overflow: 'hidden' },
+          }}
+        >
           {maxImage && <img src={maxImage} width="100%"></img>}
 
-          {maxLabel && <div className="label">{maxLabel}</div>}
-        </div>
-      </div>
-    </div>
+          {maxLabel && (
+            <Box textAlign="center" fontSize={lessThanSM ? '14px' : '18px'}>
+              {maxLabel}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
   );
 };
diff --git a/src/shared/ui/Items/Slider/style.css b/src/shared/ui/Items/Slider/style.css
deleted file mode 100644
index 672028ddb..000000000
--- a/src/shared/ui/Items/Slider/style.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.slider-widget {
-  width: 80%;
-  margin: auto;
-}
-
-.slider-widget .ticks {
-  display: flex;
-  justify-content: space-between;
-  padding: 5px;
-}
-
-.slider-widget .ticks .tick {
-  height: 10px;
-  width: 1px;
-  background: black;
-  display: flex;
-  justify-content: center;
-  line-height: 40px;
-}
-
-.slider-description {
-  display: flex;
-  justify-content: space-between;
-}
-
-.slider-description .label,
-.slider-description .label {
-  text-align: center;
-}
-
-.slider-description .first {
-  position: relative;
-  transform: translateX(-50%);
-}
-
-.slider-description .last {
-  position: relative;
-  transform: translateX(50%);
-}