add styling

package-lock.json

@@ -13,6 +13,7 @@
         "@dcl/social-rpc-client": "^0.0.0-20230725183127.commit-e0fdbae",
         "@dcl/ui-env": "^1.4.0",
         "@livekit/components-react": "^1.0.8",
+        "@livekit/components-styles": "^1.0.5",
         "@reduxjs/toolkit": "^1.9.5",
         "ajv": "^8.12.0",
         "classnames": "^2.3.2",
@@ -3443,6 +3444,14 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/@livekit/components-styles": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@livekit/components-styles/-/components-styles-1.0.5.tgz",
+      "integrity": "sha512-YnuojJIWaOY8iPQtB6DPinn4BJncHHp3DGgg3Chhxpi/HclHKUz8w6Pr9G5X/YWhqaaLOFpbRWWsdYNVAT+wdA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@metamask/safe-event-emitter": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz",
@@ -22107,6 +22116,11 @@
         "clsx": "^1.2.1"
       }
     },
+    "@livekit/components-styles": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@livekit/components-styles/-/components-styles-1.0.5.tgz",
+      "integrity": "sha512-YnuojJIWaOY8iPQtB6DPinn4BJncHHp3DGgg3Chhxpi/HclHKUz8w6Pr9G5X/YWhqaaLOFpbRWWsdYNVAT+wdA=="
+    },
     "@metamask/safe-event-emitter": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "@dcl/social-rpc-client": "^0.0.0-20230725183127.commit-e0fdbae",
     "@dcl/ui-env": "^1.4.0",
     "@livekit/components-react": "^1.0.8",
+    "@livekit/components-styles": "^1.0.5",
     "@reduxjs/toolkit": "^1.9.5",
     "ajv": "^8.12.0",
     "classnames": "^2.3.2",

src/components/Pages/Conference/Conference.css

@@ -0,0 +1,103 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: dark;
+}
+
+html,
+body,
+#__next,
+main {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
+.header {
+  max-width: 500px;
+  padding-inline: 2rem;
+}
+
+.header > img {
+  display: block;
+  margin: auto;
+  max-width: 100%;
+}
+
+.header > h2 {
+  font-family: "TWK Everett", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1.25rem;
+  line-height: 144%;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 1.5rem 2rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  background-color: var(--lk-bg);
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+footer a,
+h2 a {
+  color: #ff6352;
+  text-decoration-color: #a33529;
+  text-underline-offset: 0.125em;
+}
+
+footer a:hover,
+h2 a {
+  text-decoration-color: #ff6352;
+}
+
+h2 a {
+  text-decoration: none;
+}
+
+.main {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+  place-content: center;
+  justify-items: center;
+  padding-bottom: 100px;
+}
+
+.tabContainer {
+  width: 100%;
+  max-width: 500px;
+  padding-inline: 2rem;
+}
+
+.tabSelect {
+  display: flex;
+  justify-content: stretch;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  margin: 0 auto 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.5rem;
+}
+
+.tabSelect > * {
+  width: 100%;
+}
+
+.tabContent {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.5rem;
+}

src/components/Pages/Conference/Conference.tsx

@@ -1,13 +1,15 @@
 import React from "react"
 import { Props } from "./Conference.types"
 import { LiveKitRoom, VideoConference } from "@livekit/components-react"
+import "@livekit/components-styles"
+import "./Conference.css"
 
 export default function Conference(props: Props) {
   const { token, server } = props
 
   return (
     <>
-      <LiveKitRoom token={token} serverUrl={server} connect={true}>
+      <LiveKitRoom token={token} serverUrl={server} connect={true} data-lk-theme="default">
         <VideoConference />
       </LiveKitRoom>
     </>