Merge branch 'main' into satish/act-1514-1

valora-inc · Jan 21, 2025 · 7af8e2e · 7af8e2e
2 parents dbd992a + 9a70651
commit 7af8e2e
Show file tree

Hide file tree

Showing 253 changed files with 634 additions and 577 deletions.
diff --git a/src/account/Education.tsx b/src/account/Education.tsx
@@ -123,7 +123,9 @@ const Education = (props: Props) => {
         <TopBarIconButton
           testID={`Education/${currentIndex === 0 ? 'Close' : 'Back'}Icon`}
           onPress={goBack}
-          icon={currentIndex === 0 ? <Times /> : <BackChevron color={colors.navigationTop} />}
+          icon={
+            currentIndex === 0 ? <Times /> : <BackChevron color={colors.navigationTopPrimary} />
+          }
         />
       </View>
       <View style={styles.container}>

diff --git a/src/account/SecuritySubmenu.tsx b/src/account/SecuritySubmenu.tsx
@@ -408,7 +408,7 @@ const styles = StyleSheet.create({
   },
   value: {
     ...typeScale.bodyMedium,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
     marginRight: Spacing.Smallest8,
     marginLeft: Spacing.Tiny4,
   },

diff --git a/src/account/ShakeForSupport.tsx b/src/account/ShakeForSupport.tsx
@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 0,
     width: '100%',
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 24,

diff --git a/src/account/SupportContact.tsx b/src/account/SupportContact.tsx
@@ -203,7 +203,7 @@ const styles = StyleSheet.create({
   },
   disclaimerText: {
     ...typeScale.bodyMedium,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
   },
   container: {
     flex: 1,
@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 16,
-    color: colors.textPrimary,
+    color: colors.contentPrimary,
     height: 80,
     maxHeight: 150,
   },
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 16,
-    color: colors.textPrimary,
+    color: colors.contentPrimary,
     maxHeight: 50,
   },
   headerText: {

diff --git a/src/app/DebugImages.tsx b/src/app/DebugImages.tsx
@@ -21,7 +21,12 @@ const IconItem = ({ Component, fileName }: { Component: React.ElementType; fileN
   return (
     <View style={styles.itemContainer}>
       {/* Not all icons have the same props, we do our best here to set consistent size and color */}
-      <Component height={ICON_SIZE} width={ICON_SIZE} size={ICON_SIZE} color={Colors.textPrimary} />
+      <Component
+        height={ICON_SIZE}
+        width={ICON_SIZE}
+        size={ICON_SIZE}
+        color={Colors.contentPrimary}
+      />
       <Text>{fileName.split('.tsx')[0].slice(2)}</Text>
     </View>
   )
@@ -30,7 +35,7 @@ const IconItem = ({ Component, fileName }: { Component: React.ElementType; fileN
 function DebugImages() {
   return (
     <LinearGradient
-      colors={[Colors.background, Colors.inactive]}
+      colors={[Colors.backgroundPrimary, Colors.inactive]}
       start={{ x: 0, y: 0 }}
       end={{ x: 0, y: 1 }}
     >

diff --git a/src/backup/BackupIntroduction.tsx b/src/backup/BackupIntroduction.tsx
@@ -117,7 +117,7 @@ function goToAccountKeyGuide() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
   },
   introContainer: {
     flexGrow: 1,

diff --git a/src/backup/BackupPhraseContainer.tsx b/src/backup/BackupPhraseContainer.tsx
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
   },
   indexText: {
     ...typeScale.bodyMedium,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
   },
   twelveWordTable: {
     flexDirection: 'row',

diff --git a/src/backup/BackupQuiz.tsx b/src/backup/BackupQuiz.tsx
@@ -380,13 +380,13 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     textAlign: 'center',
     lineHeight: undefined,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
   },
   chosenWordFilled: {
     ...typeScale.bodySmall,
     textAlign: 'center',
     lineHeight: undefined,
-    color: colors.textPrimary,
+    color: colors.contentPrimary,
   },
   mnemonicButtonsContainer: {
     marginTop: 24,

diff --git a/src/backup/CancelConfirm.tsx b/src/backup/CancelConfirm.tsx
@@ -55,6 +55,6 @@ export default function CancelConfirm({ screen }: Props) {
 
 const styles = StyleSheet.create({
   button: {
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
   },
 })
diff --git a/src/backup/QuizzBottom.tsx b/src/backup/QuizzBottom.tsx
@@ -52,6 +52,6 @@ const styles = StyleSheet.create({
   incorrect: {
     ...typeScale.labelMedium,
     textAlign: 'center',
-    color: colors.error,
+    color: colors.errorPrimary,
   },
 })
diff --git a/src/celoNews/CeloNewsFeed.tsx b/src/celoNews/CeloNewsFeed.tsx
@@ -149,7 +149,7 @@ const styles = StyleSheet.create({
   },
   headerDescription: {
     ...typeScale.bodySmall,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
     marginTop: Spacing.Smallest8,
   },
   readMoreButton: {

diff --git a/src/celoNews/CeloNewsFeedItem.tsx b/src/celoNews/CeloNewsFeedItem.tsx
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
   },
   author: {
     ...typeScale.labelSemiBoldSmall,
-    color: colors.warning,
+    color: colors.warningPrimary,
     marginBottom: Spacing.Small12,
   },
   row: {
@@ -97,7 +97,7 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     fontSize: 13,
     lineHeight: 16,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
     marginLeft: 4,
   },
   image: {

diff --git a/src/components/AccountNumber.tsx b/src/components/AccountNumber.tsx
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
   },
   text: {
     ...typeScale.bodySmall,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
     marginBottom: 8,
   },
   link: {

diff --git a/src/components/AddAssetsBottomSheet.tsx b/src/components/AddAssetsBottomSheet.tsx
@@ -75,7 +75,7 @@ export default function AddAssetsBottomSheet({
             testID={`${testId}/${action.name}`}
           >
             <>
-              <action.iconComponent color={Colors.textPrimary} />
+              <action.iconComponent color={Colors.contentPrimary} />
               <View style={styles.contentContainer}>
                 <Text style={styles.actionTitle}>{action.title}</Text>
                 <Text style={styles.actionDetails}>{action.details}</Text>

diff --git a/src/components/BottomSheetBase.tsx b/src/components/BottomSheetBase.tsx
@@ -1,9 +1,9 @@
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetProps } from '@gorhom/bottom-sheet'
 import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types'
 import React, { useCallback, useEffect } from 'react'
-import { Keyboard, StyleSheet } from 'react-native'
+import { Keyboard } from 'react-native'
 import { useReducedMotion } from 'react-native-reanimated'
-import Colors from 'src/styles/colors'
+import styles from 'src/styles/styles'
 
 interface BottomSheetBaseProps {
   forwardedRef: React.RefObject<BottomSheetModal>
@@ -64,8 +64,8 @@ const BottomSheetBase = ({
       enablePanDownToClose
       backdropComponent={renderBackdrop}
       handleComponent={handleComponent}
-      handleIndicatorStyle={[styles.handle, handleIndicatorStyle]}
-      backgroundStyle={backgroundStyle}
+      handleIndicatorStyle={[styles.bottomSheetHandleIndicator, handleIndicatorStyle]}
+      backgroundStyle={[styles.bottomSheetBackground, backgroundStyle]}
       onAnimate={handleAnimate}
       onDismiss={onClose}
       onChange={onChange}
@@ -79,11 +79,4 @@ const BottomSheetBase = ({
   )
 }
 
-const styles = StyleSheet.create({
-  handle: {
-    backgroundColor: Colors.bottomSheetHandle,
-    width: 40,
-  },
-})
-
 export default BottomSheetBase
diff --git a/src/components/BottomSheetLegacy.tsx b/src/components/BottomSheetLegacy.tsx
@@ -133,7 +133,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     opacity: 1,
     width: '100%',
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     borderTopRightRadius: Spacing.Regular16,
     borderTopLeftRadius: Spacing.Regular16,
   },

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -160,20 +160,20 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
   let borderColor
   switch (type) {
     case BtnTypes.PRIMARY:
-      textColor = Colors.textInverse
+      textColor = Colors.contentInverse
       backgroundColor = Colors.buttonPrimary
       opacity = disabled ? 0.25 : 1.0
       break
     case BtnTypes.SECONDARY:
-      textColor = Colors.textPrimary
+      textColor = Colors.contentPrimary
       backgroundColor = Colors.buttonSecondary
       borderColor = Colors.border
       opacity = disabled ? 0.5 : 1.0
       break
 
     case BtnTypes.TERTIARY:
-      textColor = Colors.textPrimary
-      backgroundColor = Colors.background
+      textColor = Colors.contentPrimary
+      backgroundColor = Colors.backgroundPrimary
       borderColor = Colors.border
       opacity = disabled ? 0.5 : 1.0
       break

diff --git a/src/components/CancelButton.tsx b/src/components/CancelButton.tsx
@@ -53,6 +53,6 @@ export default function CancelButton({
 
 const styles = StyleSheet.create({
   title: {
-    color: colors.textPrimary,
+    color: colors.contentPrimary,
   },
 })
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -25,7 +25,7 @@ export default function Card({ style, rounded = false, shadow = Shadow.Soft, ...
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     padding: 16,
   },
   rounded: {

diff --git a/src/components/CircleButton.tsx b/src/components/CircleButton.tsx
@@ -32,7 +32,7 @@ export default class CircleButton extends React.PureComponent<ButtonProps> {
       borderWidth !== undefined ? { borderWidth } : { borderWidth: 0 },
       { borderColor: color, width: size, height: size, borderRadius: Math.floor(size! / 2) },
     ]
-    const xColor = solid ? colors.textInverse : color
+    const xColor = solid ? colors.contentInverse : color
 
     return (
       <View style={[styles.row, this.props.style]}>

diff --git a/src/components/ClipboardAwarePasteButton.tsx b/src/components/ClipboardAwarePasteButton.tsx
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingVertical: 5,
     paddingHorizontal: Spacing.Thick24,
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     flexDirection: 'row',
     height: Spacing.XLarge48,
     flexGrow: 1,

diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx
@@ -41,10 +41,10 @@ export default function CodeInput({
   const showStatus = showCheckmark || showSpinner || showError
 
   const textColorForStatus = {
-    [CodeInputStatus.Inputting]: colors.textPrimary,
-    [CodeInputStatus.Processing]: colors.textSecondary,
-    [CodeInputStatus.Error]: colors.error,
-    [CodeInputStatus.Accepted]: colors.success,
+    [CodeInputStatus.Inputting]: colors.contentPrimary,
+    [CodeInputStatus.Processing]: colors.contentSecondary,
+    [CodeInputStatus.Error]: colors.errorPrimary,
+    [CodeInputStatus.Accepted]: colors.successPrimary,
   }
   return (
     <Card rounded={true} shadow={null} style={[styles.container, style]}>
@@ -85,7 +85,7 @@ export default function CodeInput({
 
           {showError && (
             <AttentionIcon
-              color={colors.error}
+              color={colors.errorPrimary}
               testId={testID ? `${testID}/ErrorIcon` : undefined}
               size={20}
             />

diff --git a/src/components/CodeRow.tsx b/src/components/CodeRow.tsx
@@ -103,7 +103,7 @@ function CodeRow({
 const styles = StyleSheet.create({
   codeInput: {
     flex: 0,
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     borderColor: colors.border,
     borderRadius: 3,
     borderWidth: 1,
@@ -126,7 +126,7 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   codeProcessingContainer: {
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     position: 'relative',
     justifyContent: 'center',
     marginVertical: 5,
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
     height: 50,
   },
   codeInputSpinner: {
-    backgroundColor: colors.background,
+    backgroundColor: colors.backgroundPrimary,
     position: 'absolute',
     top: 5,
     right: 3,
@@ -156,7 +156,7 @@ const styles = StyleSheet.create({
   codeValue: {
     ...typeScale.bodyMedium,
     fontSize: 15,
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
   },
 })
 

diff --git a/src/components/ContactCircleSelf.tsx b/src/components/ContactCircleSelf.tsx
@@ -22,7 +22,7 @@ export default function ContactCircleSelf({ style, size }: Props) {
       size={size}
       backgroundColor={colors.backgroundSecondary}
       borderColor={colors.border}
-      foregroundColor={colors.textPrimary}
+      foregroundColor={colors.contentPrimary}
     />
   )
 }
diff --git a/src/components/DataFieldWithCopy.tsx b/src/components/DataFieldWithCopy.tsx
@@ -42,7 +42,7 @@ function DataFieldWithCopy({ label, value, copySuccessMessage, testID, onCopy, s
           {value}
         </Text>
         <Touchable hitSlop={variables.iconHitslop} onPress={handleCopy} testID={`${testID}/Copy`}>
-          <CopyIcon color={Colors.textSecondary} />
+          <CopyIcon color={Colors.contentSecondary} />
         </Touchable>
       </View>
     </View>

diff --git a/src/components/DevSkipButton.tsx b/src/components/DevSkipButton.tsx
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
     height: 25,
   },
   skipButton: {
-    backgroundColor: colors.error,
+    backgroundColor: colors.errorPrimary,
   },
   hiddenButton: {
     flex: 1,

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
   },
   secondary: {
-    color: colors.textSecondary,
+    color: colors.contentSecondary,
     paddingTop: 16,
   },
   primary: {

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
     borderColor: Colors.border,
     borderRadius: Spacing.Tiny4,
     borderWidth: 1,
-    backgroundColor: Colors.background,
+    backgroundColor: Colors.backgroundPrimary,
     flexDirection: 'column',
     width: '100%',
   },

diff --git a/src/components/ErrorMessageInline.tsx b/src/components/ErrorMessageInline.tsx
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
   },
   errorMessage: {
     ...typeScale.bodySmall,
-    color: colors.error,
+    color: colors.errorPrimary,
   },
 })