-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(datatrak): RN-1528: DataTrak PWA Welcome Screens #6030
base: rn-1479-pwa-setup
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These look neat! 👀
* Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd | ||
*/ | ||
|
||
function getPWADisplayMode() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bit less ambiguous to treat PWA as a “word” in camel case. (Unfortunate that web APIs capitalise entire abbreviations 🥲)
function getPWADisplayMode() { | |
function getPwaDisplayMode() { |
getPWADisplayMode() === 'standalone' || | ||
getPWADisplayMode() === 'fullscreen' || | ||
getPWADisplayMode() === 'minimal-ui' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I presume you meant to use displayMode
here?
getPWADisplayMode() === 'standalone' || | |
getPWADisplayMode() === 'fullscreen' || | |
getPWADisplayMode() === 'minimal-ui' | |
displayMode === 'standalone' || | |
displayMode === 'fullscreen' || | |
displayMode === 'minimal-ui' |
variant: 'h1', | ||
})` | ||
font-size: 1rem; | ||
margin-bottom: 1rem; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
margin-bottom: 1rem; | |
margin-block-end: 1rem; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I’d also suggest text-wrap: balance
on <Title>
and <Text>
const Dot = styled.button<{ $active: boolean }>` | ||
width: 0.5rem; | ||
height: 0.5rem; | ||
border-radius: 50%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doesn’t matter so much here because the width and height are hard-coded to be square, but using % values usually yields unwanted oval-ish results. This is a little more broadly applicable:
border-radius: 50%; | |
border-radius: calc(infinity * 1px); |
const steps = [ | ||
{ | ||
title: 'Welcome to Tupaia DataTrak!', | ||
text: "If you're here from MediTrak, welcome! Rest assured that you have all the same functionality as MediTrak, only better. Come for a quick tour of what's new.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
text: "If you're here from MediTrak, welcome! Rest assured that you have all the same functionality as MediTrak, only better. Come for a quick tour of what's new.", | |
text: 'If you’re here from MediTrak, welcome! Rest assured that you have all the same functionality as MediTrak, only better. Come for a quick tour of what’s new.', |
}, | ||
{ | ||
title: 'Projects', | ||
text: "From the home screen you can see which project you're in. Click on the project to swap to a different project.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
text: "From the home screen you can see which project you're in. Click on the project to swap to a different project.", | |
text: 'From the home screen you can see which project you’re in. Click on the project to swap to a different project.', |
imgPath: 'images/data-collection-woman.svg', | ||
}, | ||
{ | ||
title: 'Sync Status', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
title: 'Sync Status', | |
title: 'Sync status', |
Issue #: RN-1528: DataTrak PWA Welcome Screens
Changes:
user_account->preferences
in the DB using a new key calledhide_welcome_screen
Screenshots: