open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix welcome dialog page freezing bug

Browse Source
This commit is contained in:
mantikoros 2022-10-12 17:33:11 -05:00
parent 7a412fdb0d
commit 04a126707b
1 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/components/onboarding/welcome.tsx
View File

@ -54,47 +54,48 @@ export default function Welcome() {
if (isTwitch || !user || (!user.shouldShowWelcome && !groupSelectorOpen)) if (isTwitch || !user || (!user.shouldShowWelcome && !groupSelectorOpen))
return <></> return <></>
return ( if (groupSelectorOpen)
<> return (
<GroupSelectorDialog <GroupSelectorDialog
open={groupSelectorOpen} open={groupSelectorOpen}
setOpen={() => setGroupSelectorOpen(false)} setOpen={() => setGroupSelectorOpen(false)}
/> />
)
<Modal open={open} setOpen={toggleOpen}> return (
<Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg"> <Modal open={open} setOpen={toggleOpen}>
{page === 0 && <Page0 />} <Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
{page === 1 && <Page1 />} {page === 0 && <Page0 />}
{page === 2 && <Page2 />} {page === 1 && <Page1 />}
{page === 3 && <Page3 />} {page === 2 && <Page2 />}
<Col> {page === 3 && <Page3 />}
<Row className="place-content-between"> <Col>
<ChevronLeftIcon <Row className="place-content-between">
className={clsx( <ChevronLeftIcon
'h-10 w-10 text-gray-400 hover:text-gray-500', className={clsx(
page === 0 ? 'disabled invisible' : '' 'h-10 w-10 text-gray-400 hover:text-gray-500',
)} page === 0 ? 'disabled invisible' : ''
onClick={decreasePage} )}
/> onClick={decreasePage}
<PageIndicator page={page} totalpages={TOTAL_PAGES} /> />
<ChevronRightIcon <PageIndicator page={page} totalpages={TOTAL_PAGES} />
className={clsx( <ChevronRightIcon
'h-10 w-10 text-indigo-500 hover:text-indigo-600', className={clsx(
page === TOTAL_PAGES - 1 ? 'disabled invisible' : '' 'h-10 w-10 text-indigo-500 hover:text-indigo-600',
)} page === TOTAL_PAGES - 1 ? 'disabled invisible' : ''
onClick={increasePage} )}
/> onClick={increasePage}
</Row> />
<u </Row>
className="self-center text-xs text-gray-500" <u
onClick={() => toggleOpen(false)} className="self-center text-xs text-gray-500"
> onClick={() => toggleOpen(false)}
I got the gist, exit welcome >
</u> I got the gist, exit welcome
</Col> </u>
</Col> </Col>
</Modal> </Col>
</> </Modal>
) )
} }
@ -117,6 +118,7 @@ function PageIndicator(props: { page: number; totalpages: number }) {
<Row> <Row>
{[...Array(totalpages)].map((e, i) => ( {[...Array(totalpages)].map((e, i) => (
<div <div
key={i}
className={clsx( className={clsx(
'mx-1.5 my-auto h-1.5 w-1.5 rounded-full', 'mx-1.5 my-auto h-1.5 w-1.5 rounded-full',
i === page ? 'bg-indigo-500' : 'bg-gray-300' i === page ? 'bg-indigo-500' : 'bg-gray-300'