Page MenuHomePhabricator

[native] Style RegistrationTerms
ClosedPublic

Authored by ashoat on Jun 9 2023, 12:10 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Apr 27, 9:32 AM
Unknown Object (File)
Thu, Apr 18, 2:44 AM
Unknown Object (File)
Thu, Apr 18, 2:44 AM
Unknown Object (File)
Thu, Apr 18, 2:39 AM
Unknown Object (File)
Mar 7 2024, 4:50 PM
Unknown Object (File)
Feb 23 2024, 6:41 PM
Unknown Object (File)
Feb 23 2024, 6:04 PM
Unknown Object (File)
Feb 23 2024, 4:19 PM

Details

Summary

This concludes the stack that addresses ENG-3951, and updates the screen to match designs.

Depends on D8163

Test Plan

Screenshot 2023-06-09 at 4.11.35 PM.png (2×1 px, 874 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ashoat added inline comments.
native/account/registration/registration-terms.react.js
5 ↗(On Diff #27594)

I tried using expo-image instead of React Native's one, but it didn't seem to handle the png resource correctly for some reason (rendered empty). cc @bartek

18 ↗(On Diff #27594)

I initially tried exporting an SVG from Figma. It rendered okay in Chrome, but the gradients didn't seem to work with react-native-svg:

Screenshot 2023-06-09 at 2.17.26 PM.png (2×1 px, 857 KB)

For context, here's the react-native-svg component I had drafted from the .svg source: https://gist.github.com/Ashoat/70c485b47bd71d7211aa86631aaf15c3

cc @ted

121 ↗(On Diff #27594)

This was the only color in native/themes/colors.js that used violetDark100 in dark mode. link and purpleLink use violetDark100 in light mode, but in dark mode they both use violetLight100.

@ted, are you sure that we should be using violetDark100 and not violetLight100 here? If so, should we consider updating link and purpleLink in dark mode to match?

atul added inline comments.
native/account/registration/registration-terms.react.js
18 ↗(On Diff #27594)

Generally prefer vector assets instead of raster ones, but don't think it matters much here

This revision is now accepted and ready to land.Jun 9 2023, 12:29 PM
native/account/registration/registration-terms.react.js
18 ↗(On Diff #27594)

Ok disregard, submitted comment before your annotation showed up

native/account/registration/registration-terms.react.js
121 ↗(On Diff #27594)

Thanks for the ping and catch!

I took a quick look at our app and did find the violetLight100 being used for text links such as here:

IMG_1239.jpg (384×1 px, 42 KB)

I think that shade of violet works here with the background its in. So let's not change anything but update this new design to use violetLight100

So I think this works:

hyperlinkText: {
   color: 'purpleLink',

purpleLink instead of purpleButton

Increase comm-swoosh.png resolution

This revision was landed with ongoing or failed builds.Jun 9 2023, 2:24 PM
This revision was automatically updated to reflect the committed changes.