Skip to content
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

Open
wants to merge 9 commits into
base: rn-1479-pwa-setup
Choose a base branch
from

Conversation

tcaiger
Copy link
Contributor

@tcaiger tcaiger commented Dec 16, 2024

Issue #: RN-1528: DataTrak PWA Welcome Screens

Changes:

  • Add Welcome Screens
    • Only visible on PWA
    • Swipe-able on mobile devices
  • Handle updating user state for when user has completed welcome screens
    • Saved against user_account->preferences in the DB using a new key called hide_welcome_screen

Screenshots:

Screenshot 2024-12-19 at 4 26 41 PM Screenshot 2024-12-19 at 4 26 33 PM

@tcaiger tcaiger changed the title feat(datatrak): RN-1528: Welcome screens feat(datatrak): RN-1528: DataTrak PWA Welcome Screens Dec 17, 2024
Copy link
Contributor

@jaskfla jaskfla left a 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() {
Copy link
Contributor

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 🥲)

Suggested change
function getPWADisplayMode() {
function getPwaDisplayMode() {

Comment on lines +21 to +23
getPWADisplayMode() === 'standalone' ||
getPWADisplayMode() === 'fullscreen' ||
getPWADisplayMode() === 'minimal-ui'
Copy link
Contributor

@jaskfla jaskfla Dec 20, 2024

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?

Suggested change
getPWADisplayMode() === 'standalone' ||
getPWADisplayMode() === 'fullscreen' ||
getPWADisplayMode() === 'minimal-ui'
displayMode === 'standalone' ||
displayMode === 'fullscreen' ||
displayMode === 'minimal-ui'

variant: 'h1',
})`
font-size: 1rem;
margin-bottom: 1rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
margin-bottom: 1rem;
margin-block-end: 1rem;

Copy link
Contributor

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%;
Copy link
Contributor

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:

Suggested change
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.",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 youre here from MediTrak, welcome! Rest assured that you have all the same functionality as MediTrak, only better. Come for a quick tour of whats 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.",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 youre in. Click on the project to swap to a different project.',

imgPath: 'images/data-collection-woman.svg',
},
{
title: 'Sync Status',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: 'Sync Status',
title: 'Sync status',

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants