Add basic styles for steps modal.

[unjapones]

Connect #93

I'm creating this DRAFT PR so we can have a description about how to work on the styling of the flow/steps modal. I'm not 100% sure about it was the first thing that came to my mind.

@gabitoesmiapodo here are some steps that may help you when you apply the styling to the modal views. The change will make modal to popup in the correponding step and status (initial, loading, done) that you will hardcode:

1. Hardcode the modal's current step in src/store/reducers.ts:

Modify initialStepsModalState and set the value of currentStep to be:

{
    kind: 2,
    amount: new BigNumber(0),
    price: new BigNumber(0),
    side: 0,
}

2. Hardcode a couple of things in /src/components/common/steps_modal/sign_order_step.tsx:

1. Comment line 47 of the file (the only line in the body of the method componentDidMount), so it doesn't do anything.
2. in line 43, set the corresponding state you want to see:
   • StepStatus.ConfirmOnMetamask
   • StepStatus.Loading
   • StepStatus.Done
   • ...

3. Modify/style common steps' views in /src/components/common/steps_modal/steps_common.tsx:

Every steps has their statuses wrapped with components from steps_common, so updating the general appearance of the common components should apply the same appearance to every steps.

Hopefully, after doing the above, the workflow of modifying and styling the contents of sign_order_step.tsx becomes less awful (:crossed_fingers:)....

[fvictorio]

@gabitoesmiapodo You can also install the React devtools. This lets you modify the state of the components. I don't know how useful they can be for you, but you can give them a try. In this case, the StepStatus is an enum, so you'll see a status field with value 0, 1 or 2, corresponding to Initial, Loading and Done.

There's also the redux devtools. Again, not sure if they will be useful in this case, but they are worth checking out, specially the time travelling feature.

[gabitoesmiapodo]

Thank you both, I'll look into it soon.

[gabitoesmiapodo]

I think this is done, but I'm open to any feedback you may have...

The data for the circles / lines seen below in the design is in an array const steps: StepItem[] with all the necessary info.

You can have each step active (this will make the title black) and you also can add a progress percentage to indicate some work or process is being done or finished (this will be reflected on the step progress bar / line).

[unjapones]

I'm closing this PR since it did its job. The rest of the work will be present in a different branch and PR. Thank you very much @gabitoesmiapodo