[WS-2176]: made changes to add greyed link colour - #6E6E73

[victranfield]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2176

Summary

greyed link colour should be #6E6E73

Code changes

changes made to index.tsx and index.styles.ts

Testing

1. List the steps required to test this PR.
   Checking live page

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[emilysaffron]

This makes more sense added within the existing 'link' styles above, as it's targeting the link, so doesn't need its own style.

#6E6E73 also already exists within our colour palette under the name Metal ( you can see it in this file here ) , so you can access it using palette.METAL .

Whenever I am adding a colour to a style, i always do a search for it in the codebase to see if it is already named in that palette file first - that's how i found it here 😄

We also generally wouldnt use the !important declaration, we shouldn't need to be forcing the style.

[emilysaffron]

I've suggested above that we remove visitedItem as an extra class so not relevant right now, but for future to apply style classes you dont need the () bracket notation. It would just be styles.visitedItem

also here, it will always be applied regardless of isCurrentPage 's value, as you have it listed twice, so your conditional won't work.

[emilysaffron]

I don't think we should need to do any of this, if a user is on a page that exists in the Most Read, then that link should count as 'visited' automatically (i think!) as this comes from the browser's history. So all we should need to do is add the &:visited selector to the link styles

[emilysaffron]

I think i see what you're trying to do here, but this won't work or apply to anything as the class is-current doesn't exist anywhere. For this to work, you would need to apply this class to an element somewhere conditionally based on if it is a link to the current page. I don't think we should need to do this anyway, I've tried to explain why in my comment here

[Isabella-Mitchell]

Thanks for this - I agree with Em's comments. The :visited psuedo class does a lot of the heavy lifting for us fortunately! So we can simplify this a bit.

It might help as reference to see how we apply the :visited styles to an existing link component using the emotion syntax. I think this is a good example: src/app/components/ArticleLinksBlock/Promo/index.styles.tsx.