[Update/Refactor] UI: Slider component. Adjust color and code.

src-ui/app/_index_css/variables.css

@@ -16,6 +16,8 @@
     --primary_800_color: #2c6759;
     --primary_900_color: #214b3f;
 
+    --primary_600_color_44: #36877744;
+
     --sent_400_color: #6197b4;
     --received_300_color: #a861b4;
 

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx

@@ -1,22 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import styles from "./Slider.module.scss";
 import MUI_Slider from "@mui/material/Slider";
 import { clsx } from "clsx";
 
 export const Slider = (props) => {
-    const [baseColor, setBaseColor] = useState("");
-    const [activeColor, setActiveColor] = useState("");
-    const [toolTipColor, setToolTipColor] = useState("");
-
-    useEffect(() => {
-        const baseColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_700_color");
-        setBaseColor(baseColor.trim());
-        const activeColor = getComputedStyle(document.documentElement).getPropertyValue("--primary_600_color");
-        setActiveColor(activeColor.trim());
-        const toolTipColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_800_color");
-        setToolTipColor(toolTipColor.trim());
-    }, []);
-
     return (
         <div className={clsx(styles.container, props.className)}>
             <MUI_Slider
@@ -34,15 +21,15 @@ export const Slider = (props) => {
                 orientation={props.orientation}
                 valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : props.variable}`}
                 sx={{
-                    color: baseColor,
+                    color: "var(--dark_700_color)",
                     "& .MuiSlider-thumb": {
-                        backgroundColor: activeColor,
+                        backgroundColor: "var(--primary_600_color)",
                         "&:hover, &.Mui-focusVisible, &.Mui-active": {
-                            boxShadow: `0 0 0 0.8rem ${activeColor}44`,
+                            boxShadow: `0 0 0 0.8rem var(--primary_600_color_44)`,
                         },
                         "& .MuiSlider-valueLabel": {
                             fontSize: "1.4rem",
-                            backgroundColor: toolTipColor,
+                            backgroundColor: "var(--dark_800_color)",
                             padding: "0.6rem 1rem",
                             lineHeight: "1.15",
                             // top: "-1.4rem",
@@ -56,11 +43,11 @@ export const Slider = (props) => {
                     },
                     "& .MuiSlider-markLabel": {
                         fontSize: "1.4rem",
-                        color: "white",
+                        color: "var(--dark_550_color)",
                         whiteSpace: "nowrap",
                     },
                     "& .MuiSlider-markLabelActive": {
-                        color: activeColor,
+                        color: "var(--primary_300_color)",
                     },
                 }}
             />

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss

@@ -1,30 +1,12 @@
 .container {
     display: flex;
     flex-direction: column;
-    align-items: center; // 中央に揃え
+    align-items: center;
     justify-content: center;
     width: 100%;
-    // padding-left: 4rem;
 }
 
 .range_slider {
-    // スライダーの幅を調整（必要に応じて調整）
-    height: 200px; // 縦スライダーの高さ
-    padding: 10px 0; // スライダーの上下のパディング
-
-    & .MuiSlider-thumb {
-        // スライダーのつまみのサイズを調整
-        height: 24px;
-        width: 24px;
-        margin-top: -12px; // つまみが中心に来るように調整
-    }
-
-    & .MuiSlider-track {
-        height: 2px; // トラックの高さを調整
-    }
-
-    & .MuiSlider-vertical {
-        // 縦スライダー用のスタイル
-        height: 100%; // コンテナの高さにフィット
-    }
-}
+    height: 200px;
+    padding: 10px 0;
+}