Changed nickname change modal styling and added link in add party modal

src/components/AddPartyMemberButton.js

@@ -30,10 +30,14 @@ function AddPartyMemberButton({ gameId }) {
       </Flex>
       <Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
         <Box>
-          <Label p={2}>Other people can join using your ID › ʕ•ᴥ•ʔ</Label>
+          <Label p={2}>Other people can join using your ID</Label>
           <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
             <Text>{gameId}</Text>
           </Box>
+          <Label p={2}>Or by using this link</Label>
+          <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
+            <Text>{window.location.href}</Text>
+          </Box>
         </Box>
       </Modal>
     </>

src/components/Nickname.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Text, Box, Input, Button, Label, IconButton } from "theme-ui";
+import { Text, Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
 
 import Modal from "./Modal";
 
@@ -70,15 +70,19 @@ function Nickname({ nickname, allowChanging, onChange }) {
       </Text>
       <Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
         <Box as="form" onSubmit={handleChangeSubmit}>
-          <Label htmlFor="nicknameChange">Change your nickname</Label>
+          <Label p={2} htmlFor="nicknameChange">
+            Change your nickname
+          </Label>
           <Input
             id="nicknameChange"
             value={changedNickname}
             onChange={handleChange}
-            mt={1}
-            mb={3}
           />
-          <Button disabled={!changedNickname}>Change</Button>
+          <Flex py={2}>
+            <Button sx={{ flexGrow: 1 }} disabled={!changedNickname}>
+              Change
+            </Button>
+          </Flex>
         </Box>
       </Modal>
     </>