Explore Screen: New Density Readout Panel

[zepumph]

From #4 Here is the screenshot from the design doc:

https://docs.google.com/document/d/1XH0LhgFuor4dfc0gfF96Ao-qk7771vRLn53jQplDe0I/edit

[DianaTavares]

In the design meeting we agree in some changes for the density readout.

For Density Simulation (probably these issue should be in common code?), the readout will change the small arrows for a big tip (like triangles). And Taliesin suggested that only colors is not enough for distinguish for some students, then also suggested to add the letter.

This is the new design:

For Buoyancy: Basics we need to have the levels to the left of the panel because we have the values of A and B in the same orientation, then in some scenarios the labels are going to overlap. This is the new design:

For the mystery material, the density readout of the block needs to be hidden:

[AgustinVallejo]

Discussed with @DianaTavares. Main items:

• Legend can stay as 'A: 200...' without the Block part. Teachers will decide in the interviews.
• We should add maxWidth on individual material labels.
• Panel width is allowed to use up all the horizontal space according to translations
• Center the panel if the space allows, otherwise move if it's going to overlap with other panels; respect the margins.

[zepumph]

• [x] We don't want to show the readout when it is a mystery material. Instead show a "?".

[AgustinVallejo]

Approved by @DianaTavares