buttons with text-decoration set to none get underline for text decoration.

[ahmaxed]

On the profile page, displayed button with text-decoration set to none gets an underline most likely due to the styles of its parent (a tag)

same issue also present in the current welcome page.

[huyenltnguyen]

@ahmadabdolsaheb So we are just going to set text-decoration: none to the a tag then? Or is there another approach you prefer?

Btw, I noticed that the word Challenges in Take me to the Challenges is capitalized, is this a typo or it's on purpose?

[ahmaxed]

@huyenltnguyen the a tags are to underlined all across. the only exceptions are navigation, footer, buttons, and a couple of more places.

@moT01, thank you for tackling this. is there are a way we could resolve this globally rather than adding classes to a tags one by one?

[moT01]

I found that an underline is applied globally - We could just change that, but it would remove the underlines in places where we probably want them. There's one in the bottom paragraph of the homepage, for instance. A few more on the learn page.

[ahmaxed]

interesting, wouldn't class styles override global styles? it does for everything else.

[ahmaxed]

@moT01
if a global solution is not possible we can perhaps define a class globally for removing the underline and give it to every a tag that we want to remove the underline from.

[ojeytonwilliams]

@ahmadabdolsaheb @moT01 it's all a bit weird. The underlined links are the ones which have a button inside an a. In this case the text-decoration is being inherited from the a and so defaults to underline completely ignoring the button style. It's a quirk of css that I don't fully understand, but it is what it is.

I think the right approach is just to remove the buttons, since they should not go inside a elements anyway - see this SO discussion.

[ahmaxed]

@ojeytonwilliams not sure why we do it this way.
Any thoughts @ValeraS?

[ahmaxed]

We might have buttons around for a11y reasons.
should we give the link to the formaction property of the button so it acts like a a tag?

[ojeytonwilliams]

As far as accessibility goes, I think the main thing is that links are obviously links and vice versa. If a link looks like a button, that could potentially cause confusion, but I think it's clear what's going on in this case.

[moT01]

So, is it fine to remove the <Button> elements? That's the solution that seems to be the best after looking at this - unless they are there for some specific reason.

[ahmaxed]

@moT01 yes, we should remove the <Button> when linking to other pages.