refactor: string colors to themes (#327)

* refactor: theme variables

* refactor: Wallet Connect theme colors

* refactor: text color, low transparency

* fix: color adjustments

* refactor: textColorShadowLighter

* refactor: color adjustments

* style: lint fixes

* refactor: inlines border width

* fix: remains from rebase

* fix: unused variables

* refactor: adds color granularity to theme

* refactor: adds color granularity to borders

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/HathorHeader.js

@@ -14,8 +14,6 @@ import SimpleButton from './SimpleButton';
 import Logo from './Logo';
 import chevronLeft from '../assets/icons/chevron-left.png';
 import closeIcon from '../assets/icons/icCloseActive.png';
-import baseStyle from '../styles/init';
-import { HEADER_HEIGHT } from '../constants';
 import { COLORS, STYLE } from '../styles/themes';
 
 const HathorHeader = (props) => {
@@ -61,7 +59,7 @@ const HathorHeader = (props) => {
 
   let extraStyle = {};
   if (props.withBorder) {
-    extraStyle = { borderBottomWidth: STYLE.borderWidth };
+    extraStyle = { borderBottomWidth: 1 };
   }
 
   return (

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 } 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.borderColorMid,
+      borderWidth: 1,
     }, 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

@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 
 import checkLogo from '../assets/images/icCheckBig.png';
+import { COLORS } from '../styles/themes';
 
 class ModalConfirmation extends React.Component {
   /**
@@ -49,7 +50,7 @@ class ModalConfirmation extends React.Component {
         position: 'absolute',
         top: 0,
         left: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        backgroundColor: COLORS.textColorShadowDark,
         justifyContent: 'flex-end',
         alignItems: 'center',
         zIndex: 3,
@@ -59,7 +60,7 @@ class ModalConfirmation extends React.Component {
       innerModal: {
         marginBottom: 32,
         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)',
+    backgroundColor: COLORS.textColorShadowOpacity005,
   },
   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/NumPad.js

@@ -12,6 +12,7 @@ import {
 import PropTypes from 'prop-types';
 
 import backspace from '../assets/icons/backspace.png';
+import { COLORS } from '../styles/themes';
 
 const keysLayout = [
   [[1, ''], [2, 'ABC'], [3, 'DEF']],
@@ -77,7 +78,7 @@ NumPad.propTypes = {
 
 const NumPadButton = (props) => {
   // left bottom button is invisible, so should not have any background when clicked
-  const underlayColor = (props.number !== null ? 'rgba(0, 0, 0, 0.1)' : 'transparent');
+  const underlayColor = (props.number !== null ? COLORS.textColorShadowLighter : 'transparent');
   return (
     <TouchableHighlight
       style={style.buttonStyle}

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/QRCodeReader.js

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { AppState, StyleSheet, Text, View } from 'react-native';
 import { Camera, CameraType } from 'react-native-camera-kit';
 import { useEffect, useState } from 'react';
+import { COLORS } from '../styles/themes';
 
 const APP_ACTIVE_STATE = 'active';
 
@@ -111,7 +112,7 @@ export default ({
         borderLeftWidth: borderWidth,
         borderRightWidth: borderWidth,
         backgroundColor: 'transparent',
-        borderColor: 'rgba(0, 0, 0, 0.7)',
+        borderColor: COLORS.textColorShadowOpacity07,
       },
     });
     return (
@@ -134,7 +135,7 @@ export default ({
         fontSize: 16,
         fontWeight: 'bold',
         lineHeight: 19,
-        color: 'white',
+        color: COLORS.backgroundColor,
       }}
       >
         {bottomText}