fix(colors): explicitly define colors in places that was missing them (…

…#6426) ### Description When playing around with changing the colors to another app (Beefy) I noticed there were components that default to black / white that don't work well for a darker theme. This PR fixes those places to make sure the correct color is applied. ### Test plan n/a ### Related issues - Related to RET-1293 ### Backwards compatibility Y ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [ ] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · Jan 21, 2025 · a471697 · a471697
1 parent 80151ad
commit a471697
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 17 deletions.
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/TextInput.tsx b/src/components/TextInput.tsx
@@ -83,6 +83,7 @@ export class CTextInput extends React.Component<Props, State> {
             inputStyle,
           ]}
           value={value}
+          selectionColor={Colors.contentSecondary}
           {...passThroughProps}
           onFocus={this.handleInputFocus}
           onBlur={this.handleInputBlur}

diff --git a/src/components/TokenBottomSheet.tsx b/src/components/TokenBottomSheet.tsx
@@ -271,6 +271,7 @@ function TokenBottomSheet({
         keyExtractor={(item) => item.tokenId}
         contentContainerStyle={{
           paddingBottom: insets.bottom,
+          backgroundColor: Colors.backgroundPrimary,
           // fill full height if there are filter chips, otherwise the bottom
           // sheet height changes as tokens are filtered
           flexGrow: filterChips.length ? 1 : undefined,

diff --git a/src/components/__snapshots__/CodeRow.test.tsx.snap b/src/components/__snapshots__/CodeRow.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`CodeRow renders correctly for all CodeRowStatus states 2`] = `
     onChangeText={[MockFunction]}
     onFocus={[Function]}
     placeholder="placeholder"
+    selectionColor="#757575"
     shouldShowClipboard={[MockFunction]}
     style={
       [

diff --git a/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap b/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -176,6 +176,7 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = `
           onFocus={[Function]}
           placeholder="00 00 00 00 00"
           placeholderTextColor="#757575"
+          selectionColor="#757575"
           style={
             [
               {

diff --git a/src/navigator/Navigator.tsx b/src/navigator/Navigator.tsx
@@ -114,6 +114,7 @@ import ValidateRecipientIntro, {
 } from 'src/send/ValidateRecipientIntro'
 import { getFeatureGate } from 'src/statsig'
 import { StatsigFeatureGates } from 'src/statsig/types'
+import styles from 'src/styles/styles'
 import variables from 'src/styles/variables'
 import SwapScreen from 'src/swap/SwapScreen'
 import SwapScreenV2 from 'src/swap/SwapScreenV2'
@@ -757,6 +758,8 @@ function RootStackScreen() {
         // take up the whole screen, it is no longer obvious that they are a bottom
         // sheet / how to navigate away
         maxDynamicContentSize: variables.height * 0.9,
+        backgroundStyle: styles.bottomSheetBackground,
+        handleIndicatorStyle: styles.bottomSheetHandleIndicator,
       }}
     >
       <RootStack.Screen name={Screens.MainModal} component={ModalStackScreen} />

diff --git a/src/navigator/SettingsMenu.tsx b/src/navigator/SettingsMenu.tsx
@@ -167,19 +167,19 @@ export default function SettingsMenu({ route }: Props) {
       return (
         <View style={styles.devSettings}>
           <Touchable onPress={onCopyText(sessionId)} style={styles.devSettingsItem}>
-            <Text>{`Session ID: ${sessionId}`}</Text>
+            <Text style={styles.debugInfoText}>{`Session ID: ${sessionId}`}</Text>
           </Touchable>
           <Touchable onPress={onCopyText(statsigStableId)} style={styles.devSettingsItem}>
-            <Text>{`Statsig Stable ID: ${statsigStableId}`}</Text>
+            <Text style={styles.debugInfoText}>{`Statsig Stable ID: ${statsigStableId}`}</Text>
           </Touchable>
           <View style={styles.devSettingsItem}>
             <TouchableOpacity onPress={showDebugImagesScreen}>
-              <Text>See App Assets</Text>
+              <Text style={styles.debugInfoText}>See App Assets</Text>
             </TouchableOpacity>
           </View>
           <View style={styles.devSettingsItem}>
             <TouchableOpacity onPress={confirmAccountRemoval}>
-              <Text>App Quick Reset</Text>
+              <Text style={styles.debugInfoText}>App Quick Reset</Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -323,4 +323,7 @@ const styles = StyleSheet.create({
     marginVertical: Spacing.Smallest8,
     marginHorizontal: Spacing.Regular16,
   },
+  debugInfoText: {
+    ...typeScale.bodySmall,
+  },
 })
diff --git a/src/navigator/TabNavigator.tsx b/src/navigator/TabNavigator.tsx
@@ -40,6 +40,7 @@ export default function TabNavigator({ route }: Props) {
         tabBarAllowFontScaling: false,
         tabBarStyle: {
           height: variables.height * 0.1,
+          backgroundColor: Colors.backgroundPrimary,
         },
         ...(tabHeader as NativeStackHeaderProps),
       }}

diff --git a/src/qrcode/StyledQRGen.tsx b/src/qrcode/StyledQRGen.tsx
@@ -1,6 +1,7 @@
-import QRCode from 'react-native-qrcode-svg'
 import React from 'react'
+import QRCode from 'react-native-qrcode-svg'
 import { SVG } from 'src/send/actions'
+import Colors from 'src/styles/colors'
 
 function StyledQRCode({
   value,
@@ -11,7 +12,15 @@ function StyledQRCode({
   size: number
   svgRef: React.MutableRefObject<SVG>
 }) {
-  return <QRCode value={value} size={size} getRef={(ref) => (svgRef.current = ref)} />
+  return (
+    <QRCode
+      value={value}
+      size={size}
+      getRef={(ref) => (svgRef.current = ref)}
+      backgroundColor="transparent"
+      color={Colors.contentPrimary}
+    />
+  )
 }
 
 export default React.memo(StyledQRCode)
diff --git a/src/send/__snapshots__/ValidateRecipientAccount.test.tsx.snap b/src/send/__snapshots__/ValidateRecipientAccount.test.tsx.snap
@@ -97,6 +97,7 @@ exports[`ValidateRecipientAccount renders correctly when full validation require
                 onChangeText={[Function]}
                 onFocus={[Function]}
                 placeholder="0xf1b1d5a6e7728g309c4a025k122d71ad75a61976"
+                selectionColor="#757575"
                 shouldShowClipboard={[Function]}
                 style={
                   [
@@ -414,6 +415,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ
                     onChangeText={[Function]}
                     onFocus={[Function]}
                     placeholder="a"
+                    selectionColor="#757575"
                     style={
                       [
                         {
@@ -474,6 +476,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ
                     onChangeText={[Function]}
                     onFocus={[Function]}
                     placeholder="0"
+                    selectionColor="#757575"
                     style={
                       [
                         {
@@ -534,6 +537,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ
                     onChangeText={[Function]}
                     onFocus={[Function]}
                     placeholder="F"
+                    selectionColor="#757575"
                     style={
                       [
                         {
@@ -594,6 +598,7 @@ exports[`ValidateRecipientAccount renders correctly when partial validation requ
                     onChangeText={[Function]}
                     onFocus={[Function]}
                     placeholder="4"
+                    selectionColor="#757575"
                     style={
                       [
                         {

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -62,6 +62,13 @@ const styles = StyleSheet.create({
     shadowRadius: 1.5,
     shadowColor: Colors.barShadow,
   },
+  bottomSheetHandleIndicator: {
+    backgroundColor: Colors.bottomSheetHandle,
+    width: 40,
+  },
+  bottomSheetBackground: {
+    backgroundColor: Colors.backgroundPrimary,
+  },
 })
 
 export default styles