Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Feature) New design for home / landing page #1122

Merged

Conversation

gabitoesmiapodo
Copy link

@gabitoesmiapodo gabitoesmiapodo commented Sep 3, 2018

Description:

Implemented the new designs for the Token Wizard's home page, and also some common elements like modal windows, and a full screen loading component.

Notes:

  • Add ?uiversion=2 as a parameter (ie: http://localhost:3000/?uiversion=2) to test using only the new styles. Otherwise the old styles will be used.
  • I used some temporary data to fill the crowdsale's data table, so your results will be obviously different.

Designs (Zeplin):

Some screenshots:

Desktop:

1- desktop
2- desktop
3- desktop
4- desktop

Tablet:

1- tablet
2- tablet
3- tablet
4- tablet

Mobile:

1-mobile
2- mobile
3- mobile
4- mobile

@gabitoesmiapodo
Copy link
Author

@fernandomg

  • In Firefox it looks a bit weird -> It should be fixed now.
  • Mobile-view in Firefox Desktop (it doesn't scrolls) -> Fixed too.
  • The mouse cursor doesn't indicate that the row is clickable. -> Fixed.

@dennis00010011b

  • Choose crowdsale list: selected item isn't highlighted -> Fixed.
  • There are no icons for: Twitter, POA, Telegram, GitHub, Gitter (Feature) Add gitter logo to footer #1102. All of these are presented in old version / Home page: Auth_os text doesn't look like link -> We should ask @pashagonchar about that, because current designs are like what I've implemented.

@vbaranov

  • Let's change logo asset to a transparent background -> Changed it for the SVG version (for some reason I chose the PNG version before).
  • And it seems, that style of the list of addresses popup differs from that one from the layout https://app.zeplin.io/project/5b38672635f4e0a932ec246f/screen/5b3895a9c615fa114ec71dde. Will it be subject of another PR? -> I think that's a bigger change than simply a restyling (more like a new feature). It will require some workflow and programming changes that I think should be implemented in a new issue.

For now this popup it's just restyled like the modal windows in the new designs.

gabitoesmiapodo added a commit that referenced this pull request Sep 4, 2018
…-new-design-step-1

* feature/#1084-new-design-landing-page: (179 commits)
  (fix) Firefox button borders.
  (feedback) Various fixes and changes from #1122
  Remove conditional
  Add proxyName, compiler version and optimization info
  Set ABI-Encoded Params to Proxy constructor params
  Add source code of smart proxy contract to zip archive for download
  Change how validate params and network id
  Check crowdsale env vars by crowdsale type
  Add ABI-Encoded params
  Added new contracts keys to file
  Remove unused function
  Refactoring function
  Update snapshot
  Reload storage on home
  Remove ABI source code
  Change label on content file
  Remove bin from summary
  Add function import
  Sort crowdsales list
  Add clear storage on manage section
  ...

# Conflicts:
#	src/assets/stylesheets/styles.css
@fernandomg
Copy link
Contributor

@gabitoesmiapodo everything fixed.

Now the main-info box is not properly aligned vertically (in both, firefox and chrome).
image

It depends on the resolution though because there are cases where it's properly aligned.
image

@vbaranov
Copy link
Collaborator

vbaranov commented Sep 5, 2018

What confuses me is this mock https://app.zeplin.io/project/5b38672635f4e0a932ec246f/screen/5b3895a97279af2b6e2ddf3d that treats each item as a list of ordered steps (taking into account to how they are highlighted in the bullet-list)

@fernandomg @gabitoesmiapodo Sorry for confusion. I am not about the list of steps in the left menu or changing the logic. I am just talking about the representation of the modal window.

From this PR it looks like

2018-09-05 13 50 24

But from the layout it should be like:

2018-09-05 13 50 02

But I am sure, that it could be made in a separate PR and it shouldn't stop to merge this one.

@gabitoesmiapodo
Copy link
Author

gabitoesmiapodo commented Sep 5, 2018

@fernandomg I think it might be that you are forgetting to add the ?uiversion=2 parameter? That's what happens to me, at least.

Added a few CSS improvements anyway, just in case.

If that's not the case I will need some more info, as screen resolution, etc.

@vbaranov

I just adapted the general modal windows and tables styles to look like this https://zpl.io/2ymGX4n and that's why it looks that way now. But that will not be the final implementation.

That said, it will be necessary more than a simple modal restyling to make this:

https://zpl.io/blpk4Q0
https://zpl.io/brN07d5

(or this, I'm not sure which design should be implemented, or if this is a different section... but both are very alike)

https://zpl.io/brNpKB7
https://zpl.io/2vYjBkv
https://zpl.io/2EA4wpn

because it changes completely what we have now, and that's why I think it would be better to implement that feature in a new issue.

@vbaranov
Copy link
Collaborator

vbaranov commented Sep 5, 2018

@gabitoesmiapodo ok, let's leave it as is for now. Representation of this modal window needs to be discussed with a designer...

@vbaranov vbaranov self-requested a review September 5, 2018 16:48
@fernandomg
Copy link
Contributor

I've added tests for the Home Component.

Updated tests for Load and CrowdsaleList components as well.

Also modified Home component and created a navigateTo method to facilitate testing.

All test cases related to CrowdsaleList weren't added as it will be moved to a new component instead of being displayed as a modal window.


There's a test case that failed and due to time constraints, I decided to create a separate issue (#1129) to solve it as it's taking too much time.

@coveralls
Copy link

Pull Request Test Coverage Report for Build 3049

  • 77 of 365 (21.1%) changed or added relevant lines in 34 files are covered.
  • 41 unchanged lines in 11 files lost coverage.
  • Overall coverage decreased (-1.9%) to 18.422%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/components/manage/index.js 0 1 0.0%
src/stores/index.js 1 2 50.0%
src/components/stepFour/constants.js 0 1 0.0%
src/components/Common/ModalContainer.js 0 1 0.0%
src/utils/alerts.js 0 2 0.0%
src/stores/TokenStore.js 0 2 0.0%
src/stores/GeneralStore.js 5 8 62.5%
src/stores/Web3Store.js 1 4 25.0%
src/App.js 0 3 0.0%
src/components/stepTwo/StepTwoForm.js 6 10 60.0%
Files with Coverage Reduction New Missed Lines %
src/components/stepFour/utils.js 1 0.0%
src/components/index.js 1 0.0%
src/components/Common/DutchAuctionBlock.js 1 6.12%
src/components/Common/CrowdsalesList.js 1 70.0%
src/components/stepThree/index.js 1 0.0%
src/App.js 2 0.0%
src/components/stepOne/index.js 2 0.0%
src/components/stepThree/GasPriceInput.js 5 0.0%
src/components/stepFour/index.js 6 0.0%
src/components/Common/WhitelistInputBlock.js 9 2.61%
Totals Coverage Status
Change from base Build 2997: -1.9%
Covered Lines: 811
Relevant Lines: 3716

💛 - Coveralls

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants