From 75c4ecabb98730af8a983c44215e84858556e131 Mon Sep 17 00:00:00 2001
From: Aaron DeRuvo <aaron.deruvo@gmail.com>
Date: Wed, 30 Oct 2019 16:16:32 -0700
Subject: [PATCH] Use a slight off white (instead of pure white) in places
 where lots of text is on a dark background for better legibility

---
 .../web/src/community/connect/CoverArea.tsx   |  2 +-
 packages/web/src/dev/BuildPage.tsx            | 20 +++++++++----------
 packages/web/src/dev/CoverAction.tsx          |  2 +-
 packages/web/src/dev/Feature.tsx              |  2 +-
 packages/web/src/dev/StackSection.tsx         |  2 +-
 .../web/src/fauceting/MicroComponents.tsx     |  2 +-
 packages/web/src/styles.ts                    |  4 ++++
 7 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/web/src/community/connect/CoverArea.tsx b/packages/web/src/community/connect/CoverArea.tsx
index 4a96b763d05..e6bfb5235f1 100644
--- a/packages/web/src/community/connect/CoverArea.tsx
+++ b/packages/web/src/community/connect/CoverArea.tsx
@@ -60,7 +60,7 @@ class CoverArea extends React.PureComponent<Props> {
                 >
                   {t('cover.title')}
                 </H1>
-                <Text style={[fonts.p, textStyles.invert, styles.formName]}>
+                <Text style={[fonts.p, textStyles.readingOnDark, styles.formName]}>
                   {t('cover.joinMovement')}
                 </Text>
                 <EmailForm
diff --git a/packages/web/src/dev/BuildPage.tsx b/packages/web/src/dev/BuildPage.tsx
index 69a9fee29c8..f9cc264f743 100644
--- a/packages/web/src/dev/BuildPage.tsx
+++ b/packages/web/src/dev/BuildPage.tsx
@@ -41,10 +41,10 @@ class BuildPage extends React.PureComponent<I18nProps> {
             buttonOne={{ title: t('installWallet'), href: CeloLinks.walletApp }}
             buttonTwo={{ title: t('seeCode'), href: CeloLinks.monorepo }}
           >
-            <Li style={textStyles.invert}>{t('mobile.nonCustodial')}</Li>
-            <Li style={textStyles.invert}>{t('mobile.mobileUltra')}</Li>
-            <Li style={textStyles.invert}>{t('mobile.exchange')}</Li>
-            <Li style={textStyles.invert}>{t('mobile.qr')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('mobile.nonCustodial')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('mobile.mobileUltra')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('mobile.exchange')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('mobile.qr')}</Li>
           </StackSection>
           <StackSection
             label="2"
@@ -54,9 +54,9 @@ class BuildPage extends React.PureComponent<I18nProps> {
             buttonOne={{ title: t('readMore'), href: CeloLinks.docsOverview }}
             buttonTwo={{ title: t('seeCode'), href: CeloLinks.monorepo }}
           >
-            <Li style={textStyles.invert}>{t('protocol.algoReserve')}</Li>
-            <Li style={textStyles.invert}>{t('protocol.cryptoCollat')}</Li>
-            <Li style={textStyles.invert}>{t('protocol.native')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('protocol.algoReserve')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('protocol.cryptoCollat')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('protocol.native')}</Li>
           </StackSection>
           <StackSection
             label="3"
@@ -66,9 +66,9 @@ class BuildPage extends React.PureComponent<I18nProps> {
             buttonOne={{ title: t('readMore'), href: CeloLinks.docsOverview }}
             buttonTwo={{ title: t('seeCode'), href: CeloLinks.blockChainRepo }}
           >
-            <Li style={textStyles.invert}>{t('proof.permissionless')}</Li>
-            <Li style={textStyles.invert}>{t('proof.rewardsWeighted')}</Li>
-            <Li style={textStyles.invert}>{t('proof.onChain')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('proof.permissionless')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('proof.rewardsWeighted')}</Li>
+            <Li style={textStyles.readingOnDark}>{t('proof.onChain')}</Li>
           </StackSection>
         </View>
         <DeveloperUpdates />
diff --git a/packages/web/src/dev/CoverAction.tsx b/packages/web/src/dev/CoverAction.tsx
index e92c2162bf5..3c09933e47c 100644
--- a/packages/web/src/dev/CoverAction.tsx
+++ b/packages/web/src/dev/CoverAction.tsx
@@ -32,7 +32,7 @@ export default function CoverAction({ title, text, graphic, link, isMobile }: Pr
         <Text
           style={[
             fonts.p,
-            textStyles.invert,
+            textStyles.readingOnDark,
             standardStyles.elementalMarginBottom,
             isMobile && textStyles.center,
           ]}
diff --git a/packages/web/src/dev/Feature.tsx b/packages/web/src/dev/Feature.tsx
index 4b0465e37fe..e31d853bfac 100644
--- a/packages/web/src/dev/Feature.tsx
+++ b/packages/web/src/dev/Feature.tsx
@@ -21,7 +21,7 @@ const FeatureComponent = React.memo(function Feature({ title, graphic, text }: P
         )}
       </FadeIn>
       <Text style={[fonts.h5, textStyles.invert, textStyles.center, styles.title]}>{title}</Text>
-      <Text style={[fonts.mini, textStyles.center, textStyles.invert]}>{text}</Text>
+      <Text style={[fonts.mini, textStyles.center, textStyles.readingOnDark]}>{text}</Text>
     </View>
   )
 })
diff --git a/packages/web/src/dev/StackSection.tsx b/packages/web/src/dev/StackSection.tsx
index 6871bd3d7f8..b033b193a08 100644
--- a/packages/web/src/dev/StackSection.tsx
+++ b/packages/web/src/dev/StackSection.tsx
@@ -38,7 +38,7 @@ export default withScreenSize(
             </Cell>
             <Cell span={Spans.half} style={styles.content}>
               <H3 style={[standardStyles.elementalMarginBottom, textStyles.invert]}>{title}</H3>
-              <Text style={[fonts.p, textStyles.invert]}>{text}</Text>
+              <Text style={[fonts.p, textStyles.readingOnDark]}>{text}</Text>
               <Ul style={styles.list}>{children}</Ul>
             </Cell>
             <Cell
diff --git a/packages/web/src/fauceting/MicroComponents.tsx b/packages/web/src/fauceting/MicroComponents.tsx
index 833765223b9..af5b52616d5 100644
--- a/packages/web/src/fauceting/MicroComponents.tsx
+++ b/packages/web/src/fauceting/MicroComponents.tsx
@@ -18,7 +18,7 @@ const BAD_STATES = new Set([RequestState.Failed, RequestState.Invalid])
 export function ContextualInfo({ requestState, t, isFaucet }: InfoProps) {
   const contextStyle = [
     fonts.small,
-    !isFaucet && textStyles.invert,
+    !isFaucet && textStyles.readingOnDark,
     BAD_STATES.has(requestState) && textStyles.error,
   ]
 
diff --git a/packages/web/src/styles.ts b/packages/web/src/styles.ts
index 8a161c92ae6..617f7ac8f11 100644
--- a/packages/web/src/styles.ts
+++ b/packages/web/src/styles.ts
@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native'
 
 export enum colors {
   white = '#FFFFFF',
+  offWhite = 'rgba(221,221,221,1.00)',
   light = '#E5E5E5',
   gray = '#DDDDDD',
   screenGray = '#545C64',
@@ -186,6 +187,9 @@ export const textStyles = StyleSheet.create({
   invert: {
     color: colors.white,
   },
+  readingOnDark: {
+    color: colors.offWhite,
+  },
   caption: {
     paddingTop: 5,
   },