visuals in prepaid Balance view and postpaid Phone view need polish

RESOLVED FIXED

Status

RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: marcoc, Assigned: salva)

Tracking

unspecified
x86
Mac OS X

Firefox Tracking Flags

(blocking-b2g:-, b2g18+ fixed)

Details

(Whiteboard: UX-P1, TEF_REQ)

Attachments

(4 attachments)

(Reporter)

Description

6 years ago
Several elements in the visuals of the main app screens: balance and phone views are implemented inaccurately.
1. Top tabs are missing shadow line and thin grey line between tabs.
2. Padding between balance amount and tabs needs to be reduced.
3. Background color of active tab should go to white
4. Update button should be wider and font color should be darker
5. Text and Icons in 2 top-up buttons should be darker
6. Padding between Update button and line should match padding from thin line to top-up button.
7. Update, and Top-up buttons should be darker grey
8. Add a space in between Currency value (R$) and amount.
(Reporter)

Comment 1

6 years ago
Created attachment 710717 [details]
Current implementation of cost control Balance view visuals
(Reporter)

Comment 2

6 years ago
Created attachment 710720 [details]
Specified implementation of Balance view visuals
(Reporter)

Comment 3

6 years ago
Created attachment 710721 [details]
Specified implementation of Phone view visuals
(Reporter)

Comment 4

6 years ago
Balance updating spinner should be updated in app and credit module to new version in building block common controls which is thinner.
(Reporter)

Updated

6 years ago
Whiteboard: UX-P2, TEF_REQ
(Reporter)

Updated

6 years ago
Whiteboard: UX-P2, TEF_REQ → UX-P1, TEF_REQ
Assignee: nobody → salva
blocking-b2g: --- → leo?
tracking-b2g18: --- → ?
(In reply to marcoc from comment #0)
> Several elements in the visuals of the main app screens: balance and phone
> views are implemented inaccurately.
> 1. Top tabs are missing shadow line and thin grey line between tabs.
> 2. Padding between balance amount and tabs needs to be reduced.
> 3. Background color of active tab should go to white

All this is done.

> 4. Update button should be wider and font color should be darker

Button is wider but the color font is the one in the BB. With no modifications.

> 5. Text and Icons in 2 top-up buttons should be darker
> 6. Padding between Update button and line should match padding from thin
> line to top-up button.

Done.

> 7. Update, and Top-up buttons should be darker grey

They are like BB specify.

> 8. Add a space in between Currency value (R$) and amount.

Checking this as it can be more complicated than expected.
This polish sounds great, but appears some is already done, and nothing listed seems bad enough by itself to block the whole release.
Status: UNCONFIRMED → NEW
blocking-b2g: leo? → -
status-b2g18: --- → affected
tracking-b2g18: ? → +
Ever confirmed: true
> 8. Add a space in between Currency value (R$) and amount.

Problem here is a l10n one. Can anyone confirm currency formatting for réis is R$<amount> and not R$ <amount>? Until we have a confirmation I did not change this.
Flags: needinfo?
Flags: needinfo? → needinfo?(community)
Created attachment 742973 [details]
Polishing balance and telephony views
Attachment #742973 - Flags: review?(francisco.jordano)
We shouldn't generally assume that there's a ' ' between currency and amount, the whitespace should be part of the localized files. Not sure what's the correct way for the Real, though. Fernando, Reuben?
Flags: needinfo?(community)
Comment on attachment 742973 [details]
Polishing balance and telephony views

Tried on the phone and looking good, but being a pure css + markup bug I'm forwarding the review to Ismael :)

Thanks Salva!
Attachment #742973 - Flags: review?(francisco.jordano) → review?(igonzaleznicolas)
Comment on attachment 742973 [details]
Polishing balance and telephony views

As soon as the addressed issues are fixed in the PR you can merge it. By now i'll give you r+
Thanks!
Attachment #742973 - Flags: review?(igonzaleznicolas) → review+
Master: a76c63446ca010662584820843b1b08a5e12ec92
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Comment on attachment 742973 [details]
Polishing balance and telephony views

NOTE: Please see https://wiki.mozilla.org/Release_Management/B2G_Landing to better understand the B2G approval process and landings.

[Approval Request Comment]
Bug caused by (feature/regressing bug #): this one
User impact if declined: moderate (it is visually better now)
Testing completed: yes
Risk to taking this patch (and alternatives if risky): low (no code modified, only CSS)
String or UUID changes made by this patch: none
Attachment #742973 - Flags: approval-gaia-v1?
Attachment #742973 - Flags: approval-gaia-v1? → approval-gaia-v1+
I was not able to uplift this bug to v1-train.  If this bug has dependencies which are not marked in this bug, please comment on this bug.  If this bug depends on patches that aren't approved for v1-train, we need to re-evaluate the approval.  Otherwise, if this is just a merge conflict, you might be able to resolve it with:

  git checkout v1-train
  git cherry-pick -x -m1 a76c63446ca010662584820843b1b08a5e12ec92
  <RESOLVE MERGE CONFLICTS>
  git commit
The dependency here is the same as in bug 828155. But I'm uploading a commit without the HDPI resolution changes.
Depends on: 830644
v1-train: 4e7d63a83508caa391c4db164c3f68422d9ca5b6
status-b2g18: affected → fixed
You need to log in before you can comment on or make changes to this bug.