refactor: string colors to themes

src/components/CopyClipboard.js

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { t } from 'ttag';
 import { TextPropTypes } from 'deprecated-react-native-prop-types';
-import { PRIMARY_COLOR } from '../constants';
+import { COLORS } from '../styles/themes';
 
 class CopyClipboard extends React.Component {
   static defaultProps = {
@@ -83,7 +83,7 @@ const style = StyleSheet.create({
     fontSize: 13,
   },
   copied: {
-    color: PRIMARY_COLOR,
+    color: COLORS.primary,
   },
 });
 

src/components/GlobalErrorModal.js

@@ -17,13 +17,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { t } from 'ttag';
 
 import { hideErrorModal } from '../actions';
+import { COLORS } from '../styles/themes';
 
 const styles = StyleSheet.create({
   modal: {
     justifyContent: 'flex-end',
   },
   innerModal: {
-    backgroundColor: '#fff',
+    backgroundColor: COLORS.backgroundColor,
     borderRadius: 8,
     alignItems: 'center',
     paddingHorizontal: 16,

src/components/HathorList.js

@@ -15,19 +15,20 @@ import {
 } from 'react-native';
 
 import chevronRight from '../assets/icons/chevron-right.png';
+import { COLORS } from '../styles/themes';
 
 const defaultRadius = 16;
 
 export class HathorList extends Component {
   style = StyleSheet.create({
     view: {
       alignSelf: 'stretch',
-      backgroundColor: 'white',
+      backgroundColor: COLORS.backgroundColor,
       borderRadius: defaultRadius,
       margin: 16,
       shadowOffset: { height: 2, width: 0 },
       shadowRadius: 4,
-      shadowColor: 'black',
+      shadowColor: COLORS.textColor,
       shadowOpacity: 0.08,
     },
     infinityView: {
@@ -62,7 +63,7 @@ class BaseItem extends Component {
 
   style = StyleSheet.create({
     container: {
-      borderColor: '#eee',
+      borderColor: COLORS.borderColor,
       borderBottomWidth: 1,
     },
     lastItemContainer: {
@@ -78,7 +79,7 @@ class BaseItem extends Component {
     },
     view: {
       flexDirection: 'row',
-      backgroundColor: 'white',
+      backgroundColor: COLORS.backgroundColor,
       alignItems: 'center',
       height: 64,
       paddingLeft: 16,
@@ -121,7 +122,7 @@ export class ListItem extends BaseItem {
   style = Object.assign(this.style, StyleSheet.create({
     title: {
       ...this.style.title,
-      color: 'rgba(0, 0, 0, 0.5)',
+      color: COLORS.textColorShadow,
     },
   }));
 

src/components/HathorModal.js

@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
+import { COLORS } from '../styles/themes';
 
 const HathorModal = (props) => (
   <Modal
@@ -33,7 +34,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   view: {
-    backgroundColor: '#fff',
+    backgroundColor: COLORS.backgroundColor,
     borderRadius: 8,
     alignItems: 'center',
     paddingHorizontal: 16,

src/components/HathorTextInput.js

@@ -7,12 +7,17 @@
 
 import React from 'react';
 import { TextInput } from 'react-native';
+import { COLORS, STYLE } from '../styles/themes';
 
 const HathorTextInput = (props) => (
   <TextInput
     {...props}
     style={[{
-      width: 100, padding: 8, borderRadius: 4, borderColor: 'gainsboro', borderWidth: 1,
+      width: 100,
+      padding: 8,
+      borderRadius: 4,
+      borderColor: COLORS.borderColor,
+      borderWidth: STYLE.borderWidth,
     }, props.style]}
     keyboardAppearance='dark'
   />

src/components/InfoBox.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-import { LIGHT_BG_COLOR } from '../constants';
+import { COLORS } from '../styles/themes';
 
 const InfoBox = (props) => {
   /* eslint-disable react/no-array-index-key */
@@ -32,12 +32,12 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 14,
     lineHeight: 24,
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: COLORS.textColorShadow,
   },
   wrapper: {
     marginVertical: 16,
     padding: 16,
-    backgroundColor: LIGHT_BG_COLOR,
+    backgroundColor: COLORS.lowContrastDetail,
     borderRadius: 8,
   },
 });

src/components/InputLabel.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
+import { COLORS } from '../styles/themes';
 
 const InputLabel = (props) => (
   <Text
@@ -20,7 +21,7 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 12,
     lineHeight: 14,
-    color: 'rgba(0,0,0,0.5)',
+    color: COLORS.textColorShadow,
   },
 });
 

src/components/ModalConfirmation.js

@@ -12,6 +12,7 @@ import {
 
 import checkLogo from '../assets/images/icCheckBig.png';
 import { getKeyboardAvoidingViewTopDistance } from '../utils';
+import { COLORS } from '../styles/themes';
 
 class ModalConfirmation extends React.Component {
   /**
@@ -64,7 +65,7 @@ class ModalConfirmation extends React.Component {
       innerModal: {
         marginBottom,
         height: 270,
-        backgroundColor: 'white',
+        backgroundColor: COLORS.backgroundColor,
         alignItems: 'center',
         justifyContent: 'space-around',
         borderRadius: 8,

src/components/NewHathorButton.js

@@ -11,6 +11,7 @@ import {
   StyleSheet, Text, TouchableOpacity, View,
 } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { COLORS } from '../styles/themes';
 
 const NewHathorButton = (props) => {
   const wrapperViewStyle = [style.wrapper];
@@ -64,19 +65,19 @@ const style = StyleSheet.create({
   wrapper: {
     height: 48,
     borderRadius: 8,
-    backgroundColor: '#000',
+    backgroundColor: COLORS.textColor,
     alignSelf: 'stretch',
   },
   wrapperDisabled: {
     backgroundColor: 'rgba(0, 0, 0, 0.05)',
   },
   wrapperSecondary: {
-    backgroundColor: '#fff',
-    borderColor: '#000',
+    backgroundColor: COLORS.backgroundColor,
+    borderColor: COLORS.textColor,
     borderWidth: 1.5,
   },
   wrapperSecondaryDisabled: {
-    borderColor: 'rgba(0, 0, 0, 0.5)',
+    borderColor: COLORS.textColorShadow,
   },
   touchable: {
     flex: 1,
@@ -88,17 +89,17 @@ const style = StyleSheet.create({
     fontWeight: 'bold',
     fontSize: 14,
     textTransform: 'uppercase',
-    color: '#fff',
+    color: COLORS.backgroundColor,
     textAlign: 'center',
   },
   textSecondary: {
-    color: '#000',
+    color: COLORS.textColor,
   },
   textSecondaryDisabled: {
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: COLORS.textColorShadow,
   },
   textDisabled: {
-    color: 'rgba(0,0,0,0.5)',
+    color: COLORS.textColorShadow,
   },
 });
 

src/components/OfflineBar.js

@@ -10,7 +10,7 @@ import { StyleSheet, View, Text } from 'react-native';
 import { connect } from 'react-redux';
 import { getStatusBarHeight } from 'react-native-status-bar-height';
 import { t } from 'ttag';
-import { ERROR_BG_COLOR } from '../constants';
+import { COLORS } from '../styles/themes';
 
 /**
  * isOnline {bool} Indicates whether the wallet is connected.
@@ -22,7 +22,7 @@ const mapStateToProps = (state) => ({
 class OfflineBar extends React.Component {
   style = StyleSheet.create({
     view: {
-      backgroundColor: ERROR_BG_COLOR,
+      backgroundColor: COLORS.errorBgColor,
       position: 'absolute',
       left: 0,
       padding: 5,
@@ -34,7 +34,7 @@ class OfflineBar extends React.Component {
     text: {
       fontSize: 14,
       fontWeight: 'bold',
-      color: 'white',
+      color: COLORS.backgroundColor,
     },
   });
 

src/components/PinInput.js

@@ -9,11 +9,11 @@ import React from 'react';
 import { Text, StyleSheet, View } from 'react-native';
 
 import NumPad from './NumPad';
-import { ERROR_BG_COLOR } from '../constants';
+import { COLORS } from '../styles/themes';
 
 class PinInput extends React.Component {
   static defaultProps = {
-    color: 'black',
+    color: COLORS.textColor,
   };
 
   getMarker = (index, isFilled) => {
@@ -66,7 +66,7 @@ const styles = StyleSheet.create({
     margin: 8,
   },
   error: {
-    color: ERROR_BG_COLOR,
+    color: COLORS.errorBgColor,
     marginTop: 8,
     height: 18,
   },

src/components/PublicExplorerListButton.js

@@ -3,6 +3,7 @@ import { t } from 'ttag';
 import { Image, Linking } from 'react-native';
 import icShareActive from '../assets/icons/icShareActive.png';
 import { ListButton } from './HathorList';
+import { COLORS } from '../styles/themes';
 
 export function PublicExplorerListButton(props) {
   const { txId } = props;
@@ -11,6 +12,6 @@ export function PublicExplorerListButton(props) {
   const explorerLink = `https://explorer.hathor.network/transaction/${txId}`;
 
   return (
-    <ListButton title={t`Public Explorer`} button={explorerIcon} onPress={() => { Linking.openURL(explorerLink); }} titleStyle={{ color: 'rgba(0, 0, 0, 0.5)' }} isLast />
+    <ListButton title={t`Public Explorer`} button={explorerIcon} onPress={() => { Linking.openURL(explorerLink); }} titleStyle={{ color: COLORS.textColorShadow }} isLast />
   );
 }

src/components/PushTxDetailsModal.js

@@ -9,16 +9,17 @@ import { TxHistory } from '../models';
 import { PublicExplorerListButton } from './PublicExplorerListButton';
 import { updateSelectedToken } from '../actions';
 import HathorModal from './HathorModal';
+import { COLORS } from '../styles/themes';
 
 const style = StyleSheet.create({
   modal: {
     justifyContent: 'flex-end',
   },
   registeredToken: {
-    color: '#8C46FF',
+    color: COLORS.primary,
   },
   wrapperView: {
-    backgroundColor: '#fff',
+    backgroundColor: COLORS.backgroundColor,
     borderRadius: 8,
   },
 });

src/components/ReceiveMyAddress.js

@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import SimpleButton from './SimpleButton';
 import CopyClipboard from './CopyClipboard';
 import { sharedAddressUpdate } from '../actions';
+import { COLORS } from '../styles/themes';
 
 export default function ReceiveMyAddress() {
   const dispatch = useDispatch();
@@ -48,7 +49,7 @@ export default function ReceiveMyAddress() {
       padding: 16,
       borderBottomWidth: 1.5,
       borderTopWidth: 1.5,
-      borderColor: '#e5e5ea',
+      borderColor: COLORS.borderColor,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
@@ -76,7 +77,7 @@ export default function ReceiveMyAddress() {
         <SimpleButton
           onPress={shareAddress}
           title={t`Share`}
-          color='#000'
+          color={COLORS.textColor}
           containerStyle={styles.buttonContainer}
         />
       </View>
@@ -91,10 +92,10 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     marginTop: 32,
     borderWidth: 1.5,
-    borderColor: '#e5e5ea',
+    borderColor: COLORS.borderColor,
     borderRadius: 8,
     marginBottom: 32,
-    backgroundColor: 'white', // Ensures maximum contrast for the code readers
+    backgroundColor: COLORS.backgroundColor, // Ensures maximum contrast for the code readers
   },
   qrcodeWrapper: {
     padding: 24,
@@ -108,6 +109,6 @@ const styles = StyleSheet.create({
   },
   leftButtonBorder: {
     borderRightWidth: 1.5,
-    borderColor: '#eee',
+    borderColor: COLORS.borderColor,
   },
 });

src/components/SlideIndicatorBar.js

@@ -10,14 +10,15 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
+import { COLORS } from '../styles/themes';
 
 export default class SlideIndicatorBar extends Component {
   style = StyleSheet.create({
     view: {
       height: 4,
       width: 48,
       position: 'absolute',
-      backgroundColor: 'rgba(0, 0, 0, 0.3)',
+      backgroundColor: COLORS.textColorShadowLight,
       borderRadius: 2,
       top: 8,
       alignSelf: 'center',

src/components/TokenBox.js

@@ -12,6 +12,7 @@ import {
 
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { faSortDown } from '@fortawesome/free-solid-svg-icons';
+import { COLORS } from '../styles/themes';
 
 const TokenBox = (props) => (
   <TouchableWithoutFeedback onPress={props.onPress}>
@@ -28,7 +29,7 @@ const styles = StyleSheet.create({
     height: 40,
     width: 80,
     borderWidth: 1,
-    borderColor: '#000',
+    borderColor: COLORS.textColor,
     borderRadius: 8,
     flexDirection: 'row',
     justifyContent: 'space-between',