Refactored buttons and modals to be separate

src/components/StartStreamButton.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { IconButton, Box, Text, Button, Label, Flex, Link } from "theme-ui";
+import { IconButton, Box, Text, Link } from "theme-ui";
 import adapter from "webrtc-adapter";
 
-import Modal from "./Modal";
+import StartStreamModal from "../modals/StartStreamModal";
 
 function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
   const [isStreamModalOpoen, setIsStreamModalOpen] = useState(false);
@@ -89,30 +89,17 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
           <path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
         </svg>
       </IconButton>
-      <Modal isOpen={isStreamModalOpoen} onRequestClose={closeModal}>
-        <Box>
-          <Label pt={2} pb={1}>
-            Radio (experimental)
-          </Label>
-          <Text as="p" mb={2} variant="caption">
-            Share your computers audio with the party
-          </Text>
-          {!isSupported && unavailableMessage}
-          {isSupported && !stream && noAudioTrack && noAudioMessage}
-          <Flex py={2}>
-            {isSupported && !stream && (
-              <Button sx={{ flexGrow: 1 }} onClick={handleStreamStart}>
-                Start Radio
-              </Button>
-            )}
-            {isSupported && stream && (
-              <Button sx={{ flexGrow: 1 }} onClick={() => onStreamEnd(stream)}>
-                Stop Radio
-              </Button>
-            )}
-          </Flex>
-        </Box>
-      </Modal>
+      <StartStreamModal
+        isOpen={isStreamModalOpoen}
+        onRequestClose={closeModal}
+        isSupported={isSupported}
+        unavailableMessage={unavailableMessage}
+        stream={stream}
+        noAudioTrack={noAudioTrack}
+        noAudioMessage={noAudioMessage}
+        onStreamStart={handleStreamStart}
+        onStreamEnd={onStreamEnd}
+      />
     </>
   );
 }