[UX] Learn - full text for "sign into" call to action not visible in light mode

sandramsc commented 1 year ago

Current Behavior

Link to website: https://layer5.io/learn/service-mesh-labs
[Light mode] Currently when each learning path is opened by clicking on "Open Scenario", it reveals the text "Meshery Playground" as text in green color, which does not give much context to the user as to what options/steps they have to navigate the platform further. This only becomes clear if a user hovers over the already opened path revealing the full action option which states "Sign in to the Meshery Playground (free account) to continue your lab."

Screenshots

lmode

Desired Behavior

Users should be able to see the option to navigate the platform further (before and after hovering over the path), this enhances user experience as not every user might have the notion to "hover" over an item to reveal the most important call to action/option which is signing up for a free Meshery Playground account to continue their lab.

Screenshots

dmode

Implementation

[Light mode] Consider changing the text color for "Sign in to the Meshery Playground (free account) to continue your lab." to one that is different from its background, so its visible, before hover.