Refactored buttons and modals to be separate

src/modals/AddPartyMemberModal.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Box, Label, Text } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function AddPartyMemberModal({ isOpen, onRequestClose, gameId }) {
+  return (
+    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+      <Box>
+        <Label pt={2} pb={1}>
+          Invite players
+        </Label>
+        <Text as="p" mb={2} variant="caption">
+          Other people can join using the game ID
+        </Text>
+        <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
+          <Text>{gameId}</Text>
+        </Box>
+        <Text as="p" my={2} variant="caption">
+          Or by using this link
+        </Text>
+        <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
+          <Text>{window.location.href}</Text>
+        </Box>
+      </Box>
+    </Modal>
+  );
+}
+
+export default AddPartyMemberModal;