Addons-frontend: The View Site links on Android have the same color as the rest of the text

[ioanarusiczki]

STR:

1. On an Android device the links <a href="https://youtu.be/w_lCi8U49mY">Click the following link </a> or <a href="https://support.mozilla.org/en-US/kb/recommended-extensions-program">Visit SUMO </a>

could be more visible if they'd look like on Desktop

Android

Desktop

This is reproducible on AMO dev with Android 8.0.0
Please note links without HTML format are interpreted as text.

[willdurand]

I don't know if it is our CSS or platform-specific.

[virgilt]

@ioanarusiczki @willdurand May I work on this issue?

[willdurand]

@virgilt go for it!

[virgilt]

@willdurand Thank you!

[virgilt]

@willdurand I'm having trouble with this one. Trying to emulate it in Android Studio on my Linux machine, by following the docs https://mozilla.github.io/geckoview/contributor/geckoview-quick-start

Can't get past Bootstrap Gecko. Are there any chats or place with more information? This is my first time trying to work on Android.

[willdurand]

@virgilt hey, so there is no need for Android Studio. This is a web app with an Android version, but this version is still web-based.

You can get started by following these instructions:

• clone this repository
• run yarn
• run yarn amo:dev

Then you can browse: http://localhost:3000/en-US/android/

Note the "android" in the url. After that you should see the websitr with the yellow banner and the links that are not in blue.

[ioanarusiczki]

I see it reproducible on MacOS too. - FF69

[willdurand]

ah, good catch @ioanarusiczki. So I think it was intended to have grey color on links, but maybe not by default, I am not sure.

[willdurand]

@bobsilverberg WDYT? It was introduced in https://github.com/mozilla/addons-frontend/pull/7364. I think we could remove the color on the links to keep the default style?

diff --git a/src/ui/components/Notice/styles.scss b/src/ui/components/Notice/styles.scss
index 1052e371c..47545702c 100644
--- a/src/ui/components/Notice/styles.scss
+++ b/src/ui/components/Notice/styles.scss
@@ -131,13 +131,7 @@
   }

   background-color: $notice-background-color;
-
-  &,
-  :link,
-  :hover,
-  :active {
-    color: $notice-link-color;
-  }
+  color: $notice-link-color;
 }

 .Notice-error {

[bobsilverberg]

@bobsilverberg WDYT? It was introduced in #7364. I think we could remove the color on the links to keep the default style?

Sure, that seems fine. I don't think this colour difference was intentional.

[virgilt]

@willdurand Do you need me to do anything further?

[willdurand]

@virgilt would you like to update your patch with the one I provided above?

[virgilt]

@willdurand sure, no problem!

[virgilt]

@willdurand Just want to clarify that I should remove the previous code I had written correct?

[willdurand]

yep, correct. thanks!

[willdurand]

thanks for your work @virgilt

[ioanarusiczki]

@willdurand @virgilt Looks good to me! Verified on AMO dev - Android 8.0