From 9f3e7c1d112b53a8d1b09442f18201b625bc9f61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?=
 <rodrigo.santana@iovlabs.org>
Date: Wed, 28 Feb 2024 00:31:14 -0300
Subject: [PATCH] input and token balance

---
 src/components/address/AddressInput.tsx |  4 ++--
 src/components/button/index.tsx         |  2 +-
 src/components/input/index.tsx          | 18 +++++++++---------
 src/components/token/index.tsx          | 19 +++++++++----------
 src/screens/send/TransactionForm.tsx    |  6 ++----
 src/shared/constants/index.ts           |  5 +++++
 6 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/address/AddressInput.tsx b/src/components/address/AddressInput.tsx
index 7b9ce5491..f7dc27e98 100644
--- a/src/components/address/AddressInput.tsx
+++ b/src/components/address/AddressInput.tsx
@@ -57,7 +57,7 @@ interface StatusObject {
 const typeColorMap = new Map([
   [Status.ERROR, sharedColors.danger],
   [Status.SUCCESS, sharedColors.success],
-  [Status.INFO, sharedColors.inputLabelColor],
+  [Status.INFO, sharedColors.text.label],
 ])
 
 const defaultStatus = { type: Status.READY, value: '' }
@@ -333,7 +333,7 @@ export const AddressInput = ({
         autoCorrect={false}
         autoCapitalize={'none'}
         placeholder={placeholder}
-        placeholderTextColor={sharedColors.inputLabelColor}
+        placeholderTextColor={sharedColors.text.label}
         rightIcon={
           !(value.address || value.displayAddress)
             ? {
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 090e3fe49..da34a3d6b 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -105,7 +105,7 @@ export const AppButton = ({
   disabledStyle,
   accessibilityLabel = '',
   onPress,
-  color = sharedColors.inputInactive,
+  color = sharedColors.background.secondary,
   textColor = sharedColors.text.primary,
   textType = 'button1',
   backgroundVariety = AppButtonBackgroundVarietyEnum.DEFAULT,
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
index 739c8ed6e..bed315ef7 100644
--- a/src/components/input/index.tsx
+++ b/src/components/input/index.tsx
@@ -129,7 +129,7 @@ export const Input = ({
                   <Icon
                     name={leftIcon.name}
                     size={leftIcon.size || defaultIconSize}
-                    color={leftIcon.color || sharedColors.white}
+                    color={leftIcon.color || sharedColors.text.primary}
                   />
                 </AppTouchable>
               ) : (
@@ -187,7 +187,7 @@ export const Input = ({
                 style={styles.rightIcon}
                 name={'close'}
                 size={defaultIconSize}
-                color={sharedColors.white}
+                color={sharedColors.text.primary}
               />
             </AppTouchable>
           ) : rightIcon && 'name' in rightIcon ? (
@@ -196,7 +196,7 @@ export const Input = ({
                 style={styles.rightIcon}
                 name={rightIcon.name}
                 size={rightIcon.size || defaultIconSize}
-                color={rightIcon.color || sharedColors.white}
+                color={rightIcon.color || sharedColors.text.primary}
               />
             </Pressable>
           ) : (
@@ -213,7 +213,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    backgroundColor: sharedColors.inputInactive,
+    backgroundColor: sharedColors.background.secondary,
     paddingLeft: 16,
     paddingRight: 16,
     marginTop: 12,
@@ -221,7 +221,7 @@ const styles = StyleSheet.create({
     minHeight: 80,
   }),
   containerActive: castStyle.view({
-    backgroundColor: sharedColors.inputActive,
+    backgroundColor: sharedColors.input.active,
   }),
   contentPadding: castStyle.view({
     paddingBottom: 18,
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
   label: castStyle.text({
     marginTop: 10,
     marginBottom: 4,
-    color: sharedColors.inputLabelColor,
+    color: sharedColors.text.label,
   }),
   valueContainer: castStyle.view({
     flex: 1,
@@ -243,17 +243,17 @@ const styles = StyleSheet.create({
     marginLeft: 12,
   }),
   subtitle: castStyle.text({
-    color: sharedColors.inputLabelColor,
+    color: sharedColors.text.label,
   }),
   rightIcon: castStyle.text({
     padding: defaultIconSize,
   }),
   placeholderText: castStyle.text({
     flex: 1,
-    color: sharedColors.inputLabelColor,
+    color: sharedColors.text.label,
   }),
   valueText: castStyle.text({
     marginTop: 14,
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
   }),
 })
diff --git a/src/components/token/index.tsx b/src/components/token/index.tsx
index accd32570..d39c278d8 100644
--- a/src/components/token/index.tsx
+++ b/src/components/token/index.tsx
@@ -102,7 +102,7 @@ export const TokenBalance = ({
             </View>
           )}
           {firstValue.symbolType === 'usd' && (
-            <DollarIcon size={30} color={sharedColors.white} />
+            <DollarIcon size={30} color={sharedColors.text.primary} />
           )}
           <TextInput
             onChangeText={handleAmountChange}
@@ -110,7 +110,7 @@ export const TokenBalance = ({
             keyboardType="numeric"
             accessibilityLabel={'Amount.Input'}
             placeholder="0"
-            placeholderTextColor={sharedColors.inputLabelColor}
+            placeholderTextColor={sharedColors.text.label}
             style={[styles.input, sharedStyles.flex]}
             editable={editable}
             multiline={false}
@@ -126,15 +126,15 @@ export const TokenBalance = ({
           {secondValue?.symbolType === 'usd' && (
             <>
               {secondValue.symbol === '<' && (
-                <Typography type="body1" style={styles.subTitle}>
+                <Typography type="body1" style={styles.secondValue}>
                   {'<'}
                 </Typography>
               )}
-              <DollarIcon size={16} color={sharedColors.labelLight} />
+              <DollarIcon size={16} color={sharedColors.text.label} />
             </>
           )}
           {!isNaN(Number(secondValue?.balance)) && (
-            <Typography type="body1" style={styles.subTitle}>
+            <Typography type="body1" style={styles.secondValue}>
               {hide
                 ? '\u002A\u002A\u002A\u002A\u002A\u002A'
                 : secondValue
@@ -193,7 +193,7 @@ export const TokenBalance = ({
             <View style={styles.badge}>
               <Icon
                 name="ios-swap-vertical"
-                color={sharedColors.white}
+                color={sharedColors.text.primary}
                 size={25}
               />
             </View>
@@ -236,9 +236,8 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
   }),
-  subTitle: castStyle.text({
-    color: sharedColors.subTitle,
-    opacity: 0.7,
+  secondValue: castStyle.text({
+    color: sharedColors.text.label,
   }),
   error: castStyle.text({
     color: sharedColors.dangerLight,
@@ -250,7 +249,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   }),
   input: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontWeight: '500',
     fontSize: 36,
     padding: 0,
diff --git a/src/screens/send/TransactionForm.tsx b/src/screens/send/TransactionForm.tsx
index 889b621eb..faa681c82 100644
--- a/src/screens/send/TransactionForm.tsx
+++ b/src/screens/send/TransactionForm.tsx
@@ -410,7 +410,6 @@ export const TransactionForm = ({
             style={styles.marginTop10}
             firstValue={firstBalance}
             secondValue={secondBalance}
-            color={sharedColors.black}
             error={hasEnoughBalance ? t('transaction_form_error_balance') : ''}
             onSwap={onSwapBalance}
             editable
@@ -440,7 +439,7 @@ export const TransactionForm = ({
               <Icon
                 name={showTxSelector ? 'chevron-up' : 'chevron-down'}
                 size={20}
-                color={sharedColors.white}
+                color={sharedColors.text.primary}
               />
             </>
           </AppTouchable>
@@ -513,7 +512,7 @@ export const TransactionForm = ({
             hasEnoughBalance
           }
           color={sharedColors.white}
-          textColor={sharedColors.black}
+          textColor={sharedColors.text.secondary}
         />
         <AppButton
           style={styles.buttonCancel}
@@ -533,7 +532,6 @@ const styles = StyleSheet.create({
   }),
   buttonCancel: castStyle.view({
     marginTop: 10,
-    backgroundColor: sharedColors.black,
   }),
   assetToggleRow: castStyle.view({
     flexDirection: 'row',
diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts
index da1f9f40b..cc18eacdc 100644
--- a/src/shared/constants/index.ts
+++ b/src/shared/constants/index.ts
@@ -45,6 +45,11 @@ export const sharedColors = {
     highlight: '#B8B8B8',
   },
 
+  input: {
+    active: '#3A3A3A',
+    inactive: '#252525',
+  },
+
   text: {
     primary: '#fff',
     secondary: '#000',