fix styleing for switch

src/components/switch/index.tsx

@@ -0,0 +1,61 @@
+import { Box, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+type JambonzSwitchProbs = {
+  onlabel: string;
+  offLabel: string;
+  initialCheck: boolean;
+  onChange: (value: boolean) => void;
+};
+function JambonzSwitch({
+  onlabel,
+  offLabel,
+  initialCheck,
+  onChange,
+}: JambonzSwitchProbs) {
+  const [isToggled, setToggled] = useState(initialCheck);
+
+  useEffect(() => {
+    setToggled(initialCheck);
+  }, [initialCheck]);
+
+  return (
+    <Box
+      position="relative"
+      w="90px"
+      h="30px"
+      bg={isToggled ? "green.500" : "grey.500"}
+      borderRadius="full"
+      onClick={() => {
+        const value = !isToggled;
+        setToggled(value);
+        onChange(value);
+      }}
+      _hover={{ cursor: "pointer" }}
+    >
+      <Text
+        position="absolute"
+        top="50%"
+        left={isToggled ? "40%" : "60%"}
+        transform="translate(-50%, -50%)"
+        color={isToggled ? "white" : "black"}
+        fontWeight="bold"
+      >
+        {isToggled ? onlabel : offLabel}
+      </Text>
+      <Box
+        position="absolute"
+        top="50%"
+        left={isToggled ? "70%" : "5%"}
+        w="24px"
+        h="24px"
+        bg="white"
+        borderRadius="full"
+        transform="translateY(-50%)"
+        transition="0.2s ease"
+      ></Box>
+    </Box>
+  );
+}
+
+export default JambonzSwitch;

src/window/phone/index.tsx

@@ -88,8 +88,6 @@ export const Phone = ({
   const timerRef = useRef<NodeJS.Timer | null>(null);
   const [seconds, setSeconds] = useState(0);
   const secondsRef = useRef(seconds);
-  const [isStatusDropdownDisabled, setIsStatusDropdownDisabled] =
-    useState(false);
   const [isCallButtonLoading, setIsCallButtonLoading] = useState(false);
   const [isAdvanceMode, setIsAdvancedMode] = useState(false);
   const isRestartRef = useRef(false);
@@ -130,12 +128,6 @@ export const Phone = ({
     secondsRef.current = seconds;
   }, [inputNumber, seconds, sessionDirection]);
 
-  useEffect(() => {
-    if (isStatusDropdownDisabled) {
-      setIsStatusDropdownDisabled(false);
-    }
-  }, [status]);
-
   useEffect(() => {
     if (isSipClientIdle(callStatus) && isCallButtonLoading) {
       setIsCallButtonLoading(false);
@@ -411,9 +403,7 @@ export const Phone = ({
                   onlabel="Online"
                   offLabel="Offline"
                   initialCheck={status === "online"}
-                  isDisabled={isStatusDropdownDisabled}
                   onChange={(v) => {
-                    setIsStatusDropdownDisabled(true);
                     handleGoOffline(v ? "online" : "offline");
                   }}
                 />