[x] Introduce on each row, after the Symbol column, a button which launches the behaviour defined in 3)
[x] Introduce on each row, right aligned, instead of the current actions buttons a 3-dot vertical button which launches the actions defined in 2)
[x] The previous buttons keep their standard color even if the row is hovered, this way you need to hover over them in order for them to change color, signalling their functions as buttons
2) Trading State Panel Actions (img 2)
[x] On hover the actions button, change color to become in line with what's created for Trading State Hover behaviour
[x] On click launch a modal, bottom-left aligned, as defined in the figma
[x] The options presented are the ones currently in place, only their design changed
[x] On hover each button in the dropdown should change color as defined before
[x] The modal should disappear if the user clicks outside of it, anywhere on the screen
3) Order Details (img 3)
[x] On hover the More Info button, change color to become in line with what's created for Trading State Hover behaviour
[x] On click launch a modal on the center of the screen as defined in the figma
[x] Title is the AO type, followed by the AO Alias (if need be ellipse it)
[x] The modal should have a close button aligned with the title, except on the right
[x] The details of the order should be shown as in the figma:
[x] titles show in smaller font and secondary color
[x] values show in larger font and #FFF
[x] the "Order Details" should just print, comma-separated, the parameters of the order in the format parameter=value (e.g. slice=1, total=10)
[x] Below the order details the user should have a table, similar to Order History (see (FE) Introduce "Updated" in Order History), presenting all the orders which are related to this AO
[x] The data for the modal should be exportable using an "Export JSON" button
[x] clicking on the button should launch the OS file selector
[x] the exported data should be a valid JSON object
Asana task:
Trading State Details UI
Depends on:
UI Demonstration:
Checklist:
1) Trading State Panel (img 1)