(Feature) Step 3 new design

[gabitoesmiapodo]

Description

Closes #1087 Closes #1153

About #1153

It's just what the issue says: the "ButtonPlus" component is now outside "NumericInput"

About #1087

I think the only thing worth mentioning is that the fields' order is not 100% like in the designs. This is because:

a) Some of the designs were slightly outdated, and some fields were misplaced. b) We decided to change the order of some of the fields and controls to provide a better workflow and user experience.

Those are not a big changes, but they surely will be noticed when comparing the implementation with the original designs.

Screenshots:

[BlackDuckCoPilot]

Black Duck Security Report

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

Click here to see full report

[dennis00010011b]

@gabitoesmiapodo Step3: old and new styles are mixed for fields start/end time latest Chrome, MacOS

[dennis00010011b]

@gabitoesmiapodo Input fields with arrows buttons: should be disabled to set invalid values using arrows

[dennis00010011b]

@gabitoesmiapodo Import CSV file : warning doesn't contain amount of added addresses if file contains more than 50 addresses. Warning's text should include phrase '50 addresses were added'

[dennis00010011b]

@gabitoesmiapodo There is no placeholder for field Supply, should be 'Enter here'

[dennis00010011b]

@gabitoesmiapodo Typo. Should be 'process'

[dennis00010011b]

@gabitoesmiapodo Warning in console after each tier's addition

[dennis00010011b]

@gabitoesmiapodo DutchL: there are no placeholders for input fields

[dennis00010011b]

@gabitoesmiapodo Dutch - Gasprice : can't select option 'Custom'

[gabitoesmiapodo]

@dennis00010011b

• Step3: old and new styles are mixed for fields start/end time -> There's not really much I can do here. Native controls (arrows and such) can be disabled or hidden for Webkit browsers only, but I wouldn't recommend that. It cripples functionality.

We could use regular text inputs, but I wouldn't recommend that either: We should use date inputs for dates.

As a "fix", in addition to removing the background calendar icon when the input has focus I also removed it when the cursor hovers it. This way native controls will not overlap with the background image.

• Input fields with arrows buttons: should be disabled to set invalid values using arrows -> This should work better now.

• Import CSV file : warning doesn't contain amount of added addresses if file contains more than 50 addresses. Warning's text should include phrase '50 addresses were added' -> This is more of a programming logic issue than a styling one (which is the purpose of this issue). I created a new issue for this: https://github.com/poanetwork/token-wizard/issues/1179

• There is no placeholder for field Supply, should be 'Enter here' -> Fixed.

• Typo. Should be 'process' -> Fixed.

• Warning in console after each tier's addition -> I think this should be checked and fixed in a new issue, I created a new one here: https://github.com/poanetwork/token-wizard/issues/1180

• DutchL: there are no placeholders for input fields -> Fixed.

• Dutch - Gasprice : can't select option 'Custom' -> Ugh, I thought I got it working. It should work now.

[dennis00010011b]

@gabitoesmiapodo Mincap's prompt text hidden behind button

[dennis00010011b]

@gabitoesmiapodo Minted/Dutch: should be disabled to add whitelist if field supply is empty

[fernandomg]

@gabitoesmiapodo despite it's specified in the redesign specs that way. Can we change the 'On/Off' wording by 'Yes/No' as in the whitelist option buttons?

[fernandomg]

@gabitoesmiapodo Custom Gas Price arrows always change the decimals to .1

[gabitoesmiapodo]

@dennis00010011b

• Mincap's prompt text hidden behind button -> Fixed.

• Minted: should be disabled to add whitelist if field supply is empty -> It should work better now.

@fernandomg

• despite it's specified in the redesign specs that way. Can we change the 'On/Off' wording by 'Yes/No' as in the whitelist option buttons? -> Sure.

• Custom Gas Price arrows always change the decimals to .1 -> It should work as expected now.

• In the proposed changes for the components, can we consider changing <div>s with <button type="button">s? So we have a more consistent structure as well? -> All of them should be button elements now.

• We should create stateless components when the component has no lifecycle hooks or neither requires state. -> Done and gone.

[mariano-aguero]

@gabitoesmiapodo

can we remove this unused vars?

[gabitoesmiapodo]

@mariano-aguero

• can we remove this unused vars? -> Yes we can.