buttons

rsksmart · Mar 21, 2024 · bf4c37a · bf4c37a
1 parent 9f3e7c1
commit bf4c37a
Show file tree

Hide file tree

Showing 31 changed files with 99 additions and 111 deletions.
diff --git 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}
       />
       <DeleteWalletModal

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -105,8 +105,8 @@ export const AppButton = ({
   disabledStyle,
   accessibilityLabel = '',
   onPress,
-  color = sharedColors.background.secondary,
-  textColor = sharedColors.text.primary,
+  color = sharedColors.button.secondaryBackground,
+  textColor = sharedColors.button.secondaryText,
   textType = 'button1',
   backgroundVariety = AppButtonBackgroundVarietyEnum.DEFAULT,
   widthVariety = AppButtonWidthVarietyEnum.FULL,

diff --git a/src/components/loading/LoadingScreen.tsx b/src/components/loading/LoadingScreen.tsx
@@ -17,14 +17,14 @@ export const LoadingScreen = ({ isVisible }: Props) => {
           sharedStyles.contentCenter,
           styles.activityIndicatorViewStyle,
         ]}>
-        <AppSpinner color="white" size={150} />
+        <AppSpinner color={sharedColors.text.primary} size={150} />
       </View>
     </Modal>
   )
 }
 
 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
@@ -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
@@ -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 && (
           <AppButton
@@ -142,10 +140,10 @@ export const ConfirmationModal = ({
             accessibilityLabel={'cancelText'}
             backgroundVariety={AppButtonBackgroundVarietyEnum.OUTLINED}
             color={
-              buttons && buttons[1] ? buttons[1].color : sharedColors.white
+              buttons?.[1].color || sharedColors.button.secondaryBackground
             }
             textColor={
-              buttons && buttons[1] ? buttons[1].textColor : sharedColors.white
+              buttons?.[1].textColor || sharedColors.button.secondaryText
             }
           />
         )}

diff --git 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}
       />
     </View>
   )
@@ -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
@@ -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}
       />
     </KeyboardAvoidingView>

diff --git 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) => {
                     )
                   }>
                   <BasicRow
-                    style={{ backgroundColor: sharedColors.black }}
+                    style={{ backgroundColor: sharedColors.background.primary }}
                     avatar={{ name: contact.name }}
                     label={contact.name}
                     secondaryLabel={
@@ -176,7 +176,8 @@ 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}
       />
     </View>
   )
@@ -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
@@ -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}
         />
 
         <AppButton

diff --git a/src/screens/createKeys/SecurityInformation.tsx b/src/screens/createKeys/SecurityInformation.tsx
@@ -90,8 +90,8 @@ export const SecurityInformation = ({
           style={styles.button}
           title={t('security_info_btn')}
           disabled={!isCheckboxActive}
-          color={sharedColors.white}
-          textColor={sharedColors.text.secondary}
+          color={sharedColors.button.primaryBackground}
+          textColor={sharedColors.button.primaryText}
           accessibilityLabel={TestID.ContinueButton}
         />
       </View>

diff --git a/src/screens/createKeys/import/ImportMasterKeyScreen.tsx b/src/screens/createKeys/import/ImportMasterKeyScreen.tsx
@@ -279,8 +279,8 @@ export const ImportMasterKeyScreen = (
           <AppButton
             accessibilityLabel={'OK'}
             title={t('ok')}
-            color={sharedColors.white}
-            textColor={sharedColors.text.secondary}
+            color={sharedColors.button.primaryBackground}
+            textColor={sharedColors.button.primaryText}
             textType={'body2'}
             textStyle={sharedStyles.fontBoldText}
             onPress={handleImportMnemonic}

diff --git a/src/screens/createKeys/new/ConfirmNewMasterKeyScreen.tsx b/src/screens/createKeys/new/ConfirmNewMasterKeyScreen.tsx
@@ -197,8 +197,8 @@ export const ConfirmNewMasterKeyScreen = ({ route }: ConfirmNewMasterKey) => {
         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 ? (
         <View style={StyleSheet.absoluteFill}>

diff --git a/src/screens/createKeys/new/NewMasterKeyScreen.tsx b/src/screens/createKeys/new/NewMasterKeyScreen.tsx
@@ -75,8 +75,8 @@ export const NewMasterKeyScreen = ({ navigation }: Props) => {
         <AppButton
           title={t('new_master_key_button_title')}
           disabled={!isMnemonicVisible}
-          color={sharedColors.white}
-          textColor={sharedColors.text.secondary}
+          color={sharedColors.button.primaryBackground}
+          textColor={sharedColors.button.primaryText}
           textType={'h4'}
           onPress={() =>
             navigation.navigate(createKeysRouteNames.ConfirmNewMasterKey, {
@@ -87,7 +87,7 @@ export const NewMasterKeyScreen = ({ navigation }: Props) => {
         <AppButton
           style={styles.secureLaterBtn}
           title={t('new_master_key_secure_later_button')}
-          textColor={sharedColors.text.primary}
+          textColor={sharedColors.button.secondaryText}
           textType={'h4'}
           backgroundVariety={AppButtonBackgroundVarietyEnum.OUTLINED}
           onPress={onSecureLater}

diff --git a/src/screens/createKeys/retryLogin/index.tsx b/src/screens/createKeys/retryLogin/index.tsx
@@ -24,8 +24,8 @@ export const RetryLogin = () => {
       <AppButton
         onPress={retryLogin}
         title={t('initial_screen_button_retry_login')}
-        color={sharedColors.white}
-        textColor={sharedColors.black}
+        color={sharedColors.button.primaryBackground}
+        textColor={sharedColors.button.primaryText}
       />
       {__DEV__ && (
         <AppButton

diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx
@@ -55,7 +55,7 @@ export const PortfolioComponent = ({
             onPress={onTotalTap}
             color={
               isTotalCardSelected
-                ? sharedColors.background.accent
+                ? sharedColors.background.highlight
                 : sharedColors.background.secondary
             }
             primaryText={t('TOTAL')}

diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
@@ -79,7 +79,7 @@ export const HomeScreen = ({
   const selectedColor = getTokenColor(selected?.symbol || '')
   const backgroundColor = selectedAddress
     ? selectedColor
-    : sharedColors.background.accent
+    : sharedColors.background.highlight
 
   /*const rampConfig = useMemo(
     () => ({

diff --git 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
@@ -434,13 +434,11 @@ export const PinScreen = ({ navigation, route }: Props) => {
             </View>
           )}
           <AppButton
-            style={[
-              sharedStyles.appButtonBottom,
-              { backgroundColor: sharedColors.black },
-            ]}
+            style={sharedStyles.appButtonBottom}
             onPress={focusInput}
             title={t('pin_settings_open_keyboard_btn')}
-            textColor={sharedColors.text.primary}
+            color={sharedColors.button.secondaryBackground}
+            textColor={sharedColors.button.secondaryText}
             backgroundVariety={AppButtonBackgroundVarietyEnum.OUTLINED}
             accessibilityLabel={TestID.OpenKeyboardButton}
           />

diff --git 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
@@ -58,8 +58,8 @@ export const AliasBoughtScreen = ({
       </View>
       <AppButton
         title={t('alias_bought_close_button')}
-        color={sharedColors.white}
-        textColor={sharedColors.black}
+        color={sharedColors.button.primaryBackground}
+        textColor={sharedColors.button.primaryText}
         onPress={onCloseButtonPressed}
         accessibilityLabel={'close'}
       />

diff --git 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}
             />
             <AppButton
               style={rnsManagerStyles.button}
               onPress={onCancelDomainTap}
               accessibilityLabel={TestID.CancelRegistrationButton}
               title={t('cancel_username_button')}
-              color={sharedColors.white}
-              textColor={sharedColors.white}
+              color={sharedColors.button.primaryBackground}
+              textColor={sharedColors.button.secondaryText}
               backgroundVariety={AppButtonBackgroundVarietyEnum.OUTLINED}
             />
           </>

diff --git 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}
           />
         )}
       </View>

diff --git 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
@@ -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}
         />
         <AppButton
           style={styles.buttonCancel}