tutorial: update spacing to match spec

This commit is contained in:
Liam Fitzgerald 2021-02-22 13:08:13 +10:00
parent efd39b2419
commit ba167c8a63
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB

View File

@ -137,8 +137,8 @@ export function TutorialModal(props: { api: GlobalApi }) {
return ( return (
<Portal> <Portal>
<ModalOverlay dismiss={dismiss} borderRadius="2" maxWidth="270px" backgroundColor="white"> <ModalOverlay dismiss={dismiss} borderRadius="2" maxWidth="270px" backgroundColor="white">
<Col p="2" bg="lightBlue"> <Col p="4" bg="lightBlue">
<Col mb="1"> <Col mb="4">
<Text lineHeight="tall" fontWeight="bold"> <Text lineHeight="tall" fontWeight="bold">
Tutorial Finished Tutorial Finished
</Text> </Text>
@ -149,7 +149,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
<Text lineHeight="tall"> <Text lineHeight="tall">
This tutorial is finished. Would you like to leave Beginner Island? This tutorial is finished. Would you like to leave Beginner Island?
</Text> </Text>
<Row mt="2" gapX="2" justifyContent="flex-end"> <Row mt="4" gapX="2" justifyContent="flex-end">
<Button backgroundColor="washedGray" onClick={dismiss}> <Button backgroundColor="washedGray" onClick={dismiss}>
Later Later
</Button> </Button>
@ -215,7 +215,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
height="100%" height="100%"
width="100%" width="100%"
borderRadius="2" borderRadius="2"
p="2" p="4"
bg="lightBlue" bg="lightBlue"
> >
@ -230,15 +230,15 @@ export function TutorialModal(props: { api: GlobalApi }) {
/> />
<Box <Box
right="8px" right="16px"
top="8px" top="16px"
position="absolute" position="absolute"
cursor="pointer" cursor="pointer"
onClick={tryExit} onClick={tryExit}
> >
<Icon icon="X" /> <Icon icon="X" />
</Box> </Box>
<Col mb="1"> <Col mb="4">
<Text lineHeight="tall" fontWeight="bold"> <Text lineHeight="tall" fontWeight="bold">
{title} {title}
</Text> </Text>
@ -248,7 +248,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
</Col> </Col>
<Text lineHeight="tall">{description}</Text> <Text lineHeight="tall">{description}</Text>
<Row gapX="2" mt="3" justifyContent="flex-end"> <Row gapX="2" mt="4" justifyContent="flex-end">
{ progressIdx > 1 && ( { progressIdx > 1 && (
<Button bg="washedGray" onClick={prev}> <Button bg="washedGray" onClick={prev}>
Back Back