wip

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "webrtc-chrome-ext",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "webrtc-chrome-ext",
-      "version": "1.0.5",
+      "version": "1.0.6",
       "dependencies": {
         "@chakra-ui/react": "^2.8.0",
         "@emotion/react": "^11.11.1",

src/window/phone/incoming-call.tsx

@@ -1,4 +1,12 @@
-import { Button, VStack, Text, Icon, HStack, Spacer } from "@chakra-ui/react";
+import {
+  Button,
+  VStack,
+  Text,
+  Icon,
+  HStack,
+  Spacer,
+  Box,
+} from "@chakra-ui/react";
 import { faPhone } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatPhoneNumber } from "src/utils";
@@ -16,7 +24,8 @@ export const IncommingCall = ({
 }: IncommingCallProbs) => {
   return (
     <VStack alignItems="center" spacing={4} mt="130px" w="full">
-      <FontAwesomeIcon
+      <Box
+        as={FontAwesomeIcon}
         icon={faPhone}
         color="jambonz.500"
         width="60px"

src/window/phone/outgoing-call.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, Text, VStack } from "@chakra-ui/react";
+import { Box, Button, Icon, Text, VStack } from "@chakra-ui/react";
 import { faPhone } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatPhoneNumber } from "src/utils";
@@ -11,7 +11,8 @@ type OutGoingCallProbs = {
 export const OutGoingCall = ({ number, cancelCall }: OutGoingCallProbs) => {
   return (
     <VStack alignItems="center" spacing={4} mt="130px" w="full">
-      <FontAwesomeIcon
+      <Box
+        as={FontAwesomeIcon}
         icon={faPhone}
         color="jambonz.500"
         width="60px"

src/window/settings/advanced.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   FormControl,
   FormLabel,
@@ -21,6 +22,7 @@ import PasswordInput from "src/components/password-input";
 import ResetIcon from "src/imgs/icons/Reset.svg";
 import { getAdvancedSettings, saveAddvancedSettings } from "src/storage";
 import { normalizeUrl } from "src/utils";
+import { useToken } from "@chakra-ui/react";
 
 export const AdvancedSettings = () => {
   const [apiKey, setApiKey] = useState("");
@@ -111,7 +113,8 @@ export const AdvancedSettings = () => {
         </VStack>
         {isAdvancedMode && (
           <HStack w="full" mt={2} mb={2}>
-            <FontAwesomeIcon
+            <Box
+              as={FontAwesomeIcon}
               icon={isCredentialOk ? faCheckCircle : faCircleXmark}
               color={isCredentialOk ? "green.500" : "red.500"}
             />