From bf4c37ac4a6ee0c519ace47687ca630637b63d45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Wed, 28 Feb 2024 02:49:45 -0300 Subject: [PATCH] buttons --- src/components/accounts/AccountBox.tsx | 2 +- src/components/button/index.tsx | 4 +-- src/components/loading/LoadingScreen.tsx | 4 +-- src/components/mnemonic/index.tsx | 6 ++--- src/components/modal/index.tsx | 10 +++---- src/screens/contacts/ContactDetails.tsx | 10 +++---- src/screens/contacts/ContactFormScreen.tsx | 7 ++--- src/screens/contacts/index.tsx | 8 +++--- src/screens/createKeys/CreateKeysScreen.tsx | 4 +-- .../createKeys/SecurityInformation.tsx | 4 +-- .../import/ImportMasterKeyScreen.tsx | 4 +-- .../new/ConfirmNewMasterKeyScreen.tsx | 4 +-- .../createKeys/new/NewMasterKeyScreen.tsx | 6 ++--- src/screens/createKeys/retryLogin/index.tsx | 4 +-- src/screens/home/PortfolioComponent.tsx | 2 +- src/screens/home/index.tsx | 2 +- src/screens/home/tokenColor.ts | 2 +- src/screens/pinScreen/index.tsx | 8 +++--- src/screens/profile/ProfileCreateScreen.tsx | 4 +-- src/screens/rnsManager/AliasBoughtScreen.tsx | 4 +-- .../rnsManager/PurchaseDomainScreen.tsx | 8 +++--- src/screens/rnsManager/SearchDomainScreen.tsx | 26 +++---------------- src/screens/send/SendScreen.tsx | 4 +-- src/screens/send/TransactionForm.tsx | 4 +-- src/screens/settings/RelayDeployScreen.tsx | 15 ++++++----- src/screens/settings/SettingsScreen.tsx | 16 ++++++------ .../TransactionSummaryComponent.tsx | 10 +++---- src/screens/walletConnect/index.tsx | 4 +-- src/shared/constants/index.ts | 12 ++++++--- .../ReviewTransactionContainer.tsx | 4 +-- .../SignRequestHandlerContainer.tsx | 8 +++--- 31 files changed, 99 insertions(+), 111 deletions(-) diff --git a/src/components/accounts/AccountBox.tsx b/src/components/accounts/AccountBox.tsx index 80eb55804..5e5f6669b 100644 --- a/src/components/accounts/AccountBox.tsx +++ b/src/components/accounts/AccountBox.tsx @@ -215,7 +215,7 @@ export const AccountBox = ({ title={t('wallet_backup_delete_button')} onPress={() => setIsDeleteConfirmationVisible(true)} backgroundVariety={AppButtonBackgroundVarietyEnum.OUTLINED} - color={sharedColors.white} + color={sharedColors.button.primaryBackground} style={styles.deleteButton} /> { sharedStyles.contentCenter, styles.activityIndicatorViewStyle, ]}> - + ) @@ -25,6 +25,6 @@ export const LoadingScreen = ({ isVisible }: Props) => { const styles = StyleSheet.create({ activityIndicatorViewStyle: castStyle.view({ - backgroundColor: sharedColors.black, + backgroundColor: sharedColors.background.primary, }), }) diff --git a/src/components/mnemonic/index.tsx b/src/components/mnemonic/index.tsx index fd56445d1..a4d69a072 100644 --- a/src/components/mnemonic/index.tsx +++ b/src/components/mnemonic/index.tsx @@ -86,13 +86,13 @@ export const MnemonicComponent = ({ title={pillText} textColor={ isMnemonicVisible - ? sharedColors.white - : sharedColors.inputActive + ? sharedColors.text.primary + : sharedColors.background.accent } color={ isMnemonicVisible ? sharedColors.primary - : sharedColors.inputActive + : sharedColors.background.accent } widthVariety={AppButtonWidthVarietyEnum.INLINE} accessibilityLabel={`${index}.${word}`} diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index d57203705..359f85168 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -129,10 +129,8 @@ export const ConfirmationModal = ({ title={okText} onPress={onOk} accessibilityLabel={'okText'} - color={buttons && buttons[0] ? buttons[0].color : sharedColors.white} - textColor={ - buttons && buttons[0] ? buttons[0].textColor : sharedColors.black - } + color={buttons?.[0]?.color || sharedColors.button.primaryBackground} + textColor={buttons?.[0]?.textColor || sharedColors.button.primaryText} /> {cancelText && ( )} diff --git a/src/screens/contacts/ContactDetails.tsx b/src/screens/contacts/ContactDetails.tsx index 66ba23ec7..c16ea2461 100644 --- a/src/screens/contacts/ContactDetails.tsx +++ b/src/screens/contacts/ContactDetails.tsx @@ -117,7 +117,7 @@ export const ContactDetails = ({ useEffect(() => { if (isFocused) { - dispatch(changeTopColor(sharedColors.inputInactive)) + dispatch(changeTopColor(sharedColors.background.secondary)) } }, [dispatch, isFocused]) @@ -261,8 +261,8 @@ export const ContactDetails = ({ proposed: false, }) } - color={sharedColors.white} - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> ) @@ -271,13 +271,13 @@ export const ContactDetails = ({ const styles = StyleSheet.create({ screen: castStyle.view({ flex: 1, - backgroundColor: sharedColors.black, + backgroundColor: sharedColors.background.primary, }), scrollviewContainer: castStyle.view({ paddingBottom: 144, }), contactDetailsView: castStyle.view({ - backgroundColor: sharedColors.inputActive, + backgroundColor: sharedColors.background.accent, justifyContent: 'center', alignItems: 'center', height: 167, diff --git a/src/screens/contacts/ContactFormScreen.tsx b/src/screens/contacts/ContactFormScreen.tsx index c7fceaa89..32da131bc 100644 --- a/src/screens/contacts/ContactFormScreen.tsx +++ b/src/screens/contacts/ContactFormScreen.tsx @@ -200,9 +200,9 @@ export const ContactFormScreen = ({ headerTitle: editMode ? t('contact_form_title_edit') : t('contact_form_title_create'), - headerTintColor: sharedColors.white, + headerTintColor: sharedColors.text.primary, headerStyle: { - backgroundColor: sharedColors.black, + backgroundColor: sharedColors.background.primary, }, headerRightContainerStyle: { paddingTop: 0, @@ -268,7 +268,8 @@ export const ContactFormScreen = ({ title={t('contact_form_button_save')} onPress={handleSubmit(saveContact)} style={sharedStyles.appButtonBottom} - textColor={sharedColors.inputInactive} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} disabled={hasErrors || rnsLoading} /> diff --git a/src/screens/contacts/index.tsx b/src/screens/contacts/index.tsx index df6a40fa9..adf0627dc 100644 --- a/src/screens/contacts/index.tsx +++ b/src/screens/contacts/index.tsx @@ -88,7 +88,7 @@ export const ContactsScreen = ({ navigation }: ContactsListScreenProps) => { useEffect(() => { if (isFocused) { - dispatch(changeTopColor(sharedColors.black)) + dispatch(changeTopColor(sharedColors.background.primary)) } }, [dispatch, isFocused]) @@ -156,7 +156,7 @@ export const ContactsScreen = ({ navigation }: ContactsListScreenProps) => { ) }> { accessibilityLabel={testIDs.newContact} onPress={() => navigation.navigate(contactsStackRouteNames.ContactForm)} style={styles.newContactButton} - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> ) @@ -209,7 +210,6 @@ const styles = StyleSheet.create({ bottom: 30, left: 24, right: 24, - backgroundColor: sharedColors.white, }), recentContacts: castStyle.view({ height: 100, diff --git a/src/screens/createKeys/CreateKeysScreen.tsx b/src/screens/createKeys/CreateKeysScreen.tsx index 890c31247..8549a7459 100644 --- a/src/screens/createKeys/CreateKeysScreen.tsx +++ b/src/screens/createKeys/CreateKeysScreen.tsx @@ -45,8 +45,8 @@ export const CreateKeysScreen = ({ } accessibilityLabel={'newWallet'} title={t('initial_screen_button_create')} - color={sharedColors.white} - textColor={sharedColors.text.secondary} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> diff --git a/src/screens/createKeys/import/ImportMasterKeyScreen.tsx b/src/screens/createKeys/import/ImportMasterKeyScreen.tsx index 5806605ee..68b1971d3 100644 --- a/src/screens/createKeys/import/ImportMasterKeyScreen.tsx +++ b/src/screens/createKeys/import/ImportMasterKeyScreen.tsx @@ -279,8 +279,8 @@ export const ImportMasterKeyScreen = ( { style={styles.button} title={t('confirm_key_button')} onPress={handleSubmit(onSubmitEditing)} - color={sharedColors.white} - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> {!formIsValid || hasFormSuccess ? ( diff --git a/src/screens/createKeys/new/NewMasterKeyScreen.tsx b/src/screens/createKeys/new/NewMasterKeyScreen.tsx index 45538d1ff..84359b629 100644 --- a/src/screens/createKeys/new/NewMasterKeyScreen.tsx +++ b/src/screens/createKeys/new/NewMasterKeyScreen.tsx @@ -75,8 +75,8 @@ export const NewMasterKeyScreen = ({ navigation }: Props) => { navigation.navigate(createKeysRouteNames.ConfirmNewMasterKey, { @@ -87,7 +87,7 @@ export const NewMasterKeyScreen = ({ navigation }: Props) => { { {__DEV__ && ( ({ diff --git a/src/screens/home/tokenColor.ts b/src/screens/home/tokenColor.ts index 550f51798..68b986acf 100644 --- a/src/screens/home/tokenColor.ts +++ b/src/screens/home/tokenColor.ts @@ -15,7 +15,7 @@ export const getTokenColor = (tokenSymbol: string): string => { case 'BTCT': return tokenColors.btc default: - return sharedColors.background.accent + return sharedColors.background.highlight } } diff --git a/src/screens/pinScreen/index.tsx b/src/screens/pinScreen/index.tsx index 43235e2e3..c345223e3 100644 --- a/src/screens/pinScreen/index.tsx +++ b/src/screens/pinScreen/index.tsx @@ -434,13 +434,11 @@ export const PinScreen = ({ navigation, route }: Props) => { )} diff --git a/src/screens/profile/ProfileCreateScreen.tsx b/src/screens/profile/ProfileCreateScreen.tsx index 408b79263..b1e620f73 100644 --- a/src/screens/profile/ProfileCreateScreen.tsx +++ b/src/screens/profile/ProfileCreateScreen.tsx @@ -268,8 +268,8 @@ export const ProfileCreateScreen = ({ style={rnsManagerStyles.button} title={t('profile_register_your_username_button_text')} accessibilityLabel={'registerYourUserName'} - color={sharedColors.white} - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} disabled={isPurchasingProfile ? false : !!username} onPress={() => { navigation.navigate(profileStackRouteNames.SearchDomain) diff --git a/src/screens/rnsManager/AliasBoughtScreen.tsx b/src/screens/rnsManager/AliasBoughtScreen.tsx index 250589480..64b634511 100644 --- a/src/screens/rnsManager/AliasBoughtScreen.tsx +++ b/src/screens/rnsManager/AliasBoughtScreen.tsx @@ -58,8 +58,8 @@ export const AliasBoughtScreen = ({ diff --git a/src/screens/rnsManager/PurchaseDomainScreen.tsx b/src/screens/rnsManager/PurchaseDomainScreen.tsx index a95843dac..40a5fec02 100644 --- a/src/screens/rnsManager/PurchaseDomainScreen.tsx +++ b/src/screens/rnsManager/PurchaseDomainScreen.tsx @@ -162,16 +162,16 @@ export const PurchaseDomainScreen = ({ navigation }: Props) => { onPress={registerDomain} accessibilityLabel={TestID.PurchaseDomainButton} title={t('purchase_username_button')} - color={sharedColors.white} - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> diff --git a/src/screens/rnsManager/SearchDomainScreen.tsx b/src/screens/rnsManager/SearchDomainScreen.tsx index 6d942e763..4151ba86e 100644 --- a/src/screens/rnsManager/SearchDomainScreen.tsx +++ b/src/screens/rnsManager/SearchDomainScreen.tsx @@ -342,17 +342,8 @@ export const SearchDomainScreen = ({ navigation }: Props) => { onPress={handleSubmit(onSubmit)} accessibilityLabel={t('request_username_button')} title={t('request_username_button')} - color={ - !isRequestButtonDisabled - ? sharedColors.white - : sharedColors.borderColor - } - textColor={ - !isRequestButtonDisabled - ? sharedColors.black - : sharedColors.labelLight - } - disabledStyle={rnsManagerStyles.disabledButton} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} loading={isCalculatingPrice} /> ) : ( @@ -362,17 +353,8 @@ export const SearchDomainScreen = ({ navigation }: Props) => { onPress={handleSetProfile} accessibilityLabel={t('save_username_button')} title={t('save_username_button')} - color={ - !isSaveButtonDisabled - ? sharedColors.white - : sharedColors.borderColor - } - textColor={ - !isSaveButtonDisabled - ? sharedColors.black - : sharedColors.labelLight - } - disabledStyle={rnsManagerStyles.disabledButton} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> )} diff --git a/src/screens/send/SendScreen.tsx b/src/screens/send/SendScreen.tsx index 891518bac..9af3a7b1f 100644 --- a/src/screens/send/SendScreen.tsx +++ b/src/screens/send/SendScreen.tsx @@ -214,8 +214,8 @@ export const SendScreen = ({ { title: t('send_screen_return_to_home'), onPress: onGoToHome, - color: sharedColors.white, - textColor: sharedColors.black, + color: sharedColors.button.primaryBackground, + textColor: sharedColors.button.primaryText, accessibilityLabel: 'return', }, ]} diff --git a/src/screens/send/TransactionForm.tsx b/src/screens/send/TransactionForm.tsx index faa681c82..d26fccb80 100644 --- a/src/screens/send/TransactionForm.tsx +++ b/src/screens/send/TransactionForm.tsx @@ -511,8 +511,8 @@ export const TransactionForm = ({ amount === 0 || hasEnoughBalance } - color={sharedColors.white} - textColor={sharedColors.text.secondary} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> - + {t('wallet_deploy_title')} {t('wallet_deploy_desc1')} {t('wallet_deploy_desc2')} @@ -158,7 +161,7 @@ export const RelayDeployScreen = ({ + color={sharedColors.text.label}> {t('wallet_deploy_wallet_deploying')} @@ -176,7 +179,8 @@ export const RelayDeployScreen = ({ onPress={deploy} style={styles.button} accessibilityLabel="deploy" - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} /> )} @@ -215,6 +219,5 @@ const styles = StyleSheet.create({ button: castStyle.view({ position: 'absolute', bottom: 14, - backgroundColor: sharedColors.white, }), }) diff --git a/src/screens/settings/SettingsScreen.tsx b/src/screens/settings/SettingsScreen.tsx index 1a8333798..8f2c5a47a 100644 --- a/src/screens/settings/SettingsScreen.tsx +++ b/src/screens/settings/SettingsScreen.tsx @@ -147,35 +147,35 @@ export const SettingsScreen = ({ - + {t('settings_screen_version')} {version}- {Config.USE_RELAY ? 'relay' : 'eoa'} - + {t('settings_screen_smart_wallet_factory')} - + {smartWalletFactoryAddress} - + {t('settings_screen_rpc_url')} - + {rpcUrl} - + {t('settings_screen_backend_url')} - + {walletServiceUrl} @@ -187,7 +187,7 @@ export const SettingsScreen = ({ const styles = StyleSheet.create({ container: castStyle.view({ height: '100%', - backgroundColor: sharedColors.black, + backgroundColor: sharedColors.background.primary, paddingHorizontal: 24, }), mainView: castStyle.view({ diff --git a/src/screens/transactionSummary/TransactionSummaryComponent.tsx b/src/screens/transactionSummary/TransactionSummaryComponent.tsx index f71e0c585..3341efd8e 100644 --- a/src/screens/transactionSummary/TransactionSummaryComponent.tsx +++ b/src/screens/transactionSummary/TransactionSummaryComponent.tsx @@ -115,7 +115,7 @@ export const TransactionSummaryComponent = ({ + color={sharedColors.text.label}> {title} + color={sharedColors.text.label}> {t('transaction_summary_function_type')}: {functionName} )} @@ -311,8 +311,8 @@ export const TransactionSummaryComponent = ({ )} @@ -324,7 +324,7 @@ export const TransactionSummaryComponent = ({ const styles = StyleSheet.create({ screen: castStyle.view({ flex: 1, - backgroundColor: sharedColors.black, + backgroundColor: sharedColors.background.primary, paddingHorizontal: 22, }), contentPadding: castStyle.view({ paddingBottom: 114 }), diff --git a/src/screens/walletConnect/index.tsx b/src/screens/walletConnect/index.tsx index 0d125dabb..6b2cee141 100644 --- a/src/screens/walletConnect/index.tsx +++ b/src/screens/walletConnect/index.tsx @@ -213,8 +213,8 @@ export const WalletConnectScreen = ({ route }: Props) => { diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts index cc18eacdc..6b8f5bcdb 100644 --- a/src/shared/constants/index.ts +++ b/src/shared/constants/index.ts @@ -41,8 +41,8 @@ export const sharedColors = { background: { primary: '#000', secondary: '#252525', - accent: '#575757', - highlight: '#B8B8B8', + accent: '#3A3A3A', + highlight: '#575757', }, input: { @@ -57,6 +57,13 @@ export const sharedColors = { link: '#4152E6', }, + button: { + primaryBackground: '#fff', + primaryText: '#000', + secondaryBackground: '#252525', + secondaryText: '#fff', + }, + stepper: { active: '#4B5CF0', inactive: '#3A3A3A', @@ -131,7 +138,6 @@ export const sharedStyles = StyleSheet.create({ fontWeight: 'bold', }), appButtonBottom: castStyle.view({ - backgroundColor: sharedColors.white, position: 'absolute', bottom: 30, left: 24, diff --git a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx index 736add9e6..8c21d543d 100644 --- a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx +++ b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx @@ -243,8 +243,8 @@ export const ReviewTransactionContainer = ({ { title: t('transaction_summary_title_confirm_button_title'), onPress: confirmTransaction, - color: sharedColors.white, - textColor: sharedColors.black, + color: sharedColors.button.primaryBackground, + textColor: sharedColors.button.primaryText, accessibilityLabel: 'Confirm', disabled: insufficientFunds, }, diff --git a/src/ux/requestsModal/SignRequestHandlerContainer.tsx b/src/ux/requestsModal/SignRequestHandlerContainer.tsx index b46bdf5b8..767c0520b 100644 --- a/src/ux/requestsModal/SignRequestHandlerContainer.tsx +++ b/src/ux/requestsModal/SignRequestHandlerContainer.tsx @@ -55,16 +55,16 @@ export const SignRequestHandlerContainer = ({ accessibilityLabel="Confirm" title={t('transaction_summary_title_confirm_button_title')} onPress={onConfirmTap} - color={sharedColors.white} - textColor={sharedColors.black} + color={sharedColors.button.primaryBackground} + textColor={sharedColors.button.primaryText} style={styles.buttonsStyle} />