Settings Redesign

[benisgold]

Fixes TEAM2-247, TEAM2-78, TEAM2-77, TEAM2-79

Figma link (if any): https://www.figma.com/file/Xc4Pq3CLJNVG52z1K0URvP/notifications?node-id=647:4924

What changed (plus any additional context for devs)

• settings redesign on all settings pages
• typescript everything
• foundation for notification settings
• replaced all existing components with design system equivalents, including screens that weren't explicitly redesigned

Screen recordings / screenshots

https://www.loom.com/share/ec325c353a5743ce9f00ecc06d7b6879

What to test

• make sure all settings screens are still there
• make sure no functionality has changed
• make sure the implementation matches the figma designs (see above)
• go to src/components/settings-menu/SettingsSection.tsx and enable + test all the settings that may be hidden for various reasons. should be as easy as replacing something like {conditional + <Component />} with {true + <Component />}

Final checklist

• [ ] Assigned individual reviewers?
• [ ] Added labels? (team1/team2, critical path, release, dev QA)
• [ ] Did you test both iOS and Android?
• [ ] If your changes are visual, did you check both the light and dark themes?
• [ ] Added e2e tests? If not, please specify why
• [ ] If you added new critical path files, did you update the CODEOWNERS file?
• [ ] If no dev QA label, did you add the PR to the QA Queue?

[linear[bot]]

TEAM2-247 Notifications Screen

Add a placeholder screen for the Notifications settings

Can be done in parallel with TEAM2-78

TEAM2-78 Notifications menu item in Settings

PixelSnap 2022-06-01 at 7.22.55 [email protected]

Add a new item to the settings stack that takes you to a settings page for notifications.

[linear[bot]]

TEAM2-77 Icons for Settings pages should have shadows

image.png

TEAM2-79 New group + row styles for Settings

PixelSnap 2022-06-01 at 7.00.26 [email protected]

PixelSnap 2022-06-01 at 7.00.38 [email protected]

PixelSnap 2022-06-01 at 7.00.50 [email protected]

Need new components for the updated design. Naming and structure can be adjusted.

Best place to start would be to refactor the main Settings menu, and then the others can follow.

• Menu
  • a container for one or more MenuItem children
  • has a shadow
  • has rounded corners
  • has optional description text underneath (see "Public Showcase")
  • animates when more MenuItem children are added or removed (e.g. in Notifications)
• MenuItem
  • has padding
  • has a border between each MenuItem
  • has an onPress action
  • has an optional leftComponent prop that accepts a component (e.g. menu icons)
  • has an optional rightComponent prop that accepts a component (e.g. green check & selection text)
    • MenuItem.Selected component for selection text
    • MenuItem.Checkmark component for checkmarks
    • MenuItem.Switch component for switches
  • has a hasRightArrow prop (for right aligned arrow)
  • has a labelComponent prop that accepts a component (see "Received, Sold, Minted")
    • MenuItemLabel component for label
  • animates scale when pressed

[jxom]

/testflight

[jxom]

/testflight

[jkadamczyk]

Code looks super well! Issues found:

• The statusbar color is not changing when you open the settings modal and the background is going dark. Would make sense to make the statusbar color change when opening the settings modal and go back to previous when closing it. I think it may be a regression since the prod version changes the status bar theme

[jxom]

/testflight

[benisgold]

@jkadamczyk do you mean you see a white status bar? i see a black status bar, the same as develop

[benisgold]

/testflight

[brunobar79]

CI failing

[pugson]

rebase required 😭

[benisgold]

/testflight

[benisgold]

thanks for the qa @BrodyHughes !!

1. randomly large button: i think i fixed this in a very recent commit (so understandable why you might have missed it) but i will double check.
2. design stuff: i went over it thoroughly with Jeremy a few times over so I think we're probably set on that front
3. notifications menu: this is intentionally just a skeleton, pugson is working on the functionality. it's hidden behind the notifications feature flag and isn't user-facing.
4. missing context menu: i implemented that in a separate pr (https://github.com/rainbow-me/rainbow/pull/3764) that i planned on merging after, but i think i'll just include that here

will work on these action items and get back to you when they are complete

[BrodyHughes]

absolutely killing it 🥇

[benisgold]

[benisgold]

@BrodyHughes

here's an edit wallet context menu demo

https://www.loom.com/share/9075603e7b4e41d8b6d1e8a9b97fb9f5

[benisgold]

TF 1.7.2 (6)

[benisgold]

Some fixes:

[benisgold]

/testflight

[benisgold]

TF 1.7.2 (10)

will convert to SlackSheet in follow-up pr

[benisgold]

@BrodyHughes

1. it won't do anything in the app, since this it's pointless to hide your showcase from yourself (hides only to other people). you can check that it works by toggling privacy and seeing that it updates on your rainbow web profile (just verified that it works).
2. fixed! ty for the spot
3. yes, pugson is working on implementation
4. found out that feature flags don't work on TFs (maybe they can if you do something special?). i checked this by testing feature flags on unrelated TFs.
5. yep!

[skylarbarrera]

lfg