[Update] Config Window: Add Switchbox component. Adjust switchbox in main window's main functions.

src-ui/utils/mixins.scss

@@ -29,7 +29,6 @@ $default_loader_line_width: 0.2rem !default;
         border-left: $loader_line_width solid transparent;
     }
 
-    // @keyframes
     @keyframes rotate_animation {
         0% {
             transform: translate($calc_translate, $calc_translate) rotate(0deg);
@@ -60,16 +59,12 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
     position: relative;
     height: 100%;
     width: auto;
-    padding-left: $toggle_width;
     .control {
-        position: absolute;
-        top: 0;
-        left: 0;
+        position: relative;
         height: $toggle_height;
         width: $toggle_width;
         border-radius: $toggle_radius;
         background-color: $toggle_background_color_off;
-        // transition: background-color $toggle_control_speed $toggle_control_ease;
         &:after {
             content: "";
             position: absolute;
@@ -101,7 +96,3 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
         }
     }
 }
-
-.toggle_control {
-    @include toggle_control_styles;
-}

src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx

@@ -7,6 +7,7 @@ export const Appearance = () => {
         DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
+        SwitchboxContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -27,6 +28,7 @@ export const Appearance = () => {
 
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
+            <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx

@@ -7,6 +7,7 @@ export const Appearance = () => {
         DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
+        SwitchboxContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -27,6 +28,7 @@ export const Appearance = () => {
 
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
+            <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/switchbox/Switchbox.jsx

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import { useState } from "react";
+import styles from "./Switchbox.module.scss";
+
+export const Switchbox = (props) => {
+
+    const [is_turned_on, setIsTurnedOn] = useState(false);
+    const [is_hovered, setIsHovered] = useState(false);
+    const [is_mouse_down, setIsMouseDown] = useState(false);
+
+    const getClassNames = (baseClass) => clsx(baseClass, {
+        [styles.is_active]: (is_turned_on === true),
+        // [styles.is_loading]: (currentState.state === "loading"),
+        [styles.is_hovered]: is_hovered,
+        [styles.is_mouse_down]: is_mouse_down,
+    });
+
+    const onMouseEnter = () => setIsHovered(true);
+    const onMouseLeave = () => setIsHovered(false);
+    const onMouseDown = () => setIsMouseDown(true);
+    const onMouseUp = () => setIsMouseDown(false);
+
+    const toggleFunction = () => {
+        setIsTurnedOn(!is_turned_on);
+    };
+
+
+    return (
+        <div className={styles.switchbox_container}>
+            <div className={styles.switchbox_wrapper}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            onClick={toggleFunction}
+            >
+                <div className={getClassNames(styles.toggle_control)}>
+                    <span className={getClassNames(styles.control)}></span>
+                </div>
+            </div>
+        </div>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/switchbox/Switchbox.module.scss

@@ -0,0 +1,25 @@
+@import "@scss_mixins";
+
+.switchbox_container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    height: 2rem;
+}
+
+.switchbox_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding: 2rem;
+    height: 100%;
+}
+
+.toggle_control {
+    @include toggle_control_styles;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx

@@ -3,6 +3,7 @@ import { LabelComponent } from "./label_component/LabelComponent";
 import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { Slider } from "./slider/Slider";
 import { Checkbox } from "./checkbox/Checkbox";
+import { Switchbox } from "./switchbox/Switchbox";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {
@@ -39,9 +40,19 @@ export const useSettingBox = () => {
         );
     };
 
+    const SwitchboxContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Switchbox {...props}/>
+            </div>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
+        SwitchboxContainer,
     };
 };

src-ui/windows/main_window/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss

@@ -82,6 +82,10 @@ $loading_label_color: var(--dark_500_color);
 
 .toggle_control {
     @include toggle_control_styles;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    width: 100%;
     &.is_compact_mode {
         display: none;
     }