address suggestions

custom/fitness-demo/components/Call/ChatAside.js

@@ -18,6 +18,7 @@ export const ChatAside = () => {
   const playMessageSound = useMessageSound();
   const [showEmojis, setShowEmojis] = useState(false);
 
+  const emojis = ['😍', '😭', '😂', '👋', '🙏'];
   const chatWindowRef = useRef();
 
   useEffect(() => {
@@ -59,55 +60,16 @@ export const ChatAside = () => {
       </div>
       {showEmojis && (
         <div className="emojis">
-          <Button
+          {emojis.map(emoji => (
-            variant="gray"
+            <Button
-            size="small-circle"
+              key={emoji}
-            onClick={() => sendMessage('😍')}
+              variant="gray"
-          >
+              size="small-circle"
-            😍
+              onClick={() => sendMessage(emoji)}
-          </Button>
+            >
-          <Button
+              {emoji}
-            variant="gray"
+            </Button>
-            size="small-circle"
+          ))}
-            onClick={() => sendMessage('😭')}
-          >
-            😭
-          </Button>
-          <Button
-            variant="gray"
-            size="small-circle"
-            onClick={() => sendMessage('😂')}
-          >
-            😂
-          </Button>
-          <Button
-            variant="gray"
-            size="small-circle"
-            onClick={() => sendMessage('👋')}
-          >
-            👋
-          </Button>
-          <Button
-            variant="gray"
-            size="small-circle"
-            onClick={() => sendMessage('👌')}
-          >
-            👌
-          </Button>
-          <Button
-            variant="gray"
-            size="small-circle"
-            onClick={() => sendMessage('👏')}
-          >
-            👏
-          </Button>
-          <Button
-            variant="gray"
-            size="small-circle"
-            onClick={() => sendMessage('🙏')}
-          >
-            🙏
-          </Button>
         </div>
       )}
       <footer className="chat-footer">

custom/fitness-demo/components/Call/PeopleAside.js

@@ -61,7 +61,6 @@ const PersonRow = ({ participant, isOwner = false }) => (
         align-items: center;
         flex: 1;
       }
-
       .person-row .name {
         text-overflow: ellipsis;
         overflow: hidden;
@@ -72,7 +71,6 @@ const PersonRow = ({ participant, isOwner = false }) => (
         gap: var(--spacing-xxxs);
         margin-left: var(--spacing-xs);
       }
-
       .mute-state {
         display: flex;
         width: 24px;
@@ -80,7 +78,6 @@ const PersonRow = ({ participant, isOwner = false }) => (
         align-items: center;
         justify-content: center;
       }
-
       .state.error {
         color: var(--red-default);
       }
@@ -142,7 +139,6 @@ export const PeopleAside = () => {
             .people-aside {
               display: block;
             }
-
             .owner-actions {
               display: flex;
               align-items: center;
@@ -150,7 +146,6 @@ export const PeopleAside = () => {
               margin: var(--spacing-xs) var(--spacing-xxs);
               flex: 1;
             }
-
             .rows {
               margin: var(--spacing-xxs);
               flex: 1;

custom/fitness-demo/components/Prejoin/Intro.js

@@ -80,54 +80,60 @@ export const Intro = ({
       </Card>
       <span className="or-text">OR</span>
       <Card>
-        <div className="jc-card">
+        <form onSubmit={(e) => {
-          <CardHeader>Create a class</CardHeader>
+          e.preventDefault();
-          <CardBody>
+          onJoin(slugify.convert(roomName), 'create', duration, privacy)
-            {error && (
+        }}>
-              <Well variant="error">
+          <div className="jc-card">
-                Failed to create class <p>{error}</p>
+            <CardHeader>Create a class</CardHeader>
-              </Well>
+            <CardBody>
-            )}
+              {error && (
-            {tokenError && (
+                <Well variant="error">
-              <Well variant="error">
+                  Failed to create class <p>{error}</p>
-                Failed to obtain token <p>{tokenError}</p>
+                </Well>
-              </Well>
+              )}
-            )}
+              {tokenError && (
-            <Field label="Give your class a name">
+                <Well variant="error">
-              <TextInput
+                  Failed to obtain token <p>{tokenError}</p>
-                type="text"
+                </Well>
-                placeholder="Eg. Super stretchy morning flow"
+              )}
-                defaultValue={roomName}
+              <Field label="Give your class a name">
-                onChange={(e) => setRoomName(e.target.value)}
+                <TextInput
-                required
+                  type="text"
-              />
+                  placeholder="Eg. Super stretchy morning flow"
-            </Field>
+                  defaultValue={roomName}
-            <Field label="How long would you like to be?">
+                  onChange={(e) => setRoomName(e.target.value)}
-              <SelectInput
+                  required
-                onChange={(e) => setDuration(e.target.value)}
+                />
-                value={duration}>
+              </Field>
-                <option value="15">15 minutes</option>
+              <Field label="How long would you like to be?">
-                <option value="30">30 minutes</option>
+                <SelectInput
-                <option value="60">60 minutes</option>
+                  onChange={(e) => setDuration(e.target.value)}
-              </SelectInput>
+                  value={duration}>
-            </Field>
+                  <option value="15">15 minutes</option>
-            <Field label="Public (anyone can join)">
+                  <option value="30">30 minutes</option>
-              <BooleanInput
+                  <option value="60">60 minutes</option>
-                value={privacy}
+                </SelectInput>
-                onChange={e => setPrivacy(e.target.checked)}
+              </Field>
-              />
+              <Field label="Privacy">
-            </Field>
+                <BooleanInput
-          </CardBody>
+                  value={privacy}
-          <CardFooter>
+                  onChange={e => setPrivacy(e.target.checked)}
-            <Button
+                />
-              loading={fetching}
+                <p>{privacy ? 'Public class (anyone can join the class)': 'Private (attendees will request access to class)'}</p>
-              fullWidth
+              </Field>
-              onClick={() => onJoin(slugify.convert(roomName), 'create', duration, privacy)}
+            </CardBody>
-            >
+            <CardFooter>
-              {fetching ? 'Creating...' : 'Create class'}
+              <Button
-            </Button>
+                loading={fetching}
-          </CardFooter>
+                fullWidth
-        </div>
+                type="submit"
+              >
+                {fetching ? 'Creating...' : 'Create class'}
+              </Button>
+            </CardFooter>
+          </div>
+        </form>
       </Card>
       <style jsx>{`
         .intro {
@@ -157,6 +163,24 @@ export const Intro = ({
         .jc-card {
           width: 25vw;
         }
+        @media screen and (max-width: 650px) {
+          .intro {
+            display: flex;
+            flex-direction: column;
+          }
+          .jc-card {
+            width: 75vw;
+          }
+        }
+        @media (min-width: 650px) and (max-width: 1000px) {
+          .intro {
+            display: flex;
+            flex-direction: column;
+          }
+          .jc-card {
+            width: 50vw;
+          }
+        }
       `}
       </style>
     </div>

custom/shared/components/Tray/BasicTray.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { NETWORK_ASIDE } from '@custom/shared/components/Aside/NetworkAside';
 import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
 import Button from '@custom/shared/components/Button';
@@ -19,6 +19,7 @@ import { ReactComponent as IconSettings } from '@custom/shared/icons/settings-md
 import { Tray, TrayButton } from './Tray';
 
 export const BasicTray = () => {
+  const ref = useRef(null);
   const responsive = useResponsive();
   const [showMore, setShowMore] = useState(false);
   const { callObject, leave } = useCallState();
@@ -35,6 +36,18 @@ export const BasicTray = () => {
     return callObject.setLocalAudio(newState);
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target))
+        setShowMore(false);
+    };
+
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, []);
+
   return (
     <Tray className="tray">
       <TrayButton
@@ -52,7 +65,7 @@ export const BasicTray = () => {
         {isMicMuted ? <IconMicOff /> : <IconMicOn />}
       </TrayButton>
       {responsive.isMobile() && showMore && (
-        <div className="more-options">
+        <div className="more-options" ref={ref}>
           <Button
             className="translucent"
             onClick={() => openModal(DEVICE_MODAL)}