Accessibility contrast fixes

package.json

@@ -43,7 +43,7 @@
     "i18next-xhr-backend": "^3.2.2",
     "internal-nav-helper": "^3.1.0",
     "ip": "^1.1.5",
-    "ipfs-css": "^0.13.1",
+    "ipfs-css": "^1.0.0",
     "ipfs-geoip": "^4.0.0",
     "ipfs-redux-bundle": "^7.0.0",
     "ipld-explorer-components": "^1.5.1",

src/components/button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import './Button.css'
 
-const Button = ({ bg = 'bg-aqua', color = 'white', fill = 'white', className = '', disabled, danger, minWidth = 140, children, style, ...props }) => {
+const Button = ({ bg = 'bg-teal', color = 'white', fill = 'white', className = '', disabled, danger, minWidth = 140, children, style, ...props }) => {
   const bgClass = danger ? 'bg-red' : disabled ? 'bg-gray-muted' : bg
   const fillClass = danger ? 'fill-white' : disabled ? 'fill-snow' : fill
   const colorClass = danger ? 'white' : disabled ? 'light-gray' : color

src/components/connected/Connected.js

@@ -3,7 +3,7 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 
 const pickColor = (ipfsReady, ipfsConnected) => {
-  if (ipfsReady && ipfsConnected) return 'aqua'
+  if (ipfsReady && ipfsConnected) return 'teal'
   if (ipfsReady) return 'yellow'
   return 'gray'
 }

src/components/language-selector/language-modal/LanguageModal.js

@@ -17,12 +17,12 @@ const LanguageModal = ({ t, tReady, onLeave, link, className, ...props }) => {
   return (
     <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '40em' }}>
       <ModalBody icon={SpeakerIcon}>
-        <p className='gray w-80 center'>{t('languageModal.description')}</p>
+        <p className='charcoal w-80 center'>{t('languageModal.description')}</p>
         <div className='pa2 flex flex-wrap'>
           { localesList.map((lang) =>
             <button
               key={`lang-${lang}`}
-              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 aqua pointer'
+              className='pa2 w-33 flex nowrap bg-transparent bn outline-0 teal pointer'
               onClick={() => handleClick(lang)}>
               { getLanguage(lang) }
             </button>

src/components/text-input-modal/TextInputModal.js

@@ -116,7 +116,7 @@ class TextInputModal extends React.Component {
 
         <ModalActions>
           <Button className='ma2' bg='bg-gray' onClick={onCancel}>Cancel</Button>
-          <Button className='ma2' bg='bg-aqua' disabled={this.isDisabled} onClick={this.onSubmit}>{submitText}</Button>
+          <Button className='ma2' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{submitText}</Button>
         </ModalActions>
       </Modal>
     )

src/components/tour/TourHelper.js

@@ -8,7 +8,7 @@ export const TourHelper = ({ doEnableTours, className = '', size = 23 }) => {
 
   return (
     <span className={`dib mr1 ml4-m pointer ${className}`} onClick={handleClick}>
-      <svg className='fill-aqua o-60 glow' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' width={size} height={size}>
+      <svg className='fill-teal o-60 glow' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' width={size} height={size}>
         <path d='m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm2,34c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1v-2c0-0.6 0.4-1 1-1h2c0.6,0 1,0.4 1,1v2zm2.7-8.9c-1.4,1.2-2.4,2-2.7,3.1-0.1,0.5-0.5,0.8-1,0.8h-2c-0.6,0-1.1-0.5-1-1.1 0.4-2.9 2.5-4.5 4.2-5.9 1.8-1.4 2.8-2.3 2.8-4 0-2.8-2.2-5-5-5s-5,2.2-5,5c0,0.2 0,0.4 0,0.6 0.1,0.5-0.2,1-0.7,1.1l-1.9,.6c-0.6,0.2-1.2-0.2-1.3-0.8-0.1-0.5-0.1-1-0.1-1.5 0-5 4-9 9-9s9,4 9,9c0,3.7-2.4,5.6-4.3,7.1z' />
       </svg>
     </span>

src/files/explore-form/FilesExploreForm.js

@@ -103,7 +103,7 @@ class FilesExploreForm extends React.Component {
             style={{ borderRadius: '0' }}
             title={t('exploreForm.browse')}
             onClick={this.onBrowse}
-            className='ExploreFormButton button-reset pv1 ph2 ba f7 fw4 white bg-aqua overflow-hidden' >
+            className='ExploreFormButton button-reset pv1 ph2 ba f7 fw4 white bg-gray overflow-hidden' >
             <StrokeFolder style={{ height: 24 }} className='dib fill-current-color v-mid' />
             <span className='ml2'>{t('exploreForm.browse')}</span>
           </Button>

src/lib/tours.js

@@ -75,7 +75,7 @@ export const statusTour = {
   styles: {
     options: {
       width: '500px',
-      primaryColor: '#69c4cd',
+      primaryColor: '#378085',
       textColor: '#34373f',
       zIndex: 999
     }
@@ -89,7 +89,7 @@ export const filesTour = {
         <h2 className='f3 fw4'>{t('tour.step1.title')}</h2>
         <Trans i18nKey='tour.step1.paragraph1'>
           <p className='tl f6'>
-            This is where the files on your <a className='aqua link' href='https://docs.ipfs.io/guides/concepts/mfs/' rel='noopener noreferrer' target='_blank'>
+            This is where the files on your <a className='teal link' href='https://docs.ipfs.io/guides/concepts/mfs/' rel='noopener noreferrer' target='_blank'>
             Mutable File System (MFS)</a> live. You can add files or folders and manage them from this page.
           </p>
         </Trans>
@@ -113,7 +113,7 @@ export const filesTour = {
         <p className='tl f6'>{t('tour.step3.paragraph2')}</p>
         <Trans i18nKey='tour.step3.paragraph3'>
           <p className='tl f6'>
-            If you want to add something that is already on IPFS, you can import it to your MFS by passing its <a className='aqua link' href='https://docs.ipfs.io/guides/concepts/cid/' rel='noopener noreferrer' target='_blank'>Content
+            If you want to add something that is already on IPFS, you can import it to your MFS by passing its <a className='teal link' href='https://docs.ipfs.io/guides/concepts/cid/' rel='noopener noreferrer' target='_blank'>Content
             Identifier (CID)</a>.
           </p>
         </Trans>
@@ -136,7 +136,7 @@ export const filesTour = {
   styles: {
     options: {
       width: '500px',
-      primaryColor: '#69c4cd',
+      primaryColor: '#378085',
       textColor: '#34373f',
       zIndex: 999
     }
@@ -175,7 +175,7 @@ export const peersTour = {
   styles: {
     options: {
       width: '500px',
-      primaryColor: '#69c4cd',
+      primaryColor: '#378085',
       textColor: '#34373f',
       zIndex: 999
     }
@@ -198,7 +198,7 @@ export const settingsTour = {
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
         <Trans i18nKey='tour.step2.paragraph1'>
           <p className='tl f6'>You can change the language of the Web UI.
-          If your preferred language isn't available, head over our project page in <a className='aqua link' href='https://www.transifex.com/ipfs/ipfs-webui/translate/' rel='noopener noreferrer' target='_blank'>Transifex</a> to help us translate!
+          If your preferred language isn't available, head over our project page in <a className='teal link' href='https://www.transifex.com/ipfs/ipfs-webui/translate/' rel='noopener noreferrer' target='_blank'>Transifex</a> to help us translate!
           </p>
         </Trans>
       </div>,
@@ -228,7 +228,7 @@ export const settingsTour = {
   styles: {
     options: {
       width: '500px',
-      primaryColor: '#69c4cd',
+      primaryColor: '#378085',
       textColor: '#34373f',
       zIndex: 999
     }

src/peers/PeersTable/PeersTable.js

@@ -106,7 +106,7 @@ export class PeersTable extends React.Component {
           {({ width }) => (
             <Table
               className='tl fw4 w-100 f6'
-              headerClassName='aqua fw2 ttu tracked ph2'
+              headerClassName='teal fw2 ttu tracked ph2'
               rowClassName={this.rowClassRenderer}
               width={width}
               height={tableHeight}

src/settings/SettingsPage.js

@@ -107,7 +107,7 @@ export const SettingsPage = ({
 )
 
 const SaveButton = ({ t, hasErrors, hasSaveFailed, hasSaveSucceded, isSaving, hasLocalChanges, hasExternalChanges, onClick }) => {
-  const bg = hasSaveSucceded ? 'bg-green' : 'bg-aqua'
+  const bg = hasSaveSucceded ? 'bg-green' : 'bg-teal'
   return (
     <Button
       minWidth={100}

src/settings/Title.js

@@ -1,5 +1,5 @@
 import React from 'react'
 
 export default ({ props, children }) => (
-  <h2 className='ttu tracked f6 fw4 aqua mt0 mb3' {...props}>{ children }</h2>
+  <h2 className='ttu tracked f6 fw4 teal mt0 mb3' {...props}>{ children }</h2>
 )

src/status/Commons.js

@@ -1,5 +1,5 @@
 import React from 'react'
 
 export const Title = ({ children, ...props }) => (
-  <h2 className='ttu tracked f6 fw4 aqua mt0 mb4' {...props}>{ children }</h2>
+  <h2 className='ttu tracked f6 fw4 teal mt0 mb4' {...props}>{ children }</h2>
 )