fixed font issue

public/index.html

@@ -4,12 +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.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/index.tsx

@@ -5,6 +5,7 @@ import mainTheme from "./theme";
 import WindowApp from "./window/app";
 
 // This file is being used only for dev.
+
 const root = document.createElement("div");
 root.className = "container";
 document.body.appendChild(root);

src/storage/index.ts

@@ -42,22 +42,22 @@ export const saveSettings = (settings: AppSettings) => {
   if (str) {
     const parsed = JSON.parse(str);
 
-    const data: IAppSettings[] = parsed.map((el: saveSettingFormat) => {
-      return {
-        active: el.active,
-        decoded: JSON.parse(
-          Buffer.from(el.encoded, "base64").toString("utf-8")
-        ),
-        id: el.id,
-      };
-    });
+    // const data: IAppSettings[] = parsed.map((el: saveSettingFormat) => {
+    //   return {
+    //     active: el.active,
+    //     decoded: JSON.parse(
+    //       Buffer.from(el.encoded, "base64").toString("utf-8")
+    //     ),
+    //     id: el.id,
+    //   };
+    // });
 
-    const alreadyExists = data.filter(
-      (el) =>
-        el.decoded.sipDomain === settings.sipDomain &&
-        el.decoded.sipServerAddress === settings.sipServerAddress
-    );
-    if (!!alreadyExists.length) return;
+    // const alreadyExists = data.filter(
+    //   (el) =>
+    //     el.decoded.sipDomain === settings.sipDomain &&
+    //     el.decoded.sipServerAddress === settings.sipServerAddress
+    // );
+    // if (!!alreadyExists.length) return;
 
     localStorage.setItem(
       SETTINGS_KEY,

src/styles.scss

@@ -1,7 +1,31 @@
+@font-face {
+  font-family: "Source Sans";
+  src: url("../public/fonts/SourceSans3-Regular.ttf") format("truetype");
+}
+// @font-face {
+//   font-family: 'FontName';
+//   font-style: normal;
+//   font-weight: 300;
+//   src: local('FontName Light'), local('FontName-Light'), url(https://fonts.gstatic.com/some-url.woff2) format('woff2');
+// }
+
+// @font-face {
+//   font-family: 'FontName';
+//   font-style: normal;
+//   font-weight: 700;
+//   src: local('FontName Bold'), local('FontName-Bold'), url(https://fonts.gstatic.com/some-url.woff2) format('woff2');
+// }
+// * {
+//   font-family: "Source Sans 3", sans-serif;
+// }
+// body {
+//   font-family: "Source Sans 3", sans-serif;
+// }
+
 .container {
   width: 280px;
   height: 480px;
-  font-family: Arial, sans-serif;
+  // font-family: "Source Sans 3", sans-serif;
   margin: 0;
   padding: 0;
 }

src/theme.tsx

@@ -2,8 +2,8 @@ import { extendTheme } from "@chakra-ui/react";
 
 const mainTheme = extendTheme({
   fonts: {
-    heading: "'Source Sans 3', 'sans-serif'",
-    body: "'Source Sans 3', 'sans-serif'",
+    heading: `'Source Sans 3', Arial, sans-serif`,
+    body: `'Source Sans 3', Arial, sans-serif`,
   },
   colors: {
     jambonz: {

src/window/phone/availableAccounts.tsx

@@ -15,6 +15,7 @@ function AvailableAccounts({
 }) {
   return (
     <VStack
+      zIndex={"modal"}
       ref={refData}
       w={"full"}
       alignItems={"start"}