[Update] Quick Settings: Add Overlay settings.

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx

@@ -1,12 +1,15 @@
 import styles from "./RightSideComponents.module.scss";
-
 import HelpSvg from "@images/help.svg?react";
 
+import { useStore_OpenedQuickSetting } from "@store";
+import { useIsEnabledOverlaySmallLog } from "@logics_configs";
+import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
+
 export const RightSideComponents = () => {
     return (
         <div className={styles.container}>
             <p>VRC mic mute sync</p>
-            <p>Overlay(VR)</p>
+            <OpenOverlayQuickSetting />
             <a
             className={styles.help_and_info_button}
             href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
@@ -17,4 +20,21 @@ export const RightSideComponents = () => {
             </a>
         </div>
     );
+};
+
+const OpenOverlayQuickSetting = () => {
+    const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("overlay");
+    };
+
+    return (
+        <OpenQuickSettingButton
+            label="Overlay(VR)"
+            variable={currentIsEnabledOverlaySmallLog.data}
+            onClickFunction={onClickFunction}
+        />
+    );
 };

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss

@@ -3,6 +3,7 @@
     flex-direction: row;
     align-items: center;
     gap: 1rem;
+    height: 100%;
 }
 
 .help_and_info_button {

src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import styles from "./OpenQuickSettingButton.module.scss";
+
+export const OpenQuickSettingButton = (props) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.button_wrapper} onClick={props.onClickFunction}>
+                <p className={styles.button_label}>{props.label}</p>
+                {props.variable === true
+                    ? <p className={clsx(styles.button_indicator_label, styles.enabled)}>Enabled</p>
+                    : <p className={clsx(styles.button_indicator_label, styles.disabled)}>Disabled</p>
+                }
+            </div>
+        </div>
+    );
+};

src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss

@@ -0,0 +1,34 @@
+.container {
+    // height: 100%;
+}
+
+.button_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.6rem 0.4rem;
+    border-radius: 0.2rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.button_label {
+    font-size: 1.2rem;
+}
+
+.button_indicator_label {
+    font-size: 1rem;
+    &.disabled {
+        color: var(--dark_600_color);
+    }
+    &.enabled {
+        color: var(--primary_300_color);
+    }
+}