fix: recovery phrase input colors (#6451)

### Description

As the title - I broke the colors for this component in light mode. I
took some liberty to simplify the styles and remove the shadow since
we're moving away from shadows. The colors don't exactly match the
designs but i think the semantics of the color variables makes sense
here and double checked with Kayla that the result is okay.

### Test plan

![Simulator Screenshot - iPhone 15 Pro - 2025-01-24 at 17 53
42](https://github.com/user-attachments/assets/a5e629b5-d1a8-43ea-a044-de536097a002)
![Simulator Screenshot - iPhone 15 Pro - 2025-01-24 at 17 53
32](https://github.com/user-attachments/assets/d193fe3e-f834-437c-8c8f-321de5b101ea)

### Related issues

- Fixes RET-1293

#[issue number here]

### 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)

src/components/ClipboardAwarePasteButton.tsx

@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingVertical: 5,
     paddingHorizontal: Spacing.Thick24,
-    backgroundColor: colors.backgroundPrimary,
+    backgroundColor: colors.buttonSecondaryBackground,
     flexDirection: 'row',
     height: Spacing.XLarge48,
     flexGrow: 1,

src/components/RecoveryPhraseInput.tsx

@@ -14,7 +14,7 @@ import ClipboardAwarePasteButton from 'src/components/ClipboardAwarePasteButton'
 import TextInput, { LINE_HEIGHT } from 'src/components/TextInput'
 import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
-import { Shadow, Spacing } from 'src/styles/styles'
+import { Spacing } from 'src/styles/styles'
 import { useClipboard } from 'src/utils/useClipboard'
 
 export enum RecoveryPhraseInputStatus {
@@ -66,11 +66,7 @@ export default function RecoveryPhraseInput({
   const keyboardType = Platform.OS === 'android' ? 'visible-password' : undefined
 
   return (
-    <Card
-      rounded={true}
-      shadow={showInput ? null : Shadow.SoftLight}
-      style={[showInput ? styles.containerActive : styles.container]}
-    >
+    <Card rounded={true} shadow={null} style={styles.container}>
       {/* These views cannot be combined as it will cause the shadow to be clipped on iOS */}
       <View style={styles.containRadius}>
         <View style={[showInput ? styles.contentActiveLong : styles.contentLong]}>
@@ -104,6 +100,7 @@ export default function RecoveryPhraseInput({
                     Platform.OS === 'ios' && NUMBER_OF_LINES
                       ? LINE_HEIGHT * NUMBER_OF_LINES
                       : undefined,
+                  backgroundColor: colors.textInputBackground,
                 }}
                 autoCapitalize="none"
                 testID={testID}
@@ -135,15 +132,8 @@ export default function RecoveryPhraseInput({
 const styles = StyleSheet.create({
   container: {
     padding: 0,
-    backgroundColor: colors.backgroundPrimary,
-    borderColor: colors.backgroundPrimary,
-    borderRadius: Spacing.Smallest8,
-    borderWidth: 1,
-  },
-  containerActive: {
-    padding: 0,
-    backgroundColor: colors.backgroundSecondary,
-    borderColor: colors.borderPrimary,
+    backgroundColor: colors.textInputBackground,
+    borderColor: colors.borderSecondary,
     borderRadius: Spacing.Smallest8,
     borderWidth: 1,
   },
@@ -165,6 +155,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: Spacing.Regular16,
     paddingBottom: 4,
+    borderBottomWidth: 1,
+    borderColor: colors.borderSecondary,
   },
   innerContent: {
     flex: 1,