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