From 5c22e248a62b62d6d9d162ae8bbfc906e231c9da Mon Sep 17 00:00:00 2001 From: tuliomir Date: Wed, 13 Sep 2023 09:37:46 -0300 Subject: [PATCH] refactor: string colors to themes --- src/components/CopyClipboard.js | 4 +-- src/components/GlobalErrorModal.js | 3 +- src/components/HathorList.js | 11 +++--- src/components/HathorModal.js | 3 +- src/components/HathorTextInput.js | 7 +++- src/components/InfoBox.js | 6 ++-- src/components/InputLabel.js | 3 +- src/components/ModalConfirmation.js | 3 +- src/components/NewHathorButton.js | 17 +++++----- src/components/OfflineBar.js | 6 ++-- src/components/PinInput.js | 6 ++-- src/components/PublicExplorerListButton.js | 3 +- src/components/PushTxDetailsModal.js | 5 +-- src/components/ReceiveMyAddress.js | 11 +++--- src/components/SlideIndicatorBar.js | 3 +- src/components/TokenBox.js | 3 +- src/components/TokenDetails.js | 11 +++--- src/components/TokenSelect.js | 22 ++++++------ src/components/TxDetailsModal.js | 5 +-- src/constants.js | 25 -------------- src/screens/BackupWords.js | 8 ++--- src/screens/ChangePin.js | 25 +++++++------- src/screens/ChoosePinScreen.js | 15 +++++---- src/screens/CreateTokenAmount.js | 6 +++- src/screens/CreateTokenDetail.js | 4 +-- src/screens/InitWallet.js | 13 ++++---- src/screens/LoadHistoryScreen.js | 3 +- src/screens/MainScreen.js | 39 +++++++++++----------- src/screens/PaymentRequestDetail.js | 3 +- src/screens/PinScreen.js | 13 ++++---- src/screens/PushNotification.js | 7 ++-- src/screens/Receive.js | 7 ++-- src/screens/RegisterToken.js | 4 +-- src/screens/Security.js | 6 ++-- src/screens/SendAmountInput.js | 5 +-- src/screens/SendScanQRCode.js | 4 +-- src/screens/TokenDetail.js | 5 +-- src/screens/UnregisterToken.js | 8 ++--- src/utils.js | 7 ++-- 39 files changed, 173 insertions(+), 166 deletions(-) diff --git a/src/components/CopyClipboard.js b/src/components/CopyClipboard.js index 3ed55e800..3ef3b1cae 100644 --- a/src/components/CopyClipboard.js +++ b/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, }, }); diff --git a/src/components/GlobalErrorModal.js b/src/components/GlobalErrorModal.js index 9b8a4e1ba..a47f1591d 100644 --- a/src/components/GlobalErrorModal.js +++ b/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, diff --git a/src/components/HathorList.js b/src/components/HathorList.js index faf3f2e14..e5e3f00af 100644 --- a/src/components/HathorList.js +++ b/src/components/HathorList.js @@ -15,6 +15,7 @@ import { } from 'react-native'; import chevronRight from '../assets/icons/chevron-right.png'; +import { COLORS } from '../styles/themes'; const defaultRadius = 16; @@ -22,12 +23,12 @@ 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, }, })); diff --git a/src/components/HathorModal.js b/src/components/HathorModal.js index d0d8dc90a..9ee9610e2 100644 --- a/src/components/HathorModal.js +++ b/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) => ( ( diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index fab6a20e2..2e68c724a 100644 --- a/src/components/InfoBox.js +++ b/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, }, }); diff --git a/src/components/InputLabel.js b/src/components/InputLabel.js index ed1a31e02..5491753e4 100644 --- a/src/components/InputLabel.js +++ b/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) => ( { 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, }, }); diff --git a/src/components/OfflineBar.js b/src/components/OfflineBar.js index 2110464a7..e67db614e 100644 --- a/src/components/OfflineBar.js +++ b/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, }, }); diff --git a/src/components/PinInput.js b/src/components/PinInput.js index 1df50b03b..4358a4dfc 100644 --- a/src/components/PinInput.js +++ b/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, }, diff --git a/src/components/PublicExplorerListButton.js b/src/components/PublicExplorerListButton.js index 31b4cab73..1c8070adb 100644 --- a/src/components/PublicExplorerListButton.js +++ b/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 ( - { Linking.openURL(explorerLink); }} titleStyle={{ color: 'rgba(0, 0, 0, 0.5)' }} isLast /> + { Linking.openURL(explorerLink); }} titleStyle={{ color: COLORS.textColorShadow }} isLast /> ); } diff --git a/src/components/PushTxDetailsModal.js b/src/components/PushTxDetailsModal.js index c3081d30e..6a8eee367 100644 --- a/src/components/PushTxDetailsModal.js +++ b/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, }, }); diff --git a/src/components/ReceiveMyAddress.js b/src/components/ReceiveMyAddress.js index 1ad1743a0..7ef26b500 100644 --- a/src/components/ReceiveMyAddress.js +++ b/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() { @@ -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, }, }); diff --git a/src/components/SlideIndicatorBar.js b/src/components/SlideIndicatorBar.js index 5f235f183..ff7004914 100644 --- a/src/components/SlideIndicatorBar.js +++ b/src/components/SlideIndicatorBar.js @@ -10,6 +10,7 @@ import { StyleSheet, View, } from 'react-native'; +import { COLORS } from '../styles/themes'; export default class SlideIndicatorBar extends Component { style = StyleSheet.create({ @@ -17,7 +18,7 @@ export default class SlideIndicatorBar extends Component { height: 4, width: 48, position: 'absolute', - backgroundColor: 'rgba(0, 0, 0, 0.3)', + backgroundColor: COLORS.textColorShadowLight, borderRadius: 2, top: 8, alignSelf: 'center', diff --git a/src/components/TokenBox.js b/src/components/TokenBox.js index 773edc056..17d3e637c 100644 --- a/src/components/TokenBox.js +++ b/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) => ( @@ -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', diff --git a/src/components/TokenDetails.js b/src/components/TokenDetails.js index 72308bcd7..f0da65ef3 100644 --- a/src/components/TokenDetails.js +++ b/src/components/TokenDetails.js @@ -18,6 +18,7 @@ import hathorLib from '@hathor/wallet-lib'; import { getTokenLabel } from '../utils'; import SimpleButton from './SimpleButton'; import CopyClipboard from './CopyClipboard'; +import { COLORS } from '../styles/themes'; const TokenDetails = (props) => { const tokenLabel = getTokenLabel(props.token); @@ -52,14 +53,14 @@ const TokenDetails = (props) => { @@ -81,13 +82,13 @@ TokenDetails.propTypes = { const styles = StyleSheet.create({ contentWrapper: { - backgroundColor: 'white', + backgroundColor: COLORS.backgroundColor, alignItems: 'center', justifyContent: 'flex-start', borderRadius: 16, shadowOffset: { height: 2, width: 0 }, shadowRadius: 4, - shadowColor: 'black', + shadowColor: COLORS.textColor, shadowOpacity: 0.08, }, tokenWrapper: { @@ -105,7 +106,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', borderBottomWidth: 1, - borderColor: '#eee', + borderColor: COLORS.borderColor, }, buttonWrapper: { borderRadius: 8, diff --git a/src/components/TokenSelect.js b/src/components/TokenSelect.js index 8cce093d9..8596af203 100644 --- a/src/components/TokenSelect.js +++ b/src/components/TokenSelect.js @@ -15,9 +15,9 @@ import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'; import chevronRight from '../assets/icons/chevron-right.png'; import Spinner from './Spinner'; -import { LIGHT_BG_COLOR, PRIMARY_COLOR } from '../constants'; -import { getLightBackground, renderValue, isTokenNFT } from '../utils'; +import { renderValue, isTokenNFT } from '../utils'; import { TOKEN_DOWNLOAD_STATUS } from '../sagas/tokens'; +import { COLORS } from '../styles/themes'; /** * @typedef TokenBalance @@ -51,7 +51,7 @@ const TokenSelect = (props) => { { props.onItemPress(item); }} - underlayColor={getLightBackground(0.3)} + underlayColor={COLORS.primaryOpacity30} > @@ -69,7 +69,7 @@ const TokenSelect = (props) => { {tokenState === TOKEN_DOWNLOAD_STATUS.FAILED && ( )} @@ -111,19 +111,19 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - backgroundColor: LIGHT_BG_COLOR, + backgroundColor: COLORS.lowContrastDetail, // Defines an outer area on the main list content }, listWrapper: { alignSelf: 'stretch', flex: 1, marginTop: 16, - backgroundColor: 'white', + backgroundColor: COLORS.backgroundColor, marginHorizontal: 16, borderTopLeftRadius: 16, borderTopRightRadius: 16, shadowOffset: { height: 2, width: 0 }, shadowRadius: 4, - shadowColor: 'black', + shadowColor: COLORS.textColor, shadowOpacity: 0.08, }, itemWrapper: { @@ -133,7 +133,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: 1, - borderColor: '#eee', + borderColor: COLORS.borderColor, }, firstItemWrapper: { borderTopLeftRadius: 16, @@ -146,7 +146,7 @@ const styles = StyleSheet.create({ }, symbolWrapper: { padding: 4, - backgroundColor: LIGHT_BG_COLOR, + backgroundColor: COLORS.lowContrastDetail, alignItems: 'center', justifyContent: 'center', marginRight: 8, @@ -165,10 +165,10 @@ const styles = StyleSheet.create({ fontWeight: 'bold', }, symbolTextSelected: { - color: 'white', + color: COLORS.backgroundColor, }, symbolWrapperSelected: { - backgroundColor: PRIMARY_COLOR, + backgroundColor: COLORS.primary, }, }); diff --git a/src/components/TxDetailsModal.js b/src/components/TxDetailsModal.js index a4055997b..52ca9b16d 100644 --- a/src/components/TxDetailsModal.js +++ b/src/components/TxDetailsModal.js @@ -15,6 +15,7 @@ import { ListItem } from './HathorList'; import SlideIndicatorBar from './SlideIndicatorBar'; import CopyClipboard from './CopyClipboard'; import { PublicExplorerListButton } from './PublicExplorerListButton'; +import { COLORS } from '../styles/themes'; class TxDetailsModal extends Component { style = StyleSheet.create({ @@ -22,7 +23,7 @@ class TxDetailsModal extends Component { justifyContent: 'flex-end', }, inner: { - backgroundColor: '#fff', + backgroundColor: COLORS.backgroundColor, borderRadius: 8, }, }); @@ -85,7 +86,7 @@ class BalanceView extends Component { paddingTop: 8, fontSize: 12, fontWeight: 'bold', - color: 'rgba(0, 0, 0, 0.5)', + color: COLORS.textColorShadow, }, }); diff --git a/src/constants.js b/src/constants.js index eed981ed1..cb79a2632 100644 --- a/src/constants.js +++ b/src/constants.js @@ -71,25 +71,6 @@ export const PRIVACY_POLICY_URL = 'https://hathor.network/privacy-policy/'; */ export { IS_MULTI_TOKEN, DEFAULT_TOKEN, PRIMARY_COLOR, SENTRY_DSN }; -/** - * Background color for iOS devices - */ -export const IOS_BG_COLOR = '#fff'; -/** - * Background color for Android devices - */ -export const ANDROID_BG_COLOR = '#fafafa'; - -/** - * A light background color used to create a discreet color change from a white background - */ -export const LIGHT_BG_COLOR = '#f7f7f7'; - -/** - * A background color that indicates an error - */ -export const ERROR_BG_COLOR = '#DE3535'; - /** * Minimum job estimation to show to the user in seconds when mining a tx */ @@ -100,12 +81,6 @@ export const MIN_JOB_ESTIMATION = 1; */ export const PIN_SIZE = 6; -/** - * Default Hathor Header height, used for recalculating layout offsets. - * @type {number} - */ -export const HEADER_HEIGHT = 56; - /** * Unleash constants */ diff --git a/src/screens/BackupWords.js b/src/screens/BackupWords.js index e14ca12c9..cf7c0279f 100644 --- a/src/screens/BackupWords.js +++ b/src/screens/BackupWords.js @@ -22,8 +22,8 @@ import errorIcon from '../assets/images/icErrorBig.png'; import baseStyle from '../styles/init'; -import { PRIMARY_COLOR } from '../constants'; import { Strong } from '../utils'; +import { COLORS } from '../styles/themes'; class BackupWords extends React.Component { /** @@ -48,13 +48,13 @@ class BackupWords extends React.Component { marginRight: 8, }, past: { - backgroundColor: '#000', + backgroundColor: COLORS.backgroundColor, }, current: { - backgroundColor: PRIMARY_COLOR, + backgroundColor: COLORS.primary, }, future: { - backgroundColor: '#000', + backgroundColor: COLORS.textColor, opacity: 0.3, }, lastView: { diff --git a/src/screens/ChangePin.js b/src/screens/ChangePin.js index f5af9884a..5a28192f5 100644 --- a/src/screens/ChangePin.js +++ b/src/screens/ChangePin.js @@ -20,10 +20,9 @@ import FeedbackModal from '../components/FeedbackModal'; import TextFmt from '../components/TextFmt'; import baseStyle from '../styles/init'; import checkIcon from '../assets/images/icCheckBig.png'; -import { ERROR_BG_COLOR, PIN_SIZE } from '../constants'; -import { - changePin, -} from '../utils'; +import { PIN_SIZE } from '../constants'; +import { changePin } from '../utils'; +import { COLORS } from '../styles/themes'; const mapStateToProps = (state) => ({ wallet: state.wallet, @@ -61,8 +60,8 @@ class ChangePin extends React.Component { pin1: '', pin2: '', pin3: '', - pin1Color: 'black', - pin3Color: 'black', + pin1Color: COLORS.textColor, + pin3Color: COLORS.textColor, done: false, error: '', stepIndex: 0, @@ -88,8 +87,8 @@ class ChangePin extends React.Component { pin1: '', pin2: '', pin3: '', - pin1Color: 'black', - pin3Color: 'black', + pin1Color: COLORS.textColor, + pin3Color: COLORS.textColor, error: null, stepIndex: 0, }); @@ -100,7 +99,7 @@ class ChangePin extends React.Component { return; } - this.setState({ pin1: text, pin1Color: 'black', error: null }); + this.setState({ pin1: text, pin1Color: COLORS.textColor, error: null }); if (text.length === PIN_SIZE) { setTimeout(() => this.validatePin1(text), 300); } @@ -136,7 +135,7 @@ class ChangePin extends React.Component { return; } - this.setState({ pin3: text, pin3Color: 'black', error: null }); + this.setState({ pin3: text, pin3Color: COLORS.textColor, error: null }); if (text.length === PIN_SIZE) { setTimeout(() => this.validatePin3(text), 300); } @@ -144,7 +143,7 @@ class ChangePin extends React.Component { validatePin3 = (text) => { if (this.state.pin2 === text) { - this.setState({ pin3Color: '#0DA0A0' }); + this.setState({ pin3Color: COLORS.positiveBalanceColor }); this.executeChangePin(); } else { this.removeOneChar('pin3', 'pin3Color', t`PIN codes don't match.`); @@ -160,7 +159,7 @@ class ChangePin extends React.Component { } else { const newState = {}; newState[stateKey] = pin; - newState[stateColorKey] = ERROR_BG_COLOR; + newState[stateColorKey] = COLORS.errorBgColor; this.setState(newState); setTimeout(() => this.removeOneChar(stateKey, stateColorKey, error), 25); } @@ -200,7 +199,7 @@ class ChangePin extends React.Component { diff --git a/src/screens/ChoosePinScreen.js b/src/screens/ChoosePinScreen.js index 2c4e9ab00..4917c1157 100644 --- a/src/screens/ChoosePinScreen.js +++ b/src/screens/ChoosePinScreen.js @@ -18,7 +18,8 @@ import NewHathorButton from '../components/NewHathorButton'; import HathorHeader from '../components/HathorHeader'; import PinInput from '../components/PinInput'; import { startWalletRequested, unlockScreen } from '../actions'; -import { ERROR_BG_COLOR, PIN_SIZE } from '../constants'; +import { PIN_SIZE } from '../constants'; +import { COLORS } from '../styles/themes'; import baseStyle from '../styles/init'; import { STORE } from '../store'; @@ -62,7 +63,7 @@ class ChoosePinScreen extends React.Component { this.state = { pin1: '', pin2: '', - pin2Color: 'black', + pin2Color: COLORS.textColor, error: null, done: false, stepIndex: 0, @@ -92,7 +93,7 @@ class ChoosePinScreen extends React.Component { this.setState({ pin1: '', pin2: '', - pin2Color: 'black', + pin2Color: COLORS.textColor, error: null, stepIndex: 0, }); @@ -120,7 +121,7 @@ class ChoosePinScreen extends React.Component { return; } - this.setState({ pin2: text, pin2Color: 'black', error: null }); + this.setState({ pin2: text, pin2Color: COLORS.textColor, error: null }); if (text.length === PIN_SIZE) { setTimeout(() => this.validatePin(text), 300); } @@ -128,7 +129,7 @@ class ChoosePinScreen extends React.Component { validatePin = (text) => { if (this.state.pin1 === text) { - this.setState({ pin2Color: '#0DA0A0', done: true }); + this.setState({ pin2Color: COLORS.positiveBalanceColor, done: true }); } else { this.removeOneChar(); } @@ -140,7 +141,7 @@ class ChoosePinScreen extends React.Component { @@ -164,7 +165,7 @@ class ChoosePinScreen extends React.Component { if (pin2.length === 0) { this.setState({ pin2: '', error: t`PIN codes don't match. Try again.` }); } else { - this.setState({ pin2, pin2Color: ERROR_BG_COLOR }); + this.setState({ pin2, pin2Color: COLORS.errorBgColor }); setTimeout(() => this.removeOneChar(), 25); } } diff --git a/src/screens/CreateTokenAmount.js b/src/screens/CreateTokenAmount.js index 5c021cdc2..a3aabd109 100644 --- a/src/screens/CreateTokenAmount.js +++ b/src/screens/CreateTokenAmount.js @@ -19,6 +19,7 @@ import InputLabel from '../components/InputLabel'; import NewHathorButton from '../components/NewHathorButton'; import OfflineBar from '../components/OfflineBar'; import { getIntegerAmount, getKeyboardAvoidingViewTopDistance, Strong } from '../utils'; +import { COLORS } from '../styles/themes'; /** * balance {Object} object with token balance {'available', 'locked'} @@ -102,7 +103,10 @@ class CreateTokenAmount extends React.Component { } render() { - const amountStyle = (this.state.deposit > this.props.balance.available ? { color: 'red' } : {}); + const amountStyle = (this.state.deposit > this.props.balance.available + ? { color: COLORS.errorTextColor } + : {} + ); const amountAvailableText = ( {hathorLib.numberUtils.prettyValue(this.props.balance.available)} HTR diff --git a/src/screens/CreateTokenDetail.js b/src/screens/CreateTokenDetail.js index cf24e8849..b171f220a 100644 --- a/src/screens/CreateTokenDetail.js +++ b/src/screens/CreateTokenDetail.js @@ -14,7 +14,7 @@ import HathorHeader from '../components/HathorHeader'; import TokenDetails from '../components/TokenDetails'; import SimpleButton from '../components/SimpleButton'; import closeIcon from '../assets/icons/icCloseActive.png'; -import { LIGHT_BG_COLOR } from '../constants'; +import { COLORS } from '../styles/themes'; /** * selectedToken {Object} Select token config {name, symbol, uid} @@ -37,7 +37,7 @@ class CreateTokenDetail extends React.Component { ); return ( - + @@ -156,7 +157,7 @@ class NewWordsScreen extends React.Component { fontSize: 14, }, itemText: { - color: '#000', + color: COLORS.textColor, fontSize: 18, }, }) }); @@ -242,14 +243,14 @@ class LoadWordsScreen extends React.Component { }, label: { fontSize: 12, - color: 'rgba(0, 0, 0, 0.5)', + color: COLORS.textColorShadow, marginTop: 8, marginBottom: 8, }, input: { fontSize: 16, lineHeight: 24, - borderColor: '#EEEEEE', + borderColor: COLORS.borderColor, borderBottomWidth: 1, }, }) }); @@ -331,7 +332,7 @@ class LoadWordsScreen extends React.Component { / {this.numberOfWords} - {this.state.errorMessage} + {this.state.errorMessage} ( - + {t`Loading your transactions`} diff --git a/src/screens/MainScreen.js b/src/screens/MainScreen.js index ab944d184..ac3f7f6a1 100644 --- a/src/screens/MainScreen.js +++ b/src/screens/MainScreen.js @@ -28,14 +28,15 @@ import SimpleButton from '../components/SimpleButton'; import TxDetailsModal from '../components/TxDetailsModal'; import OfflineBar from '../components/OfflineBar'; import { HathorList } from '../components/HathorList'; -import { Strong, str2jsx, getLightBackground, renderValue, isTokenNFT } from '../utils'; +import { Strong, str2jsx, renderValue, isTokenNFT } from '../utils'; import chevronUp from '../assets/icons/chevron-up.png'; import chevronDown from '../assets/icons/chevron-down.png'; import infoIcon from '../assets/icons/info-circle.png'; -import { IS_MULTI_TOKEN, LIGHT_BG_COLOR, PRIMARY_COLOR } from '../constants'; +import { IS_MULTI_TOKEN } from '../constants'; import { fetchMoreHistory, updateTokenHistory } from '../actions'; import Spinner from '../components/Spinner'; import { TOKEN_DOWNLOAD_STATUS } from '../sagas/tokens'; +import { COLORS } from '../styles/themes'; /** * txList {Array} array with transactions of the selected token @@ -130,7 +131,7 @@ class MainScreen extends React.Component { this.props.navigation.navigate('Receive')} - style={{ color: PRIMARY_COLOR, fontWeight: 'bold' }} + style={{ color: COLORS.primary, fontWeight: 'bold' }} >{x} ) } )} @@ -160,7 +161,7 @@ class MainScreen extends React.Component { this.retryTxHistory()} - style={{ color: PRIMARY_COLOR, fontWeight: 'bold' }} + style={{ color: COLORS.primary, fontWeight: 'bold' }} > {x} ) } @@ -212,7 +213,7 @@ class MainScreen extends React.Component { return ( {this.state.modal} @@ -308,17 +309,17 @@ class TxListItem extends React.Component { marginLeft: 16, marginRight: 16, marginTop: 0, - borderColor: '#eee', + borderColor: COLORS.borderColor, borderBottomWidth: 1, shadowOffset: { height: 2, width: 0 }, shadowRadius: 4, - shadowColor: 'black', + shadowColor: COLORS.textColor, shadowOpacity: 0.08, }, view: { flexDirection: 'row', alignItems: 'center', - backgroundColor: 'white', + backgroundColor: COLORS.backgroundColor, height: 80, }, firstItemBorder: { @@ -353,7 +354,7 @@ class TxListItem extends React.Component { timestamp: { fontSize: 12, lineHeight: 20, - color: 'rgba(0, 0, 0, 0.5)', + color: COLORS.textColorShadow, }, }); @@ -361,15 +362,15 @@ class TxListItem extends React.Component { ...StyleSheet.create({ description: { ...this.style.description, - color: 'rgba(0, 0, 0, 0.3)', + color: COLORS.textColorShadowLight, }, timestamp: { ...this.style.timestamp, - color: 'rgba(0, 0, 0, 0.3)', + color: COLORS.textColorShadowLight, }, balance: { ...this.style.balance, - color: 'rgba(0, 0, 0, 0.3)', + color: COLORS.textColorShadowLight, textDecorationLine: 'line-through', }, }) }); @@ -378,7 +379,7 @@ class TxListItem extends React.Component { ...StyleSheet.create({ balance: { ...this.style.balance, - color: '#0DA0A0', + color: COLORS.positiveBalanceColor, fontWeight: 'bold', }, }) }); @@ -406,17 +407,17 @@ class TxListItem extends React.Component { const style = [this.style.icon]; if (item.balance > 0) { name = 'icReceive'; - color = '#0DA0A0'; + color = COLORS.positiveBalanceColor; } else if (item.balance < 0) { name = 'icSend'; - color = 'black'; + color = COLORS.textColor; } else { throw new Error('should not happen'); } if (item.isVoided) { style.push(this.style.iconDisabled); - color = 'rgba(0, 0, 0, 0.3)'; + color = COLORS.textColorShadowLight; } return ; @@ -518,20 +519,20 @@ class BalanceView extends React.Component { paddingTop: 8, fontSize: 12, fontWeight: 'bold', - color: 'rgba(0, 0, 0, 0.5)', + color: COLORS.textColorShadow, }, expandButton: { marginTop: 24, marginBottom: 24, }, networkView: { - backgroundColor: getLightBackground(0.1), + backgroundColor: COLORS.primaryOpacity10, padding: 8, marginTop: 32, borderRadius: 8, }, networkText: { - color: PRIMARY_COLOR, + color: COLORS.primary, fontSize: 16, fontWeight: 'bold', }, diff --git a/src/screens/PaymentRequestDetail.js b/src/screens/PaymentRequestDetail.js index 0c160a94f..2b83c8a46 100644 --- a/src/screens/PaymentRequestDetail.js +++ b/src/screens/PaymentRequestDetail.js @@ -22,6 +22,7 @@ import TextFmt from '../components/TextFmt'; import { clearInvoice } from '../actions'; import { getTokenLabel, renderValue, isTokenNFT } from '../utils'; import NavigationService from '../NavigationService'; +import { COLORS } from '../styles/themes'; /** * address {string} Invoice destination address @@ -158,7 +159,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', paddingHorizontal: 16, borderBottomWidth: 1, - borderColor: '#eee', + borderColor: COLORS.borderColor, height: 64, width: '100%', }, diff --git a/src/screens/PinScreen.js b/src/screens/PinScreen.js index fc844ac75..b4aed82b3 100644 --- a/src/screens/PinScreen.js +++ b/src/screens/PinScreen.js @@ -25,7 +25,8 @@ import { startWalletRequested, resetOnLockScreen, } from '../actions'; -import { ERROR_BG_COLOR, PIN_SIZE } from '../constants'; +import { PIN_SIZE } from '../constants'; +import { COLORS } from '../styles/themes'; import { STORE } from '../store'; import baseStyle from '../styles/init'; @@ -58,7 +59,7 @@ class PinScreen extends React.Component { */ this.state = { pin: '', - pinColor: 'black', + pinColor: COLORS.textColor, error: null, waitingForBiometry: false, }; @@ -91,7 +92,7 @@ class PinScreen extends React.Component { } this.focusEvent = this.props.navigation.addListener('focus', () => { - this.setState({ pin: '', pinColor: 'black', error: null }); + this.setState({ pin: '', pinColor: COLORS.textColor, error: null }); }); } @@ -169,7 +170,7 @@ class PinScreen extends React.Component { if (text.length === PIN_SIZE) { setTimeout(() => this.validatePin(text), 300); } - this.setState({ pin: text, pinColor: 'black', error: null }); + this.setState({ pin: text, pinColor: COLORS.textColor, error: null }); }; validatePin = async (pin) => { @@ -253,7 +254,7 @@ class PinScreen extends React.Component { if (pin.length === 0) { this.setState({ pin: '', error: t`Incorrect PIN Code. Try again.` }); } else { - this.setState({ pin, pinColor: ERROR_BG_COLOR }); + this.setState({ pin, pinColor: COLORS.errorBgColor }); setTimeout(() => this.removeOneChar(), 25); } }; @@ -275,7 +276,7 @@ class PinScreen extends React.Component { title={title} textStyle={{ textTransform: 'uppercase', - color: 'rgba(0, 0, 0, 0.5)', + color: COLORS.textColorShadow, letterSpacing: 1, padding: 4, }} diff --git a/src/screens/PushNotification.js b/src/screens/PushNotification.js index 66d73e707..36d664312 100644 --- a/src/screens/PushNotification.js +++ b/src/screens/PushNotification.js @@ -13,7 +13,8 @@ import FeedbackModal from '../components/FeedbackModal'; import errorIcon from '../assets/images/icErrorBig.png'; import { pushApiReady, pushRegistrationRequested } from '../actions'; import Spinner from '../components/Spinner'; -import { LIGHT_BG_COLOR, PUSH_API_STATUS } from '../constants'; +import { PUSH_API_STATUS } from '../constants'; +import { COLORS } from '../styles/themes'; /** * Check if the api status is loading and if the pin screen is not showing. @@ -39,7 +40,7 @@ const hasApiStatusFailed = (pushNotification) => { const styles = StyleSheet.create({ view: { flex: 1, - backgroundColor: LIGHT_BG_COLOR, + backgroundColor: COLORS.lowContrastDetail, }, feedbackModalIcon: { height: 105, @@ -50,7 +51,7 @@ const styles = StyleSheet.create({ fontWeight: 'bold', }, switchEnabled: { - color: 'black', + color: COLORS.textColor, }, }); diff --git a/src/screens/Receive.js b/src/screens/Receive.js index e63a991a7..eb3110509 100644 --- a/src/screens/Receive.js +++ b/src/screens/Receive.js @@ -14,6 +14,7 @@ import HathorHeader from '../components/HathorHeader'; import ReceiveMyAddress from '../components/ReceiveMyAddress'; import NewPaymentRequest from '../components/NewPaymentRequest'; import OfflineBar from '../components/OfflineBar'; +import { COLORS } from '../styles/themes'; class ReceiveScreen extends React.Component { constructor(props) { @@ -92,9 +93,9 @@ class ReceiveScreen extends React.Component { const renderTabBar = (props) => ( ); diff --git a/src/screens/RegisterToken.js b/src/screens/RegisterToken.js index c77565453..79f33a3c5 100644 --- a/src/screens/RegisterToken.js +++ b/src/screens/RegisterToken.js @@ -12,7 +12,7 @@ import { t } from 'ttag'; import HathorHeader from '../components/HathorHeader'; import QRCodeReader from '../components/QRCodeReader'; import SimpleButton from '../components/SimpleButton'; -import { LIGHT_BG_COLOR } from '../constants'; +import { COLORS } from '../styles/themes'; class RegisterToken extends React.Component { onSuccess = (e) => { @@ -31,7 +31,7 @@ class RegisterToken extends React.Component { return ( ({ lockScreen: () => dispatch(lockScreen()), @@ -72,7 +72,7 @@ export class Security extends React.Component { const switchDisabled = !this.supportedBiometry; const biometryText = (switchDisabled ? t`No biometry supported` : t`Use ${this.supportedBiometry}`); return ( - + this.props.navigation.goBack()} @@ -82,7 +82,7 @@ export class Security extends React.Component { title={biometryText} // if no biometry is supported, use default ListItem color (grey), // so it looks disabled. Else, color is black, as other items - titleStyle={!switchDisabled ? { color: 'black' } : null} + titleStyle={!switchDisabled ? { color: COLORS.textColor } : null} text={( ({ wallet: state.wallet, @@ -74,7 +74,7 @@ class SendScanQRCode extends React.Component { ); return ( - + } diff --git a/src/screens/TokenDetail.js b/src/screens/TokenDetail.js index aa3504827..ef2e26d27 100644 --- a/src/screens/TokenDetail.js +++ b/src/screens/TokenDetail.js @@ -11,7 +11,8 @@ import { connect } from 'react-redux'; import { t } from 'ttag'; import { get } from 'lodash'; -import { IS_MULTI_TOKEN, LIGHT_BG_COLOR } from '../constants'; +import { IS_MULTI_TOKEN } from '../constants'; +import { COLORS } from '../styles/themes'; import { isTokenNFT } from '../utils'; import HathorHeader from '../components/HathorHeader'; import SimpleButton from '../components/SimpleButton'; @@ -42,7 +43,7 @@ class TokenDetail extends React.Component { const isNFT = isTokenNFT(get(this.props, 'selectedToken.uid'), this.props.tokenMetadata); return ( - + this.props.navigation.goBack()} diff --git a/src/screens/UnregisterToken.js b/src/screens/UnregisterToken.js index 20e41c6d7..18d91a2d5 100644 --- a/src/screens/UnregisterToken.js +++ b/src/screens/UnregisterToken.js @@ -22,7 +22,7 @@ import NewHathorButton from '../components/NewHathorButton'; import TextFmt from '../components/TextFmt'; import baseStyle from '../styles/init'; import { getTokenLabel } from '../utils'; -import { ERROR_BG_COLOR, PRIMARY_COLOR } from '../constants'; +import { COLORS } from '../styles/themes'; import NavigationService from '../NavigationService'; /** @@ -49,7 +49,7 @@ class UnregisterToken extends React.Component { textError: { marginTop: 32, marginBottom: 32, - color: ERROR_BG_COLOR, + color: COLORS.errorBgColor, }, }) }); @@ -125,7 +125,7 @@ class UnregisterToken extends React.Component { @@ -133,7 +133,7 @@ class UnregisterToken extends React.Component { {props.children}; @@ -245,7 +246,7 @@ function extractAddress(plainText) { export const getKeyboardAvoidingViewTopDistance = () => { const statusBarHeight = getStatusBarHeight(); const calculatedHeight = (Platform.OS === 'ios') - ? statusBarHeight + HEADER_HEIGHT + ? statusBarHeight + STYLE.headerHeight : statusBarHeight; return calculatedHeight; @@ -258,7 +259,7 @@ export const getKeyboardAvoidingViewTopDistance = () => { */ export const getLightBackground = (alpha) => { const hex = `0${Math.round(255 * alpha).toString(16).toUpperCase()}`.substr(-2); - return `${PRIMARY_COLOR}${hex}`; + return `${COLORS.primary}${hex}`; }; /**