Skip to content

Reapply view quote screen designs#9905

Merged
darkwing merged 4 commits intodevelopfrom
reapply-view-quote-screen-designs
Dec 8, 2020
Merged

Reapply view quote screen designs#9905
darkwing merged 4 commits intodevelopfrom
reapply-view-quote-screen-designs

Conversation

@danjm
Copy link
Copy Markdown
Contributor

@danjm danjm commented Nov 18, 2020

This is a PR that contains the work reverted in #9904 (which was originally merged with #9612 and #9629

We may still end up using much of this code. This draft PR can be a place for further discussion if necessary, and will be updated as any new design changes are made.

@github-actions
Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [6f8958e]
Page Load Metrics (376 ± 57 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint338448168
domContentLoaded26965937411957
load27066137611957
domInteractive26965837411857

Base automatically changed from revert-view-quote-design-updates to develop November 19, 2020 01:40
@Gudahtt
Copy link
Copy Markdown
Member

Gudahtt commented Nov 19, 2020

I'm guessing this wasn't supposed to include the revert commits

@danjm danjm force-pushed the reapply-view-quote-screen-designs branch from 6f8958e to d70b4b9 Compare December 7, 2020 06:21
@danjm
Copy link
Copy Markdown
Contributor Author

danjm commented Dec 7, 2020

Below are screenshots of how it currently looks. Some of these require design or implmentation improvements for reasons stated below

👍 Sufficient funds, no warnings, no approval required:

👍 Insufficient funds warning:

👎 No warnings, but approval required. In popup view, metamask fee info is hidden below scroll:

👎 Price difference warning. Fee info hidden below the scroll in popup view, and terms of service pushed off screen in full screen view

@danjm danjm force-pushed the reapply-view-quote-screen-designs branch 2 times, most recently from 3c84132 to 3205899 Compare December 7, 2020 07:06
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [3205899]
Page Load Metrics (450 ± 43 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint3096572010
domContentLoaded3175844478943
load3185944509043
domInteractive3165844478943

@danjm danjm mentioned this pull request Dec 7, 2020
@jakehaugen
Copy link
Copy Markdown

jakehaugen commented Dec 7, 2020

A few tweaks to reduce how often scrolling is needed:

  1. Move the "Terms of Service" link to the "Build Quote" screen. Remove from the "View Quote" screen.
    Screen Shot 2020-12-07 at 11 01 56 AM

  2. Reduce spacing in gray header. This would only apply when there is an overlay (like in Swaps and Send). Move the heading up 8px and bottom align the actions in blue to the heading. Let me know if you see any problem with this change. cc: @rachelcope
    Screen Shot 2020-12-07 at 11 05 19 AM

  3. Move the timer container up 8px.
    Screen Shot 2020-12-07 at 11 11 37 AM

@rachelcope
Copy link
Copy Markdown

@jakehaugen LGTM!

danjm and others added 4 commits December 7, 2020 15:05
* Update main-quote-summary designs/styles

* Clean up css: use className instead of element types

* Style fixes to symbol elements in main-quote-view

* Use correct source for token iconUrls passed to main-quote-view

* Improve vertical spacing on view-quote screen and with new main-quote-view designs

* Remove unused classes

* Tweak space around large quote amount text in main-quote-summary
* Update fee card designs to show savings and MM fee

css touch up

More semantic html and remove unnecessary container wrapper

Update message for case when there are no savings, in new swaps fee card designs

Improve display of tilde in savings designs

* Ensure terms of service is shown when insufficient eth warning is shown on view-quote screen

* Logic simplification in fee-card.js

* Better center info tooltip icons in fee-card

* Add comment about use of \!important in fee card css

* Use container class property on info tooltip in fee card

* Remove function call that was made redundant with 980b140 but not removed during rebase
@darkwing darkwing force-pushed the reapply-view-quote-screen-designs branch from 3205899 to 9efd100 Compare December 7, 2020 21:39
@darkwing
Copy link
Copy Markdown
Contributor

darkwing commented Dec 7, 2020

With @jakehaugen's changes:

ViewQuoteTimer

BuildQuote

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [9efd100]
Page Load Metrics (389 ± 50 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint2996512110
domContentLoaded28159838710350
load28259938910350
domInteractive28059738710350

@darkwing darkwing marked this pull request as ready for review December 7, 2020 22:06
@darkwing darkwing requested a review from a team as a code owner December 7, 2020 22:06
@darkwing darkwing requested review from Gudahtt and brad-decker and removed request for Gudahtt December 7, 2020 22:06
Copy link
Copy Markdown
Contributor

@brad-decker brad-decker left a comment

Choose a reason for hiding this comment

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

LGTM!

@darkwing darkwing merged commit da5e5cd into develop Dec 8, 2020
@darkwing darkwing deleted the reapply-view-quote-screen-designs branch December 8, 2020 16:47
@github-actions github-actions bot locked and limited conversation to collaborators Dec 8, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants