fixed open account form bug, aligned UI sty;les to match figma css

public/index.html

@@ -4,6 +4,12 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

src/components/animate/index.tsx

@@ -18,7 +18,6 @@ function AnimateOnShow({
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: exit }}
       transition={{ duration: duration }}
-      className="test"
     >
       {children}
     </motion.div>

src/theme.tsx

@@ -1,6 +1,10 @@
 import { extendTheme } from "@chakra-ui/react";
 
 const mainTheme = extendTheme({
+  fonts: {
+    heading: "'Source Sans 3', 'sans-serif'",
+    body: "'Source Sans 3', 'sans-serif'",
+  },
   colors: {
     jambonz: {
       0: "#EDDEE3",

src/window/phone/availableAccounts.tsx

@@ -1,18 +1,21 @@
 import { HStack, Text, VStack } from "@chakra-ui/react";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
+import React, { RefObject } from "react";
 import { IAppSettings } from "src/common/types";
 
 function AvailableAccounts({
   allSettings,
   onSetActive,
+  refData,
 }: {
   allSettings: IAppSettings[];
   onSetActive: (x: number) => void;
+  refData: RefObject<HTMLDivElement>;
 }) {
   return (
     <VStack
+      ref={refData}
       w={"full"}
       alignItems={"start"}
       bg={"grey.200"}

src/window/phone/index.tsx

@@ -142,6 +142,7 @@ export const Phone = ({
   const unregisteredReasonRef = useRef("");
   const isInputNumberFocusRef = useRef(false);
   const secondsRef = useRef(seconds);
+  const accountsCardRef = useRef<HTMLDivElement | null>(null);
 
   const toast = useToast();
 
@@ -250,6 +251,18 @@ export const Phone = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (showAccounts) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showAccounts]);
+
   const fetchRegisterUser = () => {
     getSelfRegisteredUser(sipUsernameRef.current)
       .then(({ json }) => {
@@ -501,6 +514,12 @@ export const Phone = ({
     reload();
   };
 
+  const handleClickOutside = (event: Event) => {
+    const target = event.target as Node;
+    if (accountsCardRef.current && !accountsCardRef.current.contains(target)) {
+      setShowAccounts(false);
+    }
+  };
   return (
     <Box flexDirection="column">
       {allSettings.length >= 1 ? (
@@ -556,6 +575,7 @@ export const Phone = ({
             {showAccounts && (
               <AnimateOnShow initial={2} exit={0} duration={0.01}>
                 <AvailableAccounts
+                  refData={accountsCardRef}
                   allSettings={allSettings}
                   onSetActive={handleSetActive}
                 />

src/window/settings/accordionList.tsx

@@ -13,30 +13,44 @@ import SettingItem from "src/window/settings/settingItem";
 export function AccordionList({
   allSettings,
   reload,
-  onOpenForm,
+  handleOpenFormInAccordion,
+  handleCloseFormInAccordion,
   isNewFormOpen,
+  handleCloseNewForm,
 }: {
   allSettings: IAppSettings[];
   reload: () => void;
-  onOpenForm: () => void;
+  handleOpenFormInAccordion: () => void;
+  handleCloseFormInAccordion: () => void;
   isNewFormOpen: boolean;
+  handleCloseNewForm: () => void;
 }) {
-  const { isOpen, onToggle } = useDisclosure();
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const [openAcc, setOpenAcc] = useState(0);
 
   const closeFormInAccordion = function () {
+    onClose();
+    handleCloseFormInAccordion();
     reload();
-    onToggle();
   };
 
   function handleToggleAcc(accIndex: number) {
-    if (isNewFormOpen) return; //prevents opening form if for for new account is open
+    if (isNewFormOpen) handleCloseNewForm(); //closes new form if open
-    onOpenForm();
+    handleOpenFormInAccordion();
     setOpenAcc(accIndex);
-    onToggle();
+    // onToggle();
+    onOpen();
   }
   return (
-    <Accordion index={isOpen ? [openAcc] : []} allowToggle>
+    <Accordion
+      index={isOpen ? [openAcc] : []}
+      allowToggle
+      sx={{
+        "& > *:last-child": {
+          marginBottom: "7px",
+        },
+      }}
+    >
       {allSettings.map((data, index) => (
         <AccordionItem borderColor={"white"} key={index}>
           <AccordionButton
@@ -47,10 +61,12 @@ export function AccordionList({
               cursor: "default",
             }}
           >
+            {isOpen && index === openAcc ? null : (
               <SettingItem
                 onToggleAcc={() => handleToggleAcc(index)}
                 data={data}
               />
+            )}
           </AccordionButton>
           <AccordionPanel pb={4} px={0}>
             <AccountForm

src/window/settings/index.tsx

@@ -26,6 +26,12 @@ export const Settings = () => {
   function handleCloseForm() {
     setShowForm(false);
   }
+  function handleOpenFormInAccordion() {
+    setShowFormInAccordion(true);
+  }
+  function handleCloseFormInAccordion() {
+    setShowFormInAccordion(false);
+  }
 
   const loadSettings = function () {
     setAllSettings(getSettings());
@@ -37,10 +43,12 @@ export const Settings = () => {
     <div>
       <Box>
         <AccordionList
-          onOpenForm={() => setShowFormInAccordion((prev) => !prev)}
+          handleOpenFormInAccordion={handleOpenFormInAccordion}
+          handleCloseFormInAccordion={handleCloseFormInAccordion}
           allSettings={allSettings}
           reload={loadSettings}
           isNewFormOpen={showForm}
+          handleCloseNewForm={handleCloseForm}
         />
       </Box>
       {!showForm && !showFormInAccordion && (