fixed color contrast issues

wevote · Oct 4, 2024 · f9a56af · f9a56af
1 parent a0b8975
commit f9a56af
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 22 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -738,7 +738,7 @@ class App extends Component {
 
 const WeVoteBody = styled('div')`
   background-color: #fff; // rgb(235, 236, 238); // #fafafa;
-  color: #333;
+  color: #000;
   display: block;
   font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   line-height: 1.4;

diff --git a/src/css/main.css b/src/css/main.css
@@ -24,7 +24,7 @@
   --white:#fff;
   --gray:#6c757d;
   --gray-dark:#343a40;
-  --primary:#0858A1;
+  --primary:#206DB3;
   --secondary:#6c757d;
   --success:#28a745;
   --info:#17a2b8;
@@ -102,13 +102,13 @@ small {
 }
 
 a {
-  color:#0858A1;
+  color:#206DB3; /* primary500 */
   text-decoration:none;
   background-color:transparent
 }
 
 a:hover {
-  color:#0858A1;
+  color:#206DB3; /* primary500 */
   text-decoration:underline
 }
 
@@ -1746,15 +1746,15 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .u-link-color {
-  color:#0858A1
+  color:#206DB3; /* primary500 */
 }
 
 .u-link-color-on-hover {
-  color:#0858A1
+  color:#206DB3; /* primary500 */
 }
 
 .u-link-color-on-hover:hover {
-  color:#0858A1
+  color:#206DB3; /* primary500 */
 }
 
 .u-bold {
@@ -1767,7 +1767,7 @@ h1,h2,h3,h4,h5,h6 {
 
 .u-link-underline {
   text-decoration:underline;
-  color:#0858A1;
+  color:#206DB3; /* primary500 */
 }
 
 .u-link-underline-on-hover:hover {
@@ -2665,7 +2665,7 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .open-web-site {
-  color:#4371cc;
+  color:#206DB3; /* primary500 */
   padding-right:2px;
   padding-left:2px
 }

diff --git a/src/js/common/components/Navigation/ChallengeInviteSteps.jsx b/src/js/common/components/Navigation/ChallengeInviteSteps.jsx
@@ -170,15 +170,15 @@ const HeaderContainer = styled('div')`
     button {
     background: none;
     border: none;
-    color: ${DesignTokenColors.primary600};
+    color: ${DesignTokenColors.primary500};
     font-size: 13px;
     font-weight: 500;
     text-decoration: none;
   }
 `;
 
 const Wrapper = styled('div')`
-  align-items: center;  
+  align-items: center;
   display: flex;
   margin-left: auto;
 `;
@@ -200,7 +200,7 @@ const StepsContainer = styled('div')`
 
 const StepOneIconAndText = styled('div')`
   align-items: center;
-  border-bottom: 2px solid ${({ isActive }) => (isActive ? DesignTokenColors.primary600 : 'transparent')};
+  border-bottom: 2px solid ${({ isActive }) => (isActive ? DesignTokenColors.primary500 : 'transparent')};
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -214,23 +214,23 @@ const StepOneIconAndText = styled('div')`
 
   a {
     font-weight: ${({ isActive }) => (isActive ? '600' : 'normal')};
-    color: ${({ isActive }) => (isActive ? DesignTokenColors.primary600 : 'inherit')};
+    color: ${({ isActive }) => (isActive ? DesignTokenColors.primary500 : 'inherit')};
 
     &:hover {
-      color: ${DesignTokenColors.primary600};
+      color: ${DesignTokenColors.primary500};
       font-weight: 600;
       text-decoration: underline;
     }
   }
 
   &:hover {
-    border-bottom: 2px solid ${DesignTokenColors.primary600};
+    border-bottom: 2px solid ${DesignTokenColors.primary500};
   }
 `;
 
 const StepTwoIconAndText = styled('div')`
   align-items: center;
-  border-bottom: 2px solid ${({ isActive }) => (isActive ? DesignTokenColors.primary600 : 'transparent')};
+  border-bottom: 2px solid ${({ isActive }) => (isActive ? DesignTokenColors.primary500 : 'transparent')};
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -244,16 +244,16 @@ const StepTwoIconAndText = styled('div')`
 
   a {
     font-weight: ${({ isActive }) => (isActive ? '600' : 'normal')};
-    color: ${({ isActive }) => (isActive ? DesignTokenColors.primary600 : 'inherit')};
+    color: ${({ isActive }) => (isActive ? DesignTokenColors.primary500 : 'inherit')};
 
     &:hover {
-      color: ${DesignTokenColors.primary600};
+      color: ${DesignTokenColors.primary500};
       font-weight: 600;
     }
   }
 
   &:hover {
-   // border-bottom: 2px solid ${DesignTokenColors.primary600};
+   // border-bottom: 2px solid ${DesignTokenColors.primary500};
   }
 `;
 

diff --git a/src/js/common/components/Style/muiTheme.js b/src/js/common/components/Style/muiTheme.js
@@ -9,7 +9,7 @@ import muiStyleOverrides from '../../../components/Style/muiStyleOverrides';
 const muiTheme = createTheme({
   palette: {
     primary: {
-      main: `${DesignTokenColors.primary600}`, // Former brandBlue #2E3C5D
+      main: `${DesignTokenColors.primary500}`, // Former brandBlue #2E3C5D
       dark: `${DesignTokenColors.primary700}`,
     },
     secondary: {

diff --git a/src/js/common/components/Widgets/OpenExternalWebSite.jsx b/src/js/common/components/Widgets/OpenExternalWebSite.jsx
@@ -33,7 +33,7 @@ export default class OpenExternalWebSite extends Component {
           target={this.props.target || ''}
           rel="noopener noreferrer"
           title={this.props.title || ''}
-          aria-label={this.props.ariaLabel}
+          aria-label={this.props.ariaLabel || this.props.title || ''}
         >
           {this.props.body ? this.props.body : ''}
         </a>

diff --git a/src/js/components/Widgets/ShowMoreButtons.jsx b/src/js/components/Widgets/ShowMoreButtons.jsx
@@ -59,7 +59,7 @@ const styles = (theme) => ({
 
 const ShowMoreButtonsStyled = styled('button')(({ theme }) => (`
   border: 0 !important;
-  color: #0858A1;
+  color: #206DB3;
   cursor: pointer;
   display: block !important;
   background: #fff !important;