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

This commit is contained in:
Mitchell McCaffrey 2020-04-06 15:51:05 +10:00
parent bd5cfbbd4b
commit 9cf4c14c14
2 changed files with 14 additions and 6 deletions

View File

@ -30,10 +30,14 @@ function AddPartyMemberButton({ gameId }) {
</Flex> </Flex>
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}> <Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
<Box> <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%)"> <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
<Text>{gameId}</Text> <Text>{gameId}</Text>
</Box> </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> </Box>
</Modal> </Modal>
</> </>

View File

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