Merge pull request #871 from LiskHQ/866-adapt-icon-colors

Adapt icon colors to new color palette - Closes #868
LiskArchive · Jun 13, 2019 · 3f03d73 · 3f03d73
2 parents 5e4dc9c + bfb7573
commit 3f03d73
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 26 deletions.
diff --git a/src/components/accountSummary/wallet.js b/src/components/accountSummary/wallet.js
@@ -144,7 +144,7 @@ class AccountSummary extends React.Component {
         ]}>
           <Share type={P}
             style={[styles.addressP, styles.theme.walletAddress]}
-            iconColor={theme === 'dark' ? colors[theme].gray2 : colors[theme].gray1}
+            iconColor={colors.light.blueGray}
             containerStyle={styles.addressContainer}
             value={account.address}
             title={address}

diff --git a/src/components/bookmarkPage/index.js b/src/components/bookmarkPage/index.js
@@ -125,7 +125,7 @@ class Bookmark extends React.Component {
                   style={styles.searchIcon}
                   name='search'
                   size={18}
-                  color={colors[theme].gray2}
+                  color={colors.light.blueGray}
                 />
                 <Input
                   label={isSmallScreen ? '' : t('Search')}

diff --git a/src/components/imessage/confirm/index.js b/src/components/imessage/confirm/index.js
@@ -119,7 +119,7 @@ class Confirm extends Component {
                       <Icon
                         name='tx-fee'
                         style={styles.icon} size={20}
-                        color={colors.light.gray2}
+                        color={colors.light.slateGray}
                       />
                       <View style={styles.rowContent}>
                         <P style={styles.label}>Transaction fee</P>

diff --git a/src/components/imessage/txDetail/index.js b/src/components/imessage/txDetail/index.js
@@ -136,7 +136,7 @@ class TransactionDetail extends React.Component {
               name='send'
               size={22}
               style={styles.rowIcon}
-              color={colors[theme].gray2}
+              color={colors.light.slateGray}
             />
             <View style={styles.rowContent}>
               <P style={[styles.label, styles.theme.label]}>
@@ -163,7 +163,7 @@ class TransactionDetail extends React.Component {
                 name='recipient'
                 size={22}
                 style={styles.rowIcon}
-                color={colors[theme].gray2}
+                color={colors.light.slateGray}
               />
               <View style={styles.rowContent}>
                 <P style={[styles.label, styles.theme.label]}>Recipient</P>
@@ -185,7 +185,7 @@ class TransactionDetail extends React.Component {
                   name='reference'
                   size={22}
                   style={styles.rowIcon}
-                  color={colors[theme].gray2}
+                  color={colors.light.slateGray}
                 />
                 <View style={styles.rowContent}>
                   <P style={[styles.label, styles.theme.label]}>Reference</P>
@@ -200,7 +200,7 @@ class TransactionDetail extends React.Component {
               name='confirmation'
               size={22}
               style={styles.rowIcon}
-              color={colors[theme].gray2}
+              color={colors.light.slateGray}
             />
             <View style={styles.rowContent}>
               <P style={[styles.label, styles.theme.label]}>Confirmations</P>

diff --git a/src/components/register/styles.js b/src/components/register/styles.js
@@ -41,7 +41,7 @@ const styles = {
     marginTop: 14,
     marginRight: 10,
     marginLeft: 10,
-    backgroundColor: colors.light.gray5,
+    backgroundColor: colors.light.ghost,
     zIndex: 5,
   },
   disabledNavButton: {

diff --git a/src/components/router/headerBackground/index.js b/src/components/router/headerBackground/index.js
@@ -1,13 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
 import withTheme from '../../withTheme';
-import { colors } from '../../../constants/styleGuide';
+import { colors, themes } from '../../../constants/styleGuide';
+import { setColorOpacity } from '../../../utilities/helpers';
+import getStyles from './styles';
 
-const HeaderBackground = ({ theme }) => (
-  <View style={{
-    flex: 1, backgroundColor: colors[theme].headerBg,
-  }}>
-  </View>
+const HeaderBackground = ({ theme, styles }) => (
+  <View
+    style={[
+      styles,
+      {
+        backgroundColor: colors[theme].headerBg,
+        borderBottomColor: theme === themes.light
+          ? colors.light.whiteSmoke
+          : setColorOpacity(colors.light.white, 0.24),
+      },
+    ]}
+  />
 );
 
-export default withTheme(HeaderBackground, {});
+export default withTheme(HeaderBackground, getStyles());
diff --git a/src/components/router/headerBackground/styles.js b/src/components/router/headerBackground/styles.js
@@ -0,0 +1,6 @@
+export default () => ({
+  common: {
+    flex: 1,
+    borderBottomWidth: 1,
+  },
+});
diff --git a/src/components/router/index.js b/src/components/router/index.js
@@ -27,14 +27,13 @@ import HeaderBackButton from './headerBackButton';
 import TokenSwitcher from './tokenSwitcher';
 import TabBarIcon from './tabBarIcon';
 import TabBarComponent from './tabBarComponent';
-import { colors } from '../../constants/styleGuide';
 import DynamicHeaderBackground from './dynamicHeaderBackground';
 
 const headerStyle = {
   backgroundColor: 'transparent',
   overflow: 'hidden',
   elevation: 1,
-  borderBottomColor: colors.light.whiteSmoke, // @todo dark mode is not correct
+  borderBottomWidth: 0,
 };
 
 /**

diff --git a/src/components/scanner/cameraAccess.js b/src/components/scanner/cameraAccess.js
@@ -30,7 +30,7 @@ const CameraAccess = ({
             onPress={close}
             style={styles.cameraAccessCloseButton}
             titleStyle={styles.theme.closeButton}
-            color={colors[theme].gray2}
+            color={colors.light.blueGray}
           /> : null
       }
       {

diff --git a/src/components/send/overview/index.js b/src/components/send/overview/index.js
@@ -185,7 +185,7 @@ class Overview extends React.Component {
               name={actionType === 'initialize' ? 'tx-fee' : 'amount'}
               style={styles.icon}
               size={20}
-              color={colors[theme].gray2}
+              color={colors.light.blueGray}
             />
 
             <View style={styles.rowContent}>
@@ -208,7 +208,7 @@ class Overview extends React.Component {
                 name='tx-fee'
                 style={styles.icon}
                 size={20}
-                color={colors[theme].gray2}
+                color={colors.light.blueGray}
               />
 
               <View style={styles.rowContent}>
@@ -232,7 +232,7 @@ class Overview extends React.Component {
                 name='reference'
                 style={styles.icon}
                 size={20}
-                color={colors[theme].gray2}
+                color={colors.light.blueGray}
               />
 
               <View style={styles.rowContent}>

diff --git a/src/components/settings/index.js b/src/components/settings/index.js
@@ -72,11 +72,11 @@ class Settings extends React.Component {
 
     let target = 'EnableBioAuth';
 
-    let targetStateLabel = [t('Disabled'), colors[theme].gray2];
+    let targetStateLabel = [t('Disabled'), colors.light.blueGray];
     if (settings.sensorType && settings.hasStoredPassphrase) {
       targetStateLabel = [
         t('Enabled'),
-        theme === themes.light ? colors.light.black : colors.dark.white,
+        theme === themes.light ? colors.light.maastrichtBlue : colors.dark.platinum,
       ];
       target = 'DisableBioAuth';
     }

diff --git a/src/components/share/index.js b/src/components/share/index.js
@@ -6,7 +6,7 @@ import withTheme from '../withTheme';
 import getStyles from './styles';
 
 const Share = ({
-  styles, icon, value, style, type, children, containerStyle, iconColor, theme, title,
+  styles, icon, value, style, type, children, containerStyle, iconColor, title,
 }) => {
   const Element = type || Text;
 
@@ -27,7 +27,7 @@ const Share = ({
                   message: value || children,
                   url: '',
                 })}
-                color={iconColor || colors[theme].gray2} /> : null
+                color={iconColor || colors.light.blueGray} /> : null
       }
     </View>
   );

diff --git a/src/constants/styleGuide/colors.js b/src/constants/styleGuide/colors.js
@@ -23,7 +23,9 @@ const light = {
 const dark = {
   ...common,
   outgoingArrow: common.platinum,
-  headerBg: common.maastrichtBlue,
+  // dark mode's header color is not on the style guide
+  headerBg: '#00152D',
+  // homeHeaderBg is ultramarineBlue with 30% opacity
   homeHeaderBg: '#1b316a',
 };