Additional in-room PTT styling

src/room/PTTCallView.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
-import { Button } from "../button";
+import { Button, HangupButton, InviteButton, SettingsButton } from "../button";
 import { Header, LeftNav, RightNav, RoomSetupHeaderInfo } from "../Header";
 import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
@@ -38,39 +38,45 @@ export function PTTCallView({
         <LeftNav>
           <RoomSetupHeaderInfo roomName={roomName} onPress={onLeave} />
         </LeftNav>
-        <RightNav>
-          <Button variant="secondaryHangup" onPress={onLeave}>
-            Leave
-          </Button>
-          <Button variant="icon" onPress={() => inviteModalState.open()}>
-            <AddUserIcon />
-          </Button>
-          <Button variant="icon" onPress={() => settingsModalState.open()}>
-            <SettingsIcon />
-          </Button>
-        </RightNav>
+        <RightNav />
       </Header>
-      <div className={styles.headerSeparator} />
-      <div className={styles.participants}>
-        <p>{`${participants.length} user${
-          participants.length > 1 ? "s" : ""
-        } connected`}</p>
-        <Facepile client={client} participants={participants} />
-      </div>
       <div className={styles.center}>
-        <PTTButton
-          client={client}
-          activeSpeaker={activeSpeaker}
-          groupCall={groupCall}
-        />
-        <p className={styles.actionTip}>Press and hold spacebar to talk</p>
-        {userMediaFeeds.map((callFeed) => (
-          <PTTFeed
-            key={callFeed.userId}
-            callFeed={callFeed}
-            audioOutputDevice={audioOutput}
+        <div className={styles.participants}>
+          <p>{`${participants.length} ${
+            participants.length > 1 ? "people" : "person"
+          } connected`}</p>
+          <Facepile
+            size="md"
+            max={8}
+            className={styles.facepile}
+            client={client}
+            participants={participants}
           />
-        ))}
+        </div>
+        <div className={styles.talkingInfo}>
+          <h2>Talking...</h2>
+          <p>00:01:24</p>
+        </div>
+        <div className={styles.pttButtonContainer}>
+          <PTTButton
+            client={client}
+            activeSpeaker={activeSpeaker}
+            groupCall={groupCall}
+          />
+          <p className={styles.actionTip}>Press and hold spacebar to talk</p>
+          {userMediaFeeds.map((callFeed) => (
+            <PTTFeed
+              key={callFeed.userId}
+              callFeed={callFeed}
+              audioOutputDevice={audioOutput}
+            />
+          ))}
+        </div>
+        <div className={styles.footer}>
+          <SettingsButton onPress={() => settingsModalState.open()} />
+          <HangupButton onPress={onLeave} />
+          <InviteButton onPress={() => inviteModalState.open()} />
+        </div>
       </div>
 
       {settingsModalState.isOpen && (

src/room/PTTCallView.module.css

@@ -2,6 +2,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   overflow: hidden;
   min-height: 100%;
   position: fixed;
@@ -9,32 +10,62 @@
   width: 100%;
 }
 
-.headerSeparator {
-  width: calc(100% - 40px);
-  height: 1px;
-  margin: 0 20px;
-  background-color: #21262C;
-}
-
 .center {
   width: 100%;
   display: flex;
   flex: 1;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  margin-top: 48px;
 }
 
 .actionTip {
   margin-top: 42px;
+  margin-bottom: 45px;
   font-size: 17px;
 }
 
 .participants {
-  margin: 24px 20px 0 20px;
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  margin-bottom: 67px;
 }
 
 .participants > p {
   color: #A9B2BC;
   margin-bottom: 8px;
+}
+
+.facepile {
+  align-self: center;
+}
+
+.talkingInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 38px;
+}
+
+.pttButtonContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+}
+
+.footer > * {
+  margin-right: 30px;
+}
+
+.footer > :last-child {
+  margin-right: 0px;
 }