diff --git a/package-lock.json b/package-lock.json index 000f067..86d02b6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6945c8a..965cd33 100644 --- a/package.json +++ b/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", diff --git a/src/components/Pages/Conference/Conference.css b/src/components/Pages/Conference/Conference.css new file mode 100644 index 0000000..d9d1827 --- /dev/null +++ b/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; +} diff --git a/src/components/Pages/Conference/Conference.tsx b/src/components/Pages/Conference/Conference.tsx index ae99abd..c6addb4 100644 --- a/src/components/Pages/Conference/Conference.tsx +++ b/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 ( <> - +