Added content to FAQ page for audio sharing

src/components/Nickname.js

@@ -49,7 +49,6 @@ function Nickname({ nickname, stream }) {
         sx={{
           position: "relative",
           cursor: stream ? "pointer" : "default",
-          fontSize: "12px",
         }}
         onClick={() => {
           if (stream) {

src/components/StartStreamButton.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { IconButton, Box, Text, Button, Label, Flex } from "theme-ui";
+import { IconButton, Box, Text, Button, Label, Flex, Link } from "theme-ui";
 import adapter from "webrtc-adapter";
 
 import Modal from "./Modal";
@@ -16,24 +16,24 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
 
   const unavailableMessage = (
     <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
-      <Text as="p">
+      <Text as="p" variant="body2">
-        Browser not supported.
+        Browser not supported for audio sharing.
         <br />
         <br />
-        See FAQ for more information.
+        See <Link href="#/faq">FAQ</Link> for more information.
       </Text>
     </Box>
   );
 
   const noAudioMessage = (
     <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
-      <Text as="p">
+      <Text as="p" variant="body2">
         No audio found in screen share.
         <br />
         Ensure "Share audio" is selected when sharing.
         <br />
         <br />
-        See FAQ for more information.
+        See <Link href="#/faq">FAQ</Link> for more information.
       </Text>
     </Box>
   );

src/routes/FAQ.js

@@ -1,8 +1,10 @@
 import React from "react";
-import { Flex, Text } from "theme-ui";
+import { Flex, Text, Link, Image } from "theme-ui";
 
 import Footer from "../components/Footer";
 
+import audioSharingImage from "../images/AudioSharingFAQ.png";
+
 function FAQ() {
   return (
     <Flex
@@ -16,14 +18,48 @@ function FAQ() {
       <Flex
         sx={{
           flexDirection: "column",
-          justifyContent: "center",
+          maxWidth: "500px",
-          maxWidth: "300px",
           flexGrow: 1,
         }}
-        mb={2}
+        my={2}
       >
-        <Text variant="display" as="h1" sx={{ textAlign: "center" }}>
+        <Text my={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
-          FAQ
+          Frequently Asked Questions
+        </Text>
+        <Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
+          Using Radio (experimental)
+        </Text>
+        <Text my={1} variant="heading" as="h3">
+          No audio found in screen share.
+        </Text>
+        <Text variant="body2" as="p">
+          When using audio sharing you must select the{" "}
+          <strong>Share audio</strong> option when choosing the browser tab or
+          screen to share. Support for sharing audio depends on browser and
+          operating system. Currently Google Chrome on Windows allows you to
+          share the audio of any tab or an entire screen while on MacOS you can
+          only share the audio of a tab. For an example of selecting the{" "}
+          <strong>Share audio</strong> option for a tab on MacOS see Figure 1.
+        </Text>
+        <Image mt={2} src={audioSharingImage} sx={{ borderRadius: "4px" }} />
+        <Text my={1} variant="caption" as="p">
+          <strong>Figure 1 Using Audio Sharing.</strong> First select what type
+          of content you would like to share. Second select the content. Third
+          select Share audio. Fourth select Share.
+        </Text>
+
+        <Text my={1} variant="heading" as="h3">
+          Browser not supported for audio sharing.
+        </Text>
+        <Text variant="body2" as="p">
+          Using audio sharing relies on the browser supporting the audio capture
+          feature of the Screen Capture API. Currently the two browsers that
+          support this are Google Chrome and Microsoft Edge. To see if your
+          browser is supported see the{" "}
+          <Link href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility">
+            Browser Compatability chart
+          </Link>{" "}
+          on the Mozilla Developer Network.
         </Text>
       </Flex>
       <Footer />

src/theme.js

@@ -51,7 +51,7 @@ export default {
     },
     body2: {
       fontFamily: "body2",
-      fontSize: 1,
+      fontSize: 0,
       fontWeight: "body",
     },
   },
@@ -89,7 +89,8 @@ export default {
       fontSize: 1,
     },
     a: {
-      variant: "textStyles.caption",
+      variant: "text.body2",
+      color: "text",
       "&:hover": {
         color: "primary",
       },