Update default link colors for contrast (#1122)

* Refactor code to make use of common Link component * Update theme to force default link colors
civictechindex · Jan 31, 2022 · 131fd72 · 131fd72
1 parent 6cd669e
commit 131fd72
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 56 deletions.
diff --git a/src/components/ContributorThumbnail.js b/src/components/ContributorThumbnail.js
@@ -35,10 +35,10 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: '3px',
     color: theme.palette.secondary.dark,
     '& a:link': {
-      color: theme.palette.secondary.dark,
+      color: `${theme.palette.secondary.dark} !important`,
     },
     '& a:visited': {
-      color: theme.palette.secondary.dark,
+      color: `${theme.palette.secondary.dark} !important`,
     },
     [theme.breakpoints.between('xs', 'sm')]: {
       fontSize: '12px',

diff --git a/src/components/Header/NavSublink.js b/src/components/Header/NavSublink.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { Link as RouterLink, withRouter } from 'react-router-dom';
 import MenuItem from '@material-ui/core/MenuItem';
 import { withStyles } from '@material-ui/core/styles';
+import spectrum from '../../theme-spectrum';
 
 const styles = (theme) => ({
   menuitem: {
     padding: theme.spacing(2),
     '&:hover': {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.text.secondary,
+      backgroundColor: spectrum.mediumBlue,
+      color: spectrum.white,
       fontWeight: '700',
     },
   },

diff --git a/src/components/common/Link.js b/src/components/common/Link.js
@@ -5,7 +5,6 @@ import { Link as RouterLink } from 'react-router-dom';
 import MuiLink from '@material-ui/core/Link';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import OpenInNewRoundedIcon from '@material-ui/icons/OpenInNewRounded';
-import spectrum from '../../theme-spectrum';
 
 const useStyles = makeStyles({
   icon: {
@@ -14,24 +13,6 @@ const useStyles = makeStyles({
       transform: 'translateY(4px)',
     },
   },
-  link: {
-    color: spectrum.mediumBlue,
-    cursor: 'pointer',
-    fontWeight: 700,
-    textDecoration: 'underline',
-    '&:active': {
-      color: spectrum.lightBlue,
-    },
-    '&:link': {
-      color: spectrum.mediumBlue,
-    },
-    '&:hover': {
-      color: spectrum.lightBlue,
-    },
-    '&:visited': {
-      color: spectrum.purple,
-    },
-  },
 });
 
 const Link = ({ to, children, ...props }) => {
@@ -40,7 +21,7 @@ const Link = ({ to, children, ...props }) => {
   // If it has no 'to', just style it like a link
   if (!to) {
     return (
-      <MuiLink {...props} className={classes.link}>
+      <MuiLink {...props}>
         {children}
       </MuiLink>
     );
@@ -57,7 +38,7 @@ const Link = ({ to, children, ...props }) => {
 
   // Else assume 'to' is a route
   return (
-    <RouterLink to={to} className={classes.link} {...props}>
+    <RouterLink to={to} {...props}>
       {children}
     </RouterLink>
   );

diff --git a/src/pages/Contributors/Affiliated.js b/src/pages/Contributors/Affiliated.js
@@ -5,7 +5,7 @@ import { DropdownArrow } from '../../components/DropdownArrow.js';
 import Grid from '@material-ui/core/Grid';
 import { AffiliatedOrganizations } from './AffiliatedOrganizations';
 import clsx from 'clsx';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/common/Link';
 import { makeStyles } from '@material-ui/core/styles';
 
 // eslint-disable-next-line max-lines-per-function
@@ -46,10 +46,10 @@ const useStyles = makeStyles((theme) => ({
       },
     },
     '& a:link': {
-      color: theme.palette.secondary.dark,
+      color: `${theme.palette.secondary.dark} !important`,
     },
     '& a:visited': {
-      color: theme.palette.secondary.dark,
+      color: `${theme.palette.secondary.dark} !important`,
     },
     [theme.breakpoints.down('sm')]: {
       height: '43px',

diff --git a/src/pages/HowToAdd/index.js b/src/pages/HowToAdd/index.js
@@ -70,15 +70,15 @@ const HowToAdd = () => {
           <Box className={classes.boxContainer}>
             <Box>
               <Typography variant='body1' className={classes.typoStyle}>
-                1. Under your project’s repository, click <SettingsGearIcon />{' '}
+                1. Under your project&apos;s repository, click <SettingsGearIcon />{' '}
                 to add topic tags.
               </Typography>
             </Box>
             <Box className={classes.boxPadding}>
               <Typography variant='body1' className={classes.typoStyle}>
-                If you don’t see the <SettingsGearIcon /> button it means you
-                don’t have &quot;edit repository settings&quot; privileges (and
-                can’t perform the steps below).
+                If you don&apos;t see the <SettingsGearIcon /> button it means you
+                don&apos;t have &quot;edit repository settings&quot; privileges (and
+                can&apos;t perform the steps below).
               </Typography>
               <Typography variant='body1' className={classes.typoStyle}>
                 Click{' '}

diff --git a/src/pages/Privacy/index.js b/src/pages/Privacy/index.js
@@ -5,7 +5,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import useStyles from './styles.js';
 import { GenericHeaderSection } from '../../components';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/common/Link';
 
 const overviewList = [
   "We may collect information from you when you visit and take actions on our website. We use this information to provide the services you've requested.",

diff --git a/src/pages/TagGenerator/Organization.js b/src/pages/TagGenerator/Organization.js
@@ -5,7 +5,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/common/Link';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import useStyles from './styles';
 import AddOrgForm from './AddOrgForm';

diff --git a/src/pages/TagGenerator/ProjectRepository.js b/src/pages/TagGenerator/ProjectRepository.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/common/Link';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import useStyles from './styles';

diff --git a/src/pages/TagGenerator/TopicTagSection.js b/src/pages/TagGenerator/TopicTagSection.js
@@ -11,7 +11,7 @@ import {
   ChipInputSection,
 } from './TopicTag';
 import useStyles from './styles';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/common/Link';
 import { useClipboard } from 'use-clipboard-copy';
 import SettingsGearIcon from '../../icons/SettingsGearIcon';
 import ImageComponent from '../../components/ImageComponent';
@@ -239,15 +239,13 @@ export const NewTags = ({
               userTags={userTags}
               handleDelete={handleDelete}
             />
-            <Link
-              component='button'
-              variant='body1'
-              onClick={() => setDisplayState('ChangeTags')}
-              underline='always'
-              style={linkStyles}
-            >
-              Add More/Change Tags
-            </Link>
+            <Typography>
+              <Link
+                onClick={() => setDisplayState('ChangeTags')}
+              >
+                Add More/Change Tags
+              </Link>
+            </Typography>
           </Grid>
         </Grid>
       </Grid>

diff --git a/src/pages/TagGenerator/index.js b/src/pages/TagGenerator/index.js
@@ -2,7 +2,7 @@
 /* eslint-disable complexity */
 
 import React, { useState, useEffect, useRef } from 'react';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/common/Link';
 import {
   useQueryParam,
   StringParam,
@@ -493,7 +493,7 @@ const TagGenerator = () => {
           <AffiliationQuestionSection value={value} handleChange={handleChange}>
             <Typography variant='body1'>
               Are you affiliated with an&nbsp;
-              <Link href='/organizations/all' color='inherit'>organization</Link>?
+              <Link to='/organizations/all'>organization</Link>?
             </Typography>
           </AffiliationQuestionSection>
           {value === 'yes' ? (

diff --git a/src/theme-mui.js b/src/theme-mui.js
@@ -11,18 +11,24 @@ const LIGHT_BLUE_2 = '#5FCAF9';
 const MEDIUM_BLUE = '#0A75AD';
 const YELLOW = '#FFE06D';
 const WHITE = '#FEFEFE';
+
 // Colors - Secondary
 const DARK_GRAY = '#6D6E74';
-// const LIGHT_GRAY = '#F2F2F2';
 const NEW_GRAY = '#F5F5F5';
 const RED = '#D20E0E';
-const PURPLE = '#551A8B';
+
 // Colors - Grey
 const GREY100 = '#F4F4F4'; // default = #f5f5f5
 const GREY200 = '#E9E9E9'; // default = #eeeeee
 const GREY300 = '#D8D8D8'; // default = #e0e0e0
 const GREY900 = '#242424'; // default = #212121
 
+/*
+ * Colors - Unused in theme for now
+ * const LIGHT_GRAY = '#F2F2F2';
+ * const PURPLE = '#551A8B';
+ */
+
 const breakpoints = createBreakpoints({});
 
 const defaultButtonSettings = {
@@ -231,24 +237,44 @@ const themeSettings = {
     MuiTypography: {
       root: {
         '& a': {
-          color: MEDIUM_BLUE,
+          color: `${MEDIUM_BLUE} !important`,
           cursor: 'pointer',
           fontWeight: 700,
           textDecoration: 'underline',
         },
         '& a:link': {
-          color: MEDIUM_BLUE,
+          color: `${MEDIUM_BLUE} !important`,
+        },
+        '& a:visited': {
+          color: `${MEDIUM_BLUE} !important`,
         },
         '& a:active': {
-          color: LIGHT_BLUE_2,
+          color: `${LIGHT_BLUE_2} !important`,
         },
         '& a:hover': {
-          color: LIGHT_BLUE_2,
-        },
-        '& a:visited': {
-          color: PURPLE,
+          color: `${LIGHT_BLUE_2} !important`,
         },
       },
+      // root: {
+      //   '& a': {
+      //     color: `${MEDIUM_BLUE}`,
+      //     cursor: 'pointer',
+      //     fontWeight: 700,
+      //     textDecoration: 'underline',
+      //   },
+      //   '& a:link': {
+      //     color: `${MEDIUM_BLUE}`,
+      //   },
+      //   '& a:visited': {
+      //     color: `${MEDIUM_BLUE}`,
+      //   },
+      //   '& a:active': {
+      //     color: `${LIGHT_BLUE_2}`,
+      //   },
+      //   '& a:hover': {
+      //     color: `${LIGHT_BLUE_2}`,
+      //   },
+      // },
       colorPrimary: {
         color: DARK_BLUE,
       },