[Update/bugfix] UI: Add disable/enable UI function when osc query is disabled.

Fix the error that the mic mute sync couldn't enable/disable.

src-ui/common_components/checkbox/Checkbox.jsx

@@ -3,15 +3,16 @@ import styles from "./Checkbox.module.scss";
 export const Checkbox = ({
     checkboxId,
     variable,
+    is_available = true,
     toggleFunction,
     size = "2.8rem",
-    color = "var(--primary_600_color)",
     borderWidth = "0.2rem",
     padding = "2rem",
 }) => {
 
     const wrapper_class_names = clsx(styles.checkbox_wrapper, {
-        [styles.is_disabled]: variable.state === "pending",
+        [styles.is_disabled]: !is_available,
+        [styles.is_pending]: variable.state === "pending",
     });
 
     return (
@@ -21,7 +22,6 @@ export const Checkbox = ({
                 htmlFor={checkboxId}
                 style={{
                     "--checkbox-size": size,
-                    "--checkbox-color": color,
                     "--checkbox-border-width": borderWidth,
                     "--checkbox-padding": padding,
                 }}

src-ui/common_components/checkbox/Checkbox.module.scss

@@ -18,12 +18,19 @@
             border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem);
         }
     }
-    &.is_disabled {
+    &.is_pending {
         pointer-events: none;
         & .cbx {
             border-color: var(--primary_800_color);
         }
     }
+    &.is_disabled {
+        pointer-events: none;
+        & .cbx {
+            filter: grayscale(100%);
+            border-color: var(--dark_800_color);
+        }
+    }
 }
 
 .checkbox_wrapper .cbx {