Make Link Colors Consistent

[entrotech]

Overview

Standardize Link colors to #1976D2 for normal links and #551A8B for "visited" links throughout the Food Seeker and Volunteer and Admin themes and make sure the themes are applied to all instances of links. If there are links that appear on non-white backgrounds that have insufficient contrast, make a note of them and we will discuss.

Action Items

• [x] Define the colors in the /client/src/theme/clientTheme and /client//src/theme/adminTheme theme files and then modify react components that have links to use the styles from the Material-UI themes.
• [x] The most important point is to make sure that all links get their style from the theme, rather than having hard-coding styling unique to different links in the site, We expect the Design Team to change their mind about what exact color should be used, but it should be the case that we change a color in one (or maybe two - one for food Seeker (clientTheme) and one for admin (adminTheme) places).

Resources/Instructions

(https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7817&t=W0esMVtJzkzGG3TE-0)

[entrotech]

I also set the :hover color to "#004ba0"

[entrotech]

@Seiko I'm putting this back to "In Progress", cause we need to know what the colors should be for each of the following states: normal link: "#1976D2"; visited link: "#551A8B"; hovered link: ?? disabled link: ??

[sei1122]

Can you set the link color to these? We may need to adjust later but I'd like to try this Normal link: "#1976D2"; Visited link: "#551A8B"; Hovered link: #004BA0 Disabled link: #4D4D4D

[entrotech]

Here is a link that talks about styling links: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

Apparently, there is no such thing as a "disabled" link, but there an additional state called "active" for when the link is clicked on, and only the normal and visited states are mutually exclusive. For example, a link can be visited and focused and active at the same time. I just styles the focused and active states with bolder text, and uses a color of primary.light = "#6693CA" for the active state.

[sei1122]

@entrotech,

I changed Disable gray to Secondary link (HEX #4D4D4D)

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-%231?node-id=10336-17624&t=GchKTlaug1NNGW6R-4

We use this secondary link on the static pages. This is used in blocks of text.

[sei1122]

I checked dev site and have several requests.

1. Can you remove this green when hovering the link

2. Underline should be the same as the phone number

3. Remove underlines from social media icons

[entrotech]

@sei1122 It wasn't clear to me exactly what behavior you want with the "secondary" link, but I used the color you specified for the normal state, and took out any color changes, etc. for the other states (hover, click, visited, etc.) So for the secondary link the only thing that changes with the link state is that the cursor changes to a finger when it is hovered.

Similarly, for the link to be used with images or icons, the only state-driven behavior should be the cursor change.

[sei1122]

Hi @entrotech, sorry it has been a while to reply this issue. I checked the links, and I'd like to update this secondary link to the primary link so that the links are consistent. Since our site is not big, just one link color is fine now.

[sei1122]

Create the development issue to get rid of the secondary link color.

[entrotech]

• Created Issue #1682 This removes the secondary link style.