WIP

src/App.jsx

@@ -23,7 +23,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import { useConferenceCallManager } from "./ConferenceCallManagerHooks";
-import { JoinOrCreateRoom } from "./JoinOrCreateRoom";
+import { Home } from "./Home";
 import { LoginOrRegister } from "./LoginOrRegister";
 import { Room } from "./Room";
 import { GridDemo } from "./GridDemo";
@@ -37,7 +37,7 @@ export default function App() {
 
   return (
     <Router>
-      <div>
+      <>
         {error && <p>{error.message}</p>}
         {loading ? (
           <p>Loading...</p>
@@ -45,7 +45,7 @@ export default function App() {
           <Switch>
             <Route exact path="/">
               {authenticated ? (
-                <JoinOrCreateRoom manager={manager} />
+                <Home manager={manager} />
               ) : (
                 <LoginOrRegister onRegister={register} onLogin={login} />
               )}
@@ -61,7 +61,7 @@ export default function App() {
             </Route>
           </Switch>
         )}
-      </div>
+      </>
     </Router>
   );
 }

src/Header.jsx

@@ -0,0 +1,40 @@
+import classNames from "classnames";
+import React from "react";
+import { Link } from "react-router-dom";
+import styles from "./Header.module.css";
+import { ReactComponent as Logo } from "./Logo.svg";
+
+export function Header({ children, className, ...rest }) {
+  return (
+    <header className={classNames(styles.header, className)} {...rest}>
+      {children}
+    </header>
+  );
+}
+
+export function LeftNav({ children, className, ...rest }) {
+  return (
+    <div className={classNames(styles.leftNav, className)} {...rest}>
+      <Link className={styles.logo} to="/">
+        <Logo width={32} height={32} />
+      </Link>
+      {children}
+    </div>
+  );
+}
+
+export function CenterNav({ children, className, ...rest }) {
+  return (
+    <div className={classNames(styles.centerNav, className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export function RightNav({ children, className, ...rest }) {
+  return (
+    <div className={classNames(styles.rightNav, className)} {...rest}>
+      {children}
+    </div>
+  );
+}

src/Header.module.css

@@ -0,0 +1,25 @@
+.header {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 98px;
+  user-select: none;
+}
+
+.leftNav {
+  position: absolute;
+  left: 20px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.rightNav {
+  position: absolute;
+  right: 20px;
+  max-width: 30%;
+}

src/Home.jsx

@@ -0,0 +1,123 @@
+/*
+Copyright 2021 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useRef, useState } from "react";
+import { useHistory, Link } from "react-router-dom";
+import { useRooms } from "./ConferenceCallManagerHooks";
+import { Header, LeftNav, RightNav } from "./Header";
+import ColorHash from "color-hash";
+import styles from "./Home.module.css";
+import { FieldRow, InputField, Button } from "./Input";
+
+const colorHash = new ColorHash({ lightness: 0.3 });
+
+export function Home({ manager }) {
+  const history = useHistory();
+  const roomNameRef = useRef();
+  const [createRoomError, setCreateRoomError] = useState();
+  const rooms = useRooms(manager);
+
+  const onCreateRoom = useCallback(
+    (e) => {
+      e.preventDefault();
+      setCreateRoomError(undefined);
+
+      manager.client
+        .createRoom({
+          visibility: "private",
+          preset: "public_chat",
+          name: roomNameRef.current.value,
+        })
+        .then(({ room_id }) => {
+          history.push(`/room/${room_id}`);
+        })
+        .catch(setCreateRoomError);
+    },
+    [manager]
+  );
+
+  const onLogout = useCallback(
+    (e) => {
+      e.preventDefault();
+      manager.logout();
+      location.reload();
+    },
+    [manager]
+  );
+
+  return (
+    <>
+      <Header>
+        <LeftNav />
+        <RightNav>
+          <span className={styles.userName}>
+            {manager.client && manager.client.getUserId()}
+          </span>
+          <button
+            className={styles.signOutButton}
+            type="button"
+            onClick={onLogout}
+          >
+            Sign Out
+          </button>
+        </RightNav>
+      </Header>
+      <div className={styles.content}>
+        <div className={styles.roomsSidebar}>
+          <h5>Rooms:</h5>
+          <div className={styles.roomList}>
+            {rooms.map((room) => (
+              <Link
+                className={styles.roomListItem}
+                key={room.roomId}
+                to={`/room/${room.roomId}`}
+              >
+                <div
+                  className={styles.roomAvatar}
+                  style={{ backgroundColor: colorHash.hex(room.name) }}
+                >
+                  <span>{room.name.slice(0, 1)}</span>
+                </div>
+                <div className={styles.roomName}>{room.name}</div>
+              </Link>
+            ))}
+          </div>
+        </div>
+        <div className={styles.center}>
+          <form className={styles.createRoomContainer} onSubmit={onCreateRoom}>
+            <h2>Create New Room</h2>
+            <FieldRow>
+              <InputField
+                id="roomName"
+                name="roomName"
+                label="Room Name"
+                type="text"
+                required
+                autoComplete="off"
+                placeholder="Room Name"
+                ref={roomNameRef}
+              />
+            </FieldRow>
+            {createRoomError && <p>{createRoomError.message}</p>}
+            <FieldRow rightAlign>
+              <Button type="submit">Create Room</Button>
+            </FieldRow>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}

src/Home.module.css

@@ -0,0 +1,99 @@
+.content {
+  display: grid;
+  grid-template-columns: minmax(200px, 320px) 3fr;
+  gap: 20px;
+  margin: 0 20px;
+  flex: 1;
+}
+
+.roomsSidebar {
+  padding: 12px;
+  background-color: rgba(33,38,44,.9);
+  border-radius: 8px;
+}
+
+.roomsSidebar h5 {
+  color: rgb(142, 153, 164);
+  font-size: 13px;
+  margin: 0 0 8px 0;    
+}
+
+.roomList {
+  
+}
+
+.roomListItem {
+  margin-bottom: 4px;
+  padding: 4px;
+  display: flex;
+  cursor: pointer;
+  text-decoration: none;
+  color: white;
+  align-items: center;
+}
+
+.roomListItem:hover {
+  background-color: rgba(141, 151, 165, 0.2);
+  border-radius: 8px;
+  color: white;
+}
+
+.roomAvatar {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+}
+
+.roomAvatar > * {
+  position: absolute;
+  left: 0;
+  color: #fff;
+  text-align: center;
+  pointer-events: none;
+  font-weight: 400;
+}
+
+.roomAvatar span {
+  font-size: 20.8px;
+  width: 32px;
+  line-height: 32px;
+}
+
+.roomName {
+  margin-left: 8px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.createRoomContainer {
+  color: #232f32;
+  border-radius: 8px;
+  padding: 25px 60px;
+  width: 400px;
+  background-color: white;
+}
+
+.createRoomContainer h2 {
+  margin: 0 0 20px 0;
+}
+
+.userName {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.signOutButton {
+  background: transparent;
+  border: none;
+  color: rgb(255, 75, 85);
+  cursor: pointer;
+  font-weight: 600;
+}

src/Input.jsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import styles from "./Input.module.css";
+
+export function FieldRow({ children, rightAlign, className, ...rest }) {
+  return (
+    <div
+      className={classNames(
+        styles.fieldRow,
+        { [styles.rightAlign]: rightAlign },
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function Field({ children, className, ...rest }) {
+  return <div className={classNames(styles.field, className)}>{children}</div>;
+}
+
+export const InputField = forwardRef(
+  ({ id, label, className, ...rest }, ref) => {
+    return (
+      <Field>
+        <input id={id} {...rest} ref={ref} />
+        <label for={id}>{label}</label>
+      </Field>
+    );
+  }
+);
+
+export const Button = forwardRef(({ className, children, ...rest }, ref) => {
+  return (
+    <button
+      className={classNames(styles.button, className)}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});

src/Input.module.css

@@ -0,0 +1,106 @@
+.fieldRow {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.field {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  margin: 1em 0;
+  border-radius: 4px;
+  transition: border-color .25s;
+  border: 1px solid #e7e7e7;
+}
+
+.fieldRow.rightAlign {
+  justify-content: flex-end;
+}
+
+.fieldRow > .field {
+  margin: 0 5px;
+}
+
+.fieldRow > .field:first-child {
+  margin-left: 0;
+}
+
+.fieldRow > .field:last-child {
+  margin-right: 0;
+}
+
+.field input {
+  font-weight: 400;
+  font-size: 14px;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 9px;
+  color: #2e2f32;
+  background-color: #fff;
+  flex: 1;
+  min-width: 0;
+}
+
+.field input::placeholder {
+  transition: color 0.25s ease-in 0s;
+  color: transparent;
+}
+
+.field input:placeholder-shown:focus::placeholder {
+  transition: color .25s ease-in .1s;
+  color: #888;
+}
+
+.field label {
+  transition: font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;
+  color: #2e2f32;
+  background-color: transparent;
+  font-size: 14px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: 7px 8px;
+  padding: 2px;
+  pointer-events: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 20px);
+}
+
+.field input:focus + label {
+  background-color: #fff;
+  color: #238cf5;
+  transition: font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;
+  font-size: 10px;
+  top: -13px;
+  padding: 0 2px;
+  background-color: #fff;
+  pointer-events: auto;
+}
+
+.button {
+  vertical-align: middle;
+  border: 0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #fff;
+  background-color: #0dbd8b;
+  width: auto;
+  padding: 7px 15px;
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.button:hover {
+
+}
+
+.button:active {
+
+}

src/JoinOrCreateRoom.jsx

@@ -1,116 +0,0 @@
-/*
-Copyright 2021 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { useCallback, useRef, useState } from "react";
-import { useHistory, Link } from "react-router-dom";
-import { useRooms } from "./ConferenceCallManagerHooks";
-
-export function JoinOrCreateRoom({ manager }) {
-  const history = useHistory();
-  const roomNameRef = useRef();
-  const roomIdRef = useRef();
-  const [createRoomError, setCreateRoomError] = useState();
-  const [joinRoomError, setJoinRoomError] = useState();
-  const rooms = useRooms(manager);
-
-  const onCreateRoom = useCallback(
-    (e) => {
-      e.preventDefault();
-      setCreateRoomError(undefined);
-
-      manager.client
-        .createRoom({
-          visibility: "private",
-          preset: "public_chat",
-          name: roomNameRef.current.value,
-        })
-        .then(({ room_id }) => {
-          history.push(`/room/${room_id}`);
-        })
-        .catch(setCreateRoomError);
-    },
-    [manager]
-  );
-
-  const onJoinRoom = useCallback(
-    (e) => {
-      e.preventDefault();
-      setJoinRoomError(undefined);
-
-      manager.client
-        .joinRoom(roomIdRef.current.value)
-        .then(({ roomId }) => {
-          history.push(`/room/${roomId}`);
-        })
-        .catch(setJoinRoomError);
-    },
-    [manager]
-  );
-
-  const onLogout = useCallback(
-    (e) => {
-      e.preventDefault();
-      manager.logout();
-      location.reload();
-    },
-    [manager]
-  );
-
-  return (
-    <div className="page">
-      <h1>Matrix Video Chat</h1>
-      <form onSubmit={onCreateRoom}>
-        <h2>Create New Room</h2>
-        <input
-          id="roomName"
-          name="roomName"
-          type="text"
-          required
-          autoComplete="off"
-          placeholder="Room Name"
-          ref={roomNameRef}
-        ></input>
-        {createRoomError && <p>{createRoomError.message}</p>}
-        <button type="submit">Create Room</button>
-      </form>
-      <form onSubmit={onJoinRoom}>
-        <h2>Join Existing Room</h2>
-        <input
-          id="roomId"
-          name="roomId"
-          type="text"
-          required
-          autoComplete="off"
-          placeholder="Room ID"
-          ref={roomIdRef}
-        ></input>
-        {joinRoomError && <p>{joinRoomError.message}</p>}
-        <button type="submit">Join Room</button>
-      </form>
-      <h2>Rooms:</h2>
-      <ul>
-        {rooms.map((room) => (
-          <li key={room.roomId}>
-            <Link to={`/room/${room.roomId}`}>{room.name}</Link>
-          </li>
-        ))}
-      </ul>
-      <button type="button" onClick={onLogout}>
-        Log Out
-      </button>
-    </div>
-  );
-}

src/Room.jsx

@@ -26,7 +26,7 @@ import {
   MicButton,
   VideoButton,
 } from "./RoomButton";
-import { ReactComponent as Logo } from "./Logo.svg";
+import { Header, LeftNav, RightNav } from "./Header";
 
 function useQuery() {
   const location = useLocation();
@@ -69,21 +69,19 @@ export function Room({ manager }) {
   return (
     <div className={styles.room}>
       {!loading && room && (
-        <div className={styles.header}>
+        <Header>
-          <div className={styles.backNav}>
+          <LeftNav />
-            <Link className={styles.logo} to="/">
+          <CenterNav>
-              <Logo width={32} height={32} />
+            <h3>{room.name}</h3>
-            </Link>
+          </CenterNav>
-          </div>
+          <RightNav>
-          <h3>{room.name}</h3>
-          <div className={styles.userNav}>
             <SettingsButton
               title={debug ? "Disable DevTools" : "Enable DevTools"}
               on={debug}
               onClick={() => setDebug((debug) => !debug)}
             />
-          </div>
+          </RightNav>
-        </div>
+        </Header>
       )}
       {loading && (
         <div className={styles.centerMessage}>

src/Room.module.css

@@ -23,37 +23,6 @@ limitations under the License.
   overflow: hidden;
 }
 
-.header {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 98px;
-  user-select: none;
-}
-
-.header h5 {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.backNav {
-  position: absolute;
-  left: 20px;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-}
-
-.userNav {
-  position: absolute;
-  right: 20px;
-  max-width: 30%;
-}
-
 .joinRoom {
   display: flex;
   flex-direction: column;

src/index.css

@@ -105,7 +105,7 @@ limitations under the License.
 }
 
 body {
-  background-color: #21262C;
+  background-color: rgb(21, 25, 30);
   color: #fff;
   margin: 0;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -115,19 +115,13 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-button {
+html, body, #root {
-  border: none;
+  height: 100%;
-  background-color: #ccc;
-  color: black;
-  font-size: 16px;
-  font-weight: bold;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
 }
 
-button:hover, button:active {
+#root {
-  background-color: #888;
+  display: flex;
+  flex-direction: column;
 }
 
 a {
@@ -138,23 +132,3 @@ a {
 a:hover, a:active {
   color: rgb(76, 134, 173);
 }
-
-.page {
-  margin: 0 auto;
-  max-width: 960px;
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px;
-}
-
-.page input {
-  padding: 8px 4px;
-  font-size: 16px;
-  border-radius: 4px;
-  border: 1px solid #888;
-}
-
-.page input, .page button {
-  display: block;
-  margin-top: 16px;
-}