(Feature) - New Styles for Step 2

gabitoesmiapodo commented 5 years ago

Description

Implemented the new designs for the Token Wizard's step 2.

Please let me know if I forgot something, and whatever feedback you have for this step.

Closes #1086

Designs

https://zpl.io/anK7PjY https://zpl.io/a8KvqgX

https://zpl.io/a8KRAXw (Dutch Auction)

Screenshots / What to expect

Desktop:

step 2 - desktop step 2 dutch - desktop

Tablet:

step 2 - tablet portrait step 2 dutch - tablet portrait

step 2 - tablet landscape step 2 dutch - tablet landscape

Mobile:

step 2 - mobile step 2 dutch - mobile step 2 - tooltip example

BlackDuckCoPilot commented 5 years ago

Black Duck Security Report

Merging #1148 into integration/#1082-new-design will not change security risk.

Click here to see full report

1 component(s) did not change but have updated security data. This may affect your calculated score.

dennis00010011b commented 5 years ago

Please organize directorie's names for StepOne-StepFour https://github.com/poanetwork/token-wizard/tree/feature/%231086-new-design-step-2/src/components

Some of them begin from upper case letter and conflict with https://github.com/poanetwork/token-wizard/blob/feature/%231086-new-design-step-2/src/components/index.js

dennis00010011b commented 5 years ago

@gabitoesmiapodo Minted crowdsale-Step2: decimals field should look disabled if reserved address has added

dennis00010011b commented 5 years ago

@gabitoesmiapodo Dimension's symbols and values aren't aligned

dennis00010011b commented 5 years ago

@gabitoesmiapodo Minted crowdsale -Step2:

value of reserved tokens isn't rounded if it was downloaded from CSV file

dennis00010011b commented 5 years ago

@gabitoesmiapodo Minted-Step2-Reserved tokens: address field too short, address is truncated

gabitoesmiapodo commented 5 years ago

@dennis00010011b

Please organize directorie's names for StepOne-StepFour -> Yes, there was an issue with MacOS + git + case sensitivity. I think I've fixed that now, and everything should be OK. Let me know if the problem persists.
Minted crowdsale-Step2: decimals field should look disabled if reserved address has added -> Done.
Dimension's symbols and values aren't aligned -> Should look better now.
value of reserved tokens isn't rounded if it was downloaded from CSV file -> I've added this item here https://github.com/poanetwork/token-wizard/issues/1149
Minted-Step2-Reserved tokens: address field too short, address is truncated -> I don't know if I can or should do something about that (that's according to the design). Maybe we should ask @pashagonchar ?
@vbaranov -> It should look better now.

fernandomg commented 5 years ago

@gabitoesmiapodo I've just removed step directories that start with lowercase (stepTwo, stepThree and stepFour), also updated a route to a component in tests files.

It should work fine now.

Please check.

gabitoesmiapodo commented 5 years ago

@fernandomg Somehow all steps' folders were gone when I pulled.

Had to git reset the 4 folders and everything seems fine now (no changes on my side).

I'm not sure what will happen to the rest of the guys using this, but some of the might have some issues when they update.

Cross platform shenanigans...

fernandomg commented 5 years ago

@gabitoesmiapodo the mouse pointer doesn't change when it's over the + button.

gabitoesmiapodo commented 5 years ago

@fernandomg

the mouse pointer doesn't change when it's over the + button. -> It should change now.

dennis00010011b commented 5 years ago

@gabitoesmiapodo I think that the disabled decimals field should be more contrasted with background color

gabitoesmiapodo commented 5 years ago

@dennis00010011b

I think that the disabled decimals field should be more contrasted with background color -> Check it now.

dennis00010011b commented 5 years ago

@gabitoesmiapodo Reserved tokens list: dimension's symbols and values still aren't aligned, especially if page zoomed out

gabitoesmiapodo commented 5 years ago

@dennis00010011b

Reserved tokens list: dimension's symbols and values still aren't aligned -> If you have a list of values so I can use it for testing, please send it to me.
especially if page zoomed out -> Why would you zoom out 😆 ? Anyway, I think it might be best to use some monospaced font to display this information list, but we should ask if that's possible.

vbaranov commented 5 years ago

Wow. Such wonderful shapes!

BlackDuckCoPilot commented 5 years ago

Black Duck Security Report

Merging #1148 into integration/#1082-new-design will not change security risk.

Added Components

Medium Risk: 1 Clean: 16

Removed Components

Clean: 5

Click here to see full report

1 component(s) did not change but have updated security data. This may affect your calculated score.

dennis00010011b commented 5 years ago

Reserved tokens list: dimension's symbols and values still aren't aligned -> If you have a list of values to test, please send it to me.

@gabitoesmiapodo I used this file https://github.com/poanetwork/token-wizard-test-automation/blob/e2e-wizard2.0/public/reservedAddressesTestValidation.csv

dennis00010011b commented 5 years ago

@dennis00010011b

I think that the disabled decimals field should be more contrasted with background color -> Check it now.

It still isn't bright , A=0.01 by default (A=0.15..0.2 looks good for me)

gabitoesmiapodo commented 5 years ago

@dennis00010011b

It still isn't bright , A=0.01 by default (A=0.15..0.2 looks good for me) -> Changed it to 0.15. It looks kind of dark to me (I would set around 0.05 max), but it will look different across each screen configuration, I think.
Changed the reserved tokens' list for an actual html table. It was a bit more work to achieve the same result, but it's usually the right HTML element to use when displaying a data list.

dennis00010011b commented 5 years ago

@gabitoesmiapodo One more thing. Since field value of reserved tokens has arrows buttons then should be disabled to setting an incorrect value using such buttons. Now it is possible to set negative or zero value (both percent and tokens) by using arrow buttons. For avoid this the lowest value should be limited and defined by decimals .Example , if decimals =2 then lowest value = 0.01

gabitoesmiapodo commented 5 years ago

@dennis00010011b I think I got it working as you'd like (ie: 3 decimal places minimum value == 0.001).

Please have a look.

If that's all please take into account that @fernandomg is still working on this branch / PR, so I would advice not to merge it yet.

dennis00010011b commented 5 years ago

@dennis00010011b I think I got it working as you'd like (ie: 3 decimal places minimum value == 0.001).

Please have a look.

If that's all please take into account that @fernandomg is still working on this branch / PR, so I would advice not to merge it yet.

@gabitoesmiapodo min value should be 1 if decimals =0. Now it is zero

dennis00010011b commented 5 years ago

@gabitoesmiapodo

@dennis00010011b I think I got it working as you'd like (ie: 3 decimal places minimum value == 0.001).

Please have a look.

If that's all please take into account that @fernandomg is still working on this branch / PR, so I would advice not to merge it yet.

I think this rule should not be applied if Dimension = Percentage. In this case minimum value can be 0

dennis00010011b commented 5 years ago

@gabitoesmiapodo If dimension =percentage & decimals!=0 then min value !=0 Min value should be zero for any decimals if dimension =percentage

coveralls commented 5 years ago

Pull Request Test Coverage Report for Build 3167

92 of 171 (53.8%) changed or added relevant lines in 22 files are covered.
2 unchanged lines in 2 files lost coverage.
Overall coverage increased (+1.8%) to 21.753%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/App.js	0	1	0.0%
src/components/Common/TxProgressStatus.js	0	1	0.0%
src/components/Common/ReservedTokensTable.js	6	7	85.71%
src/components/StepThree/index.js	0	2	0.0%
src/components/StepTwo/index.js	15	17	88.24%
src/components/index.js	0	3	0.0%
src/components/StepFour/index.js	0	4	0.0%
src/components/Common/ReservedTokensInputBlock.js	11	16	68.75%
src/components/StepTwo/StepTwoForm.js	19	24	79.17%
src/stores/TokenStore.js	3	8	37.5%
<!--	Total:	92	171	53.8%	-->

Files with Coverage Reduction	New Missed Lines	%
src/App.js	1	0.0%
src/components/Common/ReservedTokensInputBlock.js	1	71.76%
<!--	Total:	2	-->

Totals
Change from base Build 3095:	1.8%
Covered Lines:	949
Relevant Lines:	3783

💛 - Coveralls

fernandomg commented 5 years ago

BTW, my collaboration with this PR was:

Refactor of StepTwo component and it's child's components to keep the logic where it has to be (and thus simplify tests)
Fix tests that were failing
Create tests for components affected by this PR

dennis00010011b commented 5 years ago

@fernandomg @gabitoesmiapodo In the case if wallet isn't installed:

unexpected warning in Step1
app unresponsive and a numerous amount of errors in console nowallet.log

gabitoesmiapodo commented 5 years ago

@fernandomg

@gabitoesmiapodo Is there a way to move the + button only outside of this component and add it in the parent component (ReservedTokensInputBlock?...

I think it could be done. Please create an issue for this.

@dennis00010011b

unexpected warning in Step1...

That's a bug in Step 1, this issue / PR is for the implementation of the new design of Step 2. Please create an issue for this bug, if it is not already created.

fernandomg commented 5 years ago

That's a bug in Step 1, this issue / PR is for the implementation of the new design of Step 2. Please create an issue for this bug, if it is not already created.

@dennis00010011b Indeed, I saw that same behavior in 2.0.

poanetwork / token-wizard