Add clickability to initial microsim outputs

[tawandamoyo]

Fixes #1939

Changes

Added clickability to inital microsim outputs.

Screenshots

add-clickability.mp4

With hover (update)

clickability-hover.mp4

[anth-volk]

This is looking good! One thing I'd recommend is underlining the relevant clickable portion. I'd be curious, if you don't mind, if you could work that up and share a video of it so we can see what it might look like.

[tawandamoyo]

This is looking good! One thing I'd recommend is underlining the relevant clickable portion. I'd be curious, if you don't mind, if you could work that up and share a video of it so we can see what it might look like.

This is what it looks like with underline.

[anth-volk]

Wow, that does not look good haha. I think it'd be great to somehow indicate to the user that these lines of text are clickable, but it not be ugly. Any ideas?

[tawandamoyo]

Wow, that does not look good haha. I think it'd be great to somehow indicate to the user that these lines of text are clickable, but it not be ugly. Any ideas?

Maybe add some (light gray/gray?) hover effect?

[anth-volk]

Would you mind trying that out and recording it to see how it looks? In the style or styles folder, there are a series of color constants that I think would be best to utilize here.

[tawandamoyo]

Would you mind trying that out and recording it to see how it looks? In the style or styles folder, there are a series of color constants that I think would be best to utilize here.

here with hover:

clickability-hover.mp4

[anth-volk]

Would you mind making this so the following is true:

• The highlighting doesn't extend beyond the top or bottom of the words
• The color is a pale version of one of our blues, as opposed to gray
• The hovering doesn't move the text around; right now, when you hover, it shifts everything else downward, too

Thanks for your continued work on this, @tawandamoyo!

[tawandamoyo]

Would you mind making this so the following is true:

• The highlighting doesn't extend beyond the top or bottom of the words
• The color is a pale version of one of our blues, as opposed to gray
• The hovering doesn't move the text around; right now, when you hover, it shifts everything else downward, too

Thanks for your continued work on this, @tawandamoyo!

pale-blue-bg.mp4

[anth-volk]

Thanks for this @tawandamoyo, it's looking good. If you feel this is ready, could you move it out of draft? And I'd just love confirmation on the design from @MaxGhenis, as he is much more user-facing, before reviewing/approving.

[anth-volk]

@MaxGhenis Hoping for your opinion on this

[MaxGhenis]

I like it! Could we bold the text on hover? We do that for other similar elements like the left menus.