Skip to content

Fix Terms And Licenses text styles#7483

Merged
luacmartins merged 4 commits into
Expensify:mainfrom
kidroca:kidroca/fix-login-text-align
Feb 1, 2022
Merged

Fix Terms And Licenses text styles#7483
luacmartins merged 4 commits into
Expensify:mainfrom
kidroca:kidroca/fix-login-text-align

Conversation

@kidroca

@kidroca kidroca commented Jan 31, 2022

Copy link
Copy Markdown
Contributor

Use parent element so text wrapping occurs "naturally"

Details

Fixed Issues

$ #7437

Tests

  • On the login screen
  • verify text line wrapping looks ok in English and Spanish
    • "El envío de dinero es brindado por Expensify..." should not be starting on a new line
  • using browser zoom does not cause weird text wrapping (e.g. spacing word centering, see comparison screenshot below)

QA Steps

Same as above

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

No diff for English (staging vs local)

image

Spanish wrapping fixed

image

150% zoom (staging vs local)

image

Mobile Web

image

image

Desktop

image

image

iOS

image

image

Android

image

image

Use <Text> parent element so text wrapping occurs "naturally"
@kidroca kidroca requested a review from a team as a code owner January 31, 2022 15:01
@MelvinBot MelvinBot requested review from luacmartins and parasharrajat and removed request for a team January 31, 2022 15:01
Comment thread src/pages/signin/TermsAndLicenses.js Outdated
@kidroca

kidroca commented Jan 31, 2022

Copy link
Copy Markdown
Contributor Author

Not sure what's causing the checks to fail, I branched of main at: 2cdb7c3 (today's latest for me)

Error: .github/workflows/e2e.yml (Line: 56, Col: 16):
Error: The template is not valid. .github/workflows/e2e.yml (Line: 56, Col: 16): hashFiles('**/Podfile.lock') couldn't finish within 120 seconds.

Comment thread src/pages/signin/TermsAndLicenses.js Outdated
Comment thread src/pages/signin/TermsAndLicenses.js Outdated

@luacmartins luacmartins left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I agree with Rajat's suggestions. Otherwise, code looks good.
I haven't seen that error before, but I'm asking around. For now, I'll restart the job to see if that fixes it.

@parasharrajat parasharrajat left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think now we can combine some of the phrases as well. Such as phrases 6 and 7.

Comment thread src/pages/signin/TermsAndLicenses.js Outdated
Comment thread src/pages/signin/TermsAndLicenses.js Outdated
Comment thread src/pages/signin/TermsAndLicenses.js Outdated
Comment thread src/pages/signin/TermsAndLicenses.js Outdated
Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
@kidroca

kidroca commented Jan 31, 2022

Copy link
Copy Markdown
Contributor Author

@parasharrajat I've accepted the suggestions but they resulted in unsigned commits
image

Was I expected to apply them manually?

I see there are some lint issues as well, so I'll submit another commit

@parasharrajat

parasharrajat commented Jan 31, 2022

Copy link
Copy Markdown
Member

Yeah Please fix the lint issues. Github gives limited options for code suggestions.

But Code signing is fine and both are verified. As two users signed the commit it goes to vigilant mode. I don't know why it happens but GitHub does that. https://docs.github.com/github/authenticating-to-github/displaying-verification-statuses-for-all-of-your-commits.
image

parasharrajat
parasharrajat previously approved these changes Jan 31, 2022

@parasharrajat parasharrajat left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM.

A suggestion could be to merge the adjacent phrases. e.g.

            {props.translate('termsOfUse.phrase5')}
            {' '}
            {props.translate('termsOfUse.phrase6')}

Leaving this suggestion to @luacmartins to decide.

🎀 👀 🎀 C+ reviewed

@kidroca

kidroca commented Jan 31, 2022

Copy link
Copy Markdown
Contributor Author

A suggestion could be to merge the adjacent phrases. e.g.

Yeah, it seems artificially split, should be no longer necessary, but I'm done for today
image

@luacmartins

Copy link
Copy Markdown
Contributor

Since we are touching this code, I think it would be a good cleanup to merge the adjacent phrases as suggested. Thanks for the suggestion @parasharrajat!

@kidroca

kidroca commented Feb 1, 2022

Copy link
Copy Markdown
Contributor Author

Joined phrases 5 and 6

@parasharrajat parasharrajat left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM.

cc: @luacmartins
🎀 👀 🎀 C+ reviewed

@luacmartins luacmartins left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM! Thanks for the changes @kidroca!

@luacmartins luacmartins merged commit 3b5d9e5 into Expensify:main Feb 1, 2022
@OSBotify

OSBotify commented Feb 1, 2022

Copy link
Copy Markdown
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify

OSBotify commented Feb 1, 2022

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by @luacmartins in version: 1.1.33-4 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@kavimuru

kavimuru commented Feb 2, 2022

Copy link
Copy Markdown

@kidroca , Placeholder text and entered email are overlapping and not completely visible if the font size in the device is set to large.
Is this expected or you need a separate issue to be created for this?
Bug5433915_Screenshot_20220201-165216_New_Expensify

@kidroca kidroca deleted the kidroca/fix-login-text-align branch February 2, 2022 08:02
@kidroca

kidroca commented Feb 2, 2022

Copy link
Copy Markdown
Contributor Author

I think this is expected unless it only happens on this PR

I suggested zooming too verify the text for Terms and Conditions would wrap correctly when it has too

Maybe we should open a ticket about setting font size to large, but isn’t that covered under accessibility issues, e.g. existing ticket somewhere

@OSBotify

OSBotify commented Feb 2, 2022

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by @sketchydroide in version: 1.1.34-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

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.

5 participants