Link color 1122

[bruceplai]

Closes #1122

* Clean up unused style in theme-mui

* Set link styling specific to Orgs page

* Refactor code to make use of common Link component

* Update theme to force default link colors

* Update link colors in theme-mui

* Update common Link component

* Clean up links in various places

[bruceplai]

1. In Contributor Thumbnail you can import spectrum file and use linkColor and visitColor to use spectrum like this import spectrum from './../theme-spectrum';

     const linkColor = spectrum.teal;
     const visitColor = spectrum.white;
   
     const linkProps = {
        color: linkColor,
        textDecoration: 'none',
     }
   
     const visitedProps = {
        color: visitColor,
        textDecoration: 'none',
     }

Also Affiliated.js can be changed like that.

2. In theme-mui.js MuiTypography: { { root: { '& a': { color: ${MEDIUM_BLUE} !important, }

         }  
    }

${MEDIUM_BLUE} needs to be changed to ${TEAl} to prevent overriding the colors.

Thanks for the feedback. The teal color might be a bit dark for links across the whole site. The org thumbnails are the only place using that color. I was unable to find a way to override the default light blue color without using !important. If you found a way to do it, I'd like to know. I'll update the other places that you mentioned with spectrum.

[bhaggya]

1. In Contributor Thumbnail you can import spectrum file and use linkColor and visitColor to use spectrum like this import spectrum from './../theme-spectrum';

     const linkColor = spectrum.teal;
     const visitColor = spectrum.white;
   
     const linkProps = {
        color: linkColor,
        textDecoration: 'none',
     }
   
     const visitedProps = {
        color: visitColor,
        textDecoration: 'none',
     }

Also Affiliated.js can be changed like that.

2. In theme-mui.js MuiTypography: { { root: { '& a': { color: ${MEDIUM_BLUE} !important, }

         }  
    }

${MEDIUM_BLUE} needs to be changed to ${TEAl} to prevent overriding the colors.

Thanks for the feedback. The teal color might be a bit dark for links across the whole site. The org thumbnails are the only place using that color. I was unable to find a way to override the default light blue color without using !important. If you found a way to do it, I'd like to know. I'll update the other places that you mentioned with spectrum.

In the theme-mui.js file the MuiTypography: => root element all the links tag are given ! important for link, visited , active and hover , due to which is why it is not getting overridden, if it is removed , it is working I checked on my system

[bruceplai]

If we do not add the !important property in theme-mui link styling, then we will end up with some other light blue color, which we don't want. The screen shot shows (#0D99C6) as the current link color even though the css in the developer console shows that it's supposed to be (#0A75AD). If I use the !important property then the correct color (#0A75AD) will show up. I know using !important is not an ideal way to force color settings, but if there's another solution, I'd like to know about it. Thanks

[codeclimate[bot]]

Code Climate has analyzed commit b1fc971a and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 25.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 80.7% (0.0% change).

View more on Code Climate.