Update ContributorThumbnail and Affiliated styling with spectrum (#1122)

civictechindex · Feb 3, 2022 · 8ad9490 · 8ad9490
1 parent 9089645
commit 8ad9490
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/components/ContributorThumbnail.js b/src/components/ContributorThumbnail.js
@@ -8,6 +8,7 @@ import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import { getOrganizationLinks } from './getOrganizationLinks.js';
+import spectrum from '../theme-spectrum';
 
 const useStyles = makeStyles((theme) => ({
   thumbnailWrapper: {
@@ -34,11 +35,11 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: '9px',
     paddingTop: '3px',
     '& a:link': {
-      color: `${theme.palette.secondary.dark} !important`,
+      color: `${spectrum.teal} !important`,
       textDecoration: 'none',
     },
     '& a:visited': {
-      color: `${theme.palette.secondary.dark} !important`,
+      color: `${spectrum.teal} !important`,
     },
     '& a:hover': {
       textDecoration: 'underline',
@@ -51,14 +52,14 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   blueColorText: {
-    color: `${theme.palette.text.secondary}`,
+    color: `${spectrum.white}`,
     paddingLeft: '16px',
     '& a:link': {
-      color: `${theme.palette.text.secondary} !important`,
+      color: `${spectrum.white} !important`,
       textDecoration: 'none',
     },
     '& a:visited': {
-      color: `${theme.palette.text.secondary} !important`,
+      color: `${spectrum.white} !important`,
     },
     '& a:hover': {
       textDecoration: 'underline',

diff --git a/src/pages/Contributors/Affiliated.js b/src/pages/Contributors/Affiliated.js
@@ -7,11 +7,12 @@ import { AffiliatedOrganizations } from './AffiliatedOrganizations';
 import clsx from 'clsx';
 import Link from '../../components/common/Link';
 import { makeStyles } from '@material-ui/core/styles';
+import spectrum from '../../theme-spectrum';
 
 // eslint-disable-next-line max-lines-per-function
 const useStyles = makeStyles((theme) => ({
   titleStyle: {
-    color: theme.palette.secondary.dark,
+    color: spectrum.teal,
     textAlign: 'center',
     [theme.breakpoints.down('sm')]: {
       fontSize: '13px',
@@ -28,12 +29,12 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     alignItems: 'center',
     margin: 'auto',
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: spectrum.white,
     borderRadius: '6px',
     padding: '8px 16px',
     '& h4': {
       paddingLeft: '10px',
-      color: theme.palette.secondary.dark,
+      color: spectrum.teal,
       [theme.breakpoints.between('xs', 'sm')]: {
         fontSize: '15px',
       },
@@ -46,11 +47,11 @@ const useStyles = makeStyles((theme) => ({
       },
     },
     '& a:link': {
-      color: `${theme.palette.secondary.dark} !important`,
+      color: `${spectrum.teal} !important`,
       textDecoration: 'none',
     },
     '& a:visited': {
-      color: `${theme.palette.secondary.dark} !important`,
+      color: `${spectrum.teal} !important`,
     },
     '& a:hover': {
       textDecoration: 'underline',
@@ -60,15 +61,15 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   open: {
-    backgroundColor: theme.palette.secondary.dark,
+    backgroundColor: spectrum.teal,
     '& h4': {
-      color: `${theme.palette.text.secondary} !important`,
+      color: `${spectrum.white} !important`,
     },
     '& a:link': {
-      color: `${theme.palette.text.secondary} !important`,
+      color: `${spectrum.white} !important`,
     },
     '& a:visited': {
-      color: `${theme.palette.text.secondary} !important`,
+      color: `${spectrum.white} !important`,
     },
   },
   flexGrid: {
@@ -95,7 +96,7 @@ const useStyles = makeStyles((theme) => ({
   },
   dropDownGrid: {
     margin: 'auto',
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: spectrum.white,
     padding: '1px 0px',
   },
   contributorIcon: {