adding carbon

packages/desktop/src/app.tsx

@@ -1,4 +1,5 @@
 import "./index.css";
+import "./carbon.scss";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";

packages/desktop/src/carbon.scss

@@ -0,0 +1,8 @@
+@import "carbon-components/scss/globals/scss/styles.scss";
+
+// TODO: important, note that if current version of sass in package.json is causing issues, install ^1.29.0
+$body-color: red;
+
+body {
+  color: $body-color !important;
+}

packages/desktop/src/index.css

@@ -1,10 +1,3 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif;
-
-  @apply text-white;
-}
-
 #root {
   padding: 0 !important;
 }

packages/desktop/src/overlay/index.tsx

@@ -1,10 +1,16 @@
+import "../index.css";
+import "../carbon.scss";
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
+import { Button } from "carbon-components-react";
+
 function render() {
   ReactDOM.render(
     <div>
       this is the overlay for video streams and conversations to be passed in
+      <Button>yoo carbone what's up</Button>
     </div>,
     document.getElementById("root")
   );

packages/desktop/src/pages/Home/header/index.tsx

@@ -30,29 +30,29 @@ export default function Header() {
 
   const [userVideo, setUserVideo] = useState<any>(null);
 
-  useEffect(() => {
-    navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
-      .then((localMediaStream: any) => {
-        console.log(localMediaStream);
+  // useEffect(() => {
+  //   navigator.mediaDevices
+  //     .getUserMedia({ video: true, audio: true })
+  //     .then((localMediaStream: any) => {
+  //       console.log(localMediaStream);
 
-        setUserVideo(localMediaStream);
+  //       setUserVideo(localMediaStream);
 
-        var video = document.querySelector("video");
-        video.srcObject = localMediaStream;
-        video.onloadedmetadata = function (e) {
-          video.play();
-        };
+  //       var video = document.querySelector("video");
+  //       video.srcObject = localMediaStream;
+  //       video.onloadedmetadata = function (e) {
+  //         video.play();
+  //       };
 
-        setTimeout(() => {
-          localMediaStream.getTracks().forEach((track: any) => {
-            track.stop();
-          });
+  //       setTimeout(() => {
+  //         localMediaStream.getTracks().forEach((track: any) => {
+  //           track.stop();
+  //         });
 
-          video.srcObject = null;
-        }, 2000);
-      });
-  }, []);
+  //         video.srcObject = null;
+  //       }, 2000);
+  //     });
+  // }, []);
 
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
@@ -95,7 +95,7 @@ export default function Header() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
-      <video height="400" width="430" autoPlay />
+      <video height="400" width="430" autoPlay muted />
 
       <div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
         <Logo type={LogoType.small} className="scale-[0.4]" />