[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/working-with-meshery-and-istio https://layer5.io/learn/service-mesh-labs/working-with-meshery-and-linkerd https://layer5.io/learn/service-mesh-labs/working-with-meshery-and-consul https://layer5.io/learn/service-mesh-labs/working-with-meshery-and-kuma https://layer5.io/learn/service-mesh-labs/working-with-meshery-and-nsm https://layer5.io/learn/service-mesh-labs/working-with-meshery-and-traefik https://layer5.io/learn/service-mesh-labs/working-with-meshery-and-open-service-mesh https://layer5.io/learn/service-mesh-labs/running-performance-tests https://layer5.io/learn/service-mesh-labs/traffic-splitting-with-meshery
[Light mode] Currently when each learning path is opened by clicking on the arrow in the top right corner, 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 turns on dark mode revealing the full action option which states "Sign in to the Meshery Playground (free account) to continue your lab."

Screenshots

imageedit_9_6992306970

mesh

Desired Behavior

Users should be able to see the option to navigate the platform further (before and after color mode is enabled), this enhances user experience as not every user might have the notion to turn on dark mode to reveal the most important call to action/option which is signing up for a free Meshery Playground account to continue their lab.

Screenshots

dmesh

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 it's visible, in light mode.