fixed bug and some UIs

src/components/switch/index.tsx

@@ -19,7 +19,7 @@ function JambonzSwitch({
       position="relative"
       w="50px"
       h="30px"
-      bg={isToggled ? "green.500" : "grey.500"}
+      bg={isToggled ? "blue.600" : "grey.500"}
       borderRadius="full"
       onClick={() => {
         if (!isDisabled) {

src/storage/index.ts

@@ -58,11 +58,16 @@ export const saveSettings = (settings: AppSettings) => {
         el.decoded.sipServerAddress === settings.sipServerAddress
     );
     if (!!alreadyExists.length) return;
+
     localStorage.setItem(
       SETTINGS_KEY,
       JSON.stringify([
         ...parsed,
-        { encoded, active: false, id: parsed.length + 1 },
+        {
+          encoded,
+          active: false,
+          id: parsed.length + 1,
+        },
       ])
     );
   } else {

src/theme.tsx

@@ -3,6 +3,7 @@ import { extendTheme } from "@chakra-ui/react";
 const mainTheme = extendTheme({
   colors: {
     jambonz: {
+      0: "#EDDEE3",
       50: "#ffe1f1",
       100: "#ffb3c6",
       200: "#fc839d",
@@ -26,6 +27,9 @@ const mainTheme = extendTheme({
       800: "#6D6D6D",
       900: "#434343",
     },
+    blue: {
+      600: "#4492FF", //for toggle icon
+    },
   },
   components: {
     FormLabel: {

src/window/phone/index.tsx

@@ -503,48 +503,56 @@ export const Phone = ({
 
   return (
     <Box flexDirection="column">
-      {isConfigured ? (
+      {allSettings.length >= 1 ? (
         <>
           <Text fontSize={"small"} fontWeight={"semibold"} color={"gray.600"}>
             Account
           </Text>
           <Box className="relative" w={"full"}>
-            <HStack
+            {
-              onClick={() => setShowAccounts(true)}
+              <HStack
-              _hover={{
+                onClick={() => setShowAccounts(true)}
-                cursor: "pointer",
+                _hover={{
-              }}
+                  cursor: "pointer",
-              spacing={2}
+                }}
-              boxShadow="md"
+                spacing={2}
-              w="full"
+                boxShadow="md"
-              borderRadius={5}
+                w="full"
-              paddingY={2}
+                borderRadius={5}
-              paddingX={3.5}
+                paddingY={2}
-            >
+                paddingX={3.5}
-              <Image
+              >
-                src={isStatusRegistered() ? GreenAvatar : Avatar}
+                {sipUsername && sipDomain ? (
-                boxSize="35px"
+                  <>
-              />
+                    <Image
-              <VStack alignItems="start" w="full" spacing={0}>
+                      src={isStatusRegistered() ? GreenAvatar : Avatar}
-                <HStack spacing={2} w="full">
+                      boxSize="35px"
-                  <Text fontWeight="bold" fontSize="13px">
+                    />
-                    {sipDisplayName || sipUsername}
+                    <VStack alignItems="start" w="full" spacing={0}>
-                  </Text>
+                      <HStack spacing={2} w="full">
-                  <Circle
+                        <Text fontWeight="bold" fontSize="13px">
-                    size="8px"
+                          {sipDisplayName || sipUsername}
-                    bg={isStatusRegistered() ? "green.500" : "gray.500"}
+                        </Text>
-                  />
+                        <Circle
-                </HStack>
+                          size="8px"
-                <Text fontWeight="bold" w="full">
+                          bg={isStatusRegistered() ? "green.500" : "gray.500"}
-                  {`${sipUsername}@${sipDomain}`}
+                        />
-                </Text>
+                      </HStack>
-              </VStack>
+                      <Text fontWeight="bold" w="full">
+                        {`${sipUsername}@${sipDomain}`}
+                      </Text>
+                    </VStack>
 
-              <Spacer />
+                    <Spacer />
-              <VStack h="full" align="center">
+                    <VStack h="full" align="center">
-                <FontAwesomeIcon icon={faChevronDown} />
+                      <FontAwesomeIcon icon={faChevronDown} />
-              </VStack>
+                    </VStack>
-            </HStack>
+                  </>
+                ) : (
+                  <Text fontWeight={"extrabold"}>Select Account</Text>
+                )}
+              </HStack>
+            }
             {showAccounts && (
               <AnimateOnShow initial={2} exit={0} duration={0.01}>
                 <AvailableAccounts

src/window/settings/accordionList.tsx

@@ -32,9 +32,17 @@ export function AccordionList({
   return (
     <Accordion index={isOpen ? [openAcc] : []} allowToggle>
       {allSettings.map((data, index) => (
-        <AccordionItem key={index}>
+        <AccordionItem borderColor={"white"} key={index}>
-          <AccordionButton onClick={() => handleToggleAcc(index)}>
+          <AccordionButton
-            <SettingItem data={data} />
+            _hover={{
+              backgroundColor: "#fff",
+              cursor: "default",
+            }}
+          >
+            <SettingItem
+              onToggleAcc={() => handleToggleAcc(index)}
+              data={data}
+            />
           </AccordionButton>
           <AccordionPanel pb={4}>
             <AccountForm

src/window/settings/accountForm.tsx

@@ -20,6 +20,8 @@ import {
   faCheckCircle,
   faCircleXmark,
   faShuffle,
+  faSliders,
+  faSlidersH,
   faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { normalizeUrl } from "src/utils";
@@ -228,6 +230,7 @@ function AccountForm({
           )}
           <Center flexDirection={"column"} gap={"2.5"}>
             <Button
+              variant={"ghost"}
               gap={"2.5"}
               alignItems={"center"}
               onClick={() => setShowAdvanced((prev) => !prev)}
@@ -236,7 +239,7 @@ function AccountForm({
                 {" "}
                 {showAdvanced ? "Hide" : "Show"} Advanced Settings
               </Text>
-              <FontAwesomeIcon color={colors.jambonz} icon={faShuffle} />
+              <FontAwesomeIcon color={colors.jambonz} icon={faSliders} />
             </Button>
           </Center>
         </VStack>
@@ -264,12 +267,20 @@ function AccountForm({
           mt={2}
         >
           <HStack>
-            <Button colorScheme="jambonz" type="submit" w="full">
+            <Button
+              textColor={"jambonz.500"}
+              fontWeight={"semibold"}
+              bg="jambonz.0"
+              type="submit"
+              w="full"
+            >
               Save
             </Button>
             <Button
+              variant={"ghost"}
               colorScheme="jambonz"
               type="reset"
+              fontWeight={"semibold"}
               w="full"
               onClick={resetSetting}
             >

src/window/settings/index.tsx

@@ -46,6 +46,13 @@ export const Settings = () => {
           Add Account
         </Button>
       )}
+
+      {showForm && (
+        <AnimateOnShow>
+          <AccountForm closeForm={handleCloseForm} />
+        </AnimateOnShow>
+      )}
+
       <Center marginBottom={"2.5"} flexDirection={"column"}>
         <Text>
           {allSettings.length} of {MAX_NUM_OF_ACCOUNTS}{" "}
@@ -55,12 +62,6 @@ export const Settings = () => {
         )}
       </Center>
 
-      {showForm && (
-        <AnimateOnShow>
-          <AccountForm closeForm={handleCloseForm} />
-        </AnimateOnShow>
-      )}
-
       {/* <Tabs isFitted colorScheme={DEFAULT_COLOR_SCHEME}>
         <TabList mb="1em" gap={1}>
           <Tab>Basic</Tab>

src/window/settings/settingItem.tsx

@@ -2,7 +2,13 @@ import { HStack, Text, VStack } from "@chakra-ui/react";
 import React from "react";
 import { IAppSettings } from "src/common/types";
 
-function SettingItem({ data }: { data: IAppSettings }) {
+function SettingItem({
+  data,
+  onToggleAcc,
+}: {
+  data: IAppSettings;
+  onToggleAcc: () => void;
+}) {
   return (
     <HStack
       w={"full"}
@@ -13,6 +19,11 @@ function SettingItem({ data }: { data: IAppSettings }) {
       justifyContent={"start"}
       borderRadius={"2xl"}
       padding={"2.5"}
+      onClick={onToggleAcc}
+      _hover={{
+        backgroundColor: "gray.200",
+        cursor: "pointer",
+      }}
     >
       <VStack gap={"0"} alignItems={"start"}>
         <Text fontWeight={"bold"}>