From 9cf4c14c1491d04619893bf3202a2198ff1628b7 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 6 Apr 2020 15:51:05 +1000
Subject: [PATCH] Changed nickname change modal styling and added link in add
 party modal

---
 src/components/AddPartyMemberButton.js |  6 +++++-
 src/components/Nickname.js             | 14 +++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index 6f1c69a..abe8900 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/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>
     </>
diff --git a/src/components/Nickname.js b/src/components/Nickname.js
index 723fc36..8e4d3b8 100644
--- a/src/components/Nickname.js
+++ b/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>
     </>