fixed font issue

src/window/app.tsx

@@ -10,12 +10,13 @@ import {
 import Phone from "./phone";
 import Settings from "./settings";
 import { DEFAULT_COLOR_SCHEME } from "src/common/constants";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getActiveSettings, getCallHistories, getSettings } from "src/storage";
 
 import CallHistories from "./history";
 import { CallHistory, IAppSettings, SipClientStatus } from "src/common/types";
 import Footer from "./footer/footer";
+import { SipUA } from "src/lib";
 
 export const WindowApp = () => {
   const [sipDomain, setSipDomain] = useState("");
@@ -32,6 +33,9 @@ export const WindowApp = () => {
   const [advancedSettings, setAdvancedSettings] = useState<IAppSettings | null>(
     null
   );
+  const sipUA = useRef<SipUA | null>(null);
+  const [isSwitchingUserStatus, setIsSwitchingUserStatus] = useState(false);
+  const [isOnline, setIsOnline] = useState(false);
 
   const loadSettings = () => {
     const settings = getSettings();
@@ -63,6 +67,9 @@ export const WindowApp = () => {
           advancedSettings={advancedSettings}
           allSettings={allSettings}
           reload={loadSettings}
+          sipUA={sipUA}
+          setIsSwitchingUserStatus={setIsSwitchingUserStatus}
+          setIsOnline={setIsOnline}
         />
       ),
     },
@@ -133,6 +140,11 @@ export const WindowApp = () => {
         sipPassword={sipPassword}
         status={status}
         setStatus={setStatus}
+        isSwitchingUserStatus={isSwitchingUserStatus}
+        setIsSwitchingUserStatus={setIsSwitchingUserStatus}
+        isOnline={isOnline}
+        setIsOnline={setIsOnline}
+        sipUA={sipUA}
       />
     </Grid>
   );

src/window/footer/footer.tsx

@@ -15,6 +15,11 @@ function Footer({
   sipDomain,
   sipPassword,
   sipDisplayName,
+  isSwitchingUserStatus,
+  setIsSwitchingUserStatus,
+  isOnline,
+  setIsOnline,
+  sipUA,
 }: {
   status: string;
   setStatus: Dispatch<SetStateAction<SipClientStatus>>;
@@ -23,13 +28,15 @@ function Footer({
   sipDomain: string;
   sipPassword: string;
   sipDisplayName: string;
+  isSwitchingUserStatus: boolean;
+  setIsSwitchingUserStatus: React.Dispatch<React.SetStateAction<boolean>>;
+  isOnline: boolean;
+  setIsOnline: React.Dispatch<React.SetStateAction<boolean>>;
+  sipUA: React.MutableRefObject<SipUA | null>;
 }) {
   const [isConfigured, setIsConfigured] = useState(false);
 
-  const [isSwitchingUserStatus, setIsSwitchingUserStatus] = useState(false);
+  // const sipUA = useRef<SipUA | null>(null);
-  const [isOnline, setIsOnline] = useState(false);
-
-  const sipUA = useRef<SipUA | null>(null);
   const sipUsernameRef = useRef("");
   const sipPasswordRef = useRef("");
   const sipServerAddressRef = useRef("");

src/window/phone/availableAccounts.tsx

@@ -1,4 +1,4 @@
-import { HStack, Text, VStack } from "@chakra-ui/react";
+import { Box, HStack, Text, VStack } from "@chakra-ui/react";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { RefObject } from "react";
@@ -30,16 +30,17 @@ function AvailableAccounts({
       {allSettings.map((el, i) => (
         <HStack
           key={i}
+          display={"flex"}
           justifyContent={"start"}
           _hover={{
             cursor: "pointer",
           }}
           onClick={() => onSetActive(el.id)}
         >
-          {el.active && <FontAwesomeIcon icon={faCheck} />}
+          <Box w={"12px"}>
-          <Text marginLeft={el.active ? "-0.5" : "5"}>
+            {el.active ? <FontAwesomeIcon icon={faCheck} /> : null}
-            {el.decoded.sipDisplayName || el.decoded.sipUsername}
+          </Box>
-          </Text>
+          <Text>{el.decoded.sipDisplayName || el.decoded.sipUsername}</Text>
           &nbsp;
           <Text>({`${el.decoded.sipUsername}@${el.decoded.sipDomain}`})</Text>
         </HStack>

src/window/phone/index.tsx

@@ -79,6 +79,9 @@ type PhoneProbs = {
   stat: [string, Dispatch<SetStateAction<SipClientStatus>>];
   allSettings: IAppSettings[];
   reload: () => void;
+  sipUA: React.MutableRefObject<SipUA | null>;
+  setIsSwitchingUserStatus: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsOnline: React.Dispatch<React.SetStateAction<boolean>>
 };
 
 enum PAGE_VIEW {
@@ -102,6 +105,9 @@ export const Phone = ({
   advancedSettings,
   allSettings,
   reload,
+  sipUA,
+  setIsSwitchingUserStatus,
+  setIsOnline
 }: PhoneProbs) => {
   const [inputNumber, setInputNumber] = useState("");
   const [appName, setAppName] = useState("");
@@ -113,8 +119,8 @@ export const Phone = ({
   const [seconds, setSeconds] = useState(0);
   const [isCallButtonLoading, setIsCallButtonLoading] = useState(false);
   const [isAdvanceMode, setIsAdvancedMode] = useState(false);
-  const [isSwitchingUserStatus, setIsSwitchingUserStatus] = useState(true);
+  // const [isSwitchingUserStatus, setIsSwitchingUserStatus] = useState(true);
-  const [isOnline, setIsOnline] = useState(false);
+  // const [isOnline, setIsOnline] = useState(false);
   const [pageView, setPageView] = useState<PAGE_VIEW>(PAGE_VIEW.DIAL_PAD);
   const [registeredUser, setRegisteredUser] = useState<Partial<RegisteredUser>>(
     {
@@ -131,7 +137,7 @@ export const Phone = ({
 
   const inputNumberRef = useRef(inputNumber);
   const sessionDirectionRef = useRef(sessionDirection);
-  const sipUA = useRef<SipUA | null>(null);
+  // const sipUA = useRef<SipUA | null>(null);
   const timerRef = useRef<NodeJS.Timer | null>(null);
   const isRestartRef = useRef(false);
   const sipDomainRef = useRef("");
@@ -268,7 +274,7 @@ export const Phone = ({
       .then(({ json }) => {
         setRegisteredUser(json);
       })
-      .catch(() => {
+      .catch((err) => {
         setRegisteredUser({
           allow_direct_app_calling: false,
           allow_direct_queue_calling: false,
@@ -511,6 +517,7 @@ export const Phone = ({
   const handleSetActive = (id: number) => {
     setActiveSettings(id);
     setShowAccounts(false);
+    fetchRegisterUser();
     reload();
   };