diff --git a/apps/wallet-mobile/package.json b/apps/wallet-mobile/package.json index b2f6b6b57c..c19605b760 100644 --- a/apps/wallet-mobile/package.json +++ b/apps/wallet-mobile/package.json @@ -172,7 +172,7 @@ "react-native-markdown-display": "^7.0.0-alpha.2", "react-native-mmkv": "^2.11.0", "react-native-pager-view": "^6.2.0", - "react-native-paper": "^4.12.0", + "react-native-paper": "4.12.8", "react-native-permissions": "^3.8.0", "react-native-qrcode-svg": "6.0.6", "react-native-quick-base64": "^2.0.6", diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx index d969142c1d..4154d6732f 100644 --- a/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx +++ b/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx @@ -61,6 +61,8 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For autoFocus, selectTextOnAutoFocus, isValidPhrase = false, + cursorColor, + selectionColor, ...restProps } = props @@ -148,7 +150,12 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For error={errorTextEnabled && !isEmptyString(errorText)} render={({style, ...inputProps}) => ( - + )} onBlur={(e) => { diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx index fdb6b7cbcc..fc9c1d7fd3 100644 --- a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx +++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx @@ -220,7 +220,7 @@ const MnemonicWordInput = React.forwardRef { const inputRef = React.useRef(null) - const {styles} = useStyles() + const {styles, colors} = useStyles() const [word, setWord] = React.useState(selectedWord) React.useImperativeHandle( @@ -300,6 +300,8 @@ const MnemonicWordInput = React.forwardRef setSuggestedWords([])} + cursorColor={colors.primary[600]} // only works for android + selectionColor={Platform.OS === 'android' ? colors.gray[100] : undefined} // on ios, selectionColor changes cursor and selection keyboardType={Platform.OS === 'android' ? 'visible-password' : undefined} // to hide keyboard suggestions on android /> ) @@ -322,7 +324,10 @@ const useAutoFocus = (ref: React.RefObject) => }, [ref]) const useStyles = () => { - const {theme} = useTheme() + const { + theme: {color, padding, typography}, + } = useTheme() + const styles = StyleSheet.create({ mnemonicInputView: { flexDirection: 'row', @@ -334,8 +339,8 @@ const useStyles = () => { alignItems: 'center', justifyContent: 'space-evenly', width: '50%', - ...theme.padding['x-xs'], - ...theme.padding['y-xxs'], + ...padding['x-xs'], + ...padding['y-xxs'], }, textInput: { minWidth: 143, @@ -343,8 +348,8 @@ const useStyles = () => { textAlign: 'center', }, mnemonicIndex: { - color: theme.color.primary[400], - ...theme.typography['body-1-l-regular'], + color: color.primary[400], + ...typography['body-1-l-regular'], }, textView: { flexDirection: 'row', @@ -352,19 +357,19 @@ const useStyles = () => { alignItems: 'center', }, errorText: { - ...theme.typography['body-1-l-regular'], - color: theme.color.magenta[500], + ...typography['body-1-l-regular'], + color: color.magenta[500], }, successText: { - ...theme.typography['body-1-l-medium'], - color: theme.color.gray.max, + ...typography['body-1-l-medium'], + color: color.gray.max, }, clearAll: { - ...theme.typography['button-2-m'], - ...theme.padding['l-s'], - color: theme.color.primary[500], + ...typography['button-2-m'], + ...padding['l-s'], + color: color.primary[500], textTransform: 'uppercase', }, }) - return {styles} as const + return {styles, colors: color} as const } diff --git a/yarn.lock b/yarn.lock index 2ff7ee7a97..9a003bca20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2373,9 +2373,9 @@ integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== "@callstack/react-theme-provider@^3.0.7": - version "3.0.8" - resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50" - integrity sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q== + version "3.0.9" + resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz#01035fa1231f1fffc1a806be1b55eb82716e80c1" + integrity sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA== dependencies: deepmerge "^3.2.0" hoist-non-react-statics "^3.3.0" @@ -19868,10 +19868,10 @@ react-native-pager-view@^6.2.0: resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz#51380d93fbe47f6380dc71d613a787bf27a4ca37" integrity sha512-pf9OnL/Tkr+5s4Gjmsn7xh91PtJLDa6qxYa/bmtUhd/+s4cQdWQ8DIFoOFghwZIHHHwVdWtoXkp6HtpjN+r20g== -react-native-paper@^4.12.0: - version "4.12.5" - resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.5.tgz#5ea4bbe02d416d17802a199de748700358c11d3a" - integrity sha512-gdUtJJf0bw/0xoCE1jR6qCQiQCQZ9ivZh0lbPghFFaGxX88WtTQpusnGON8WhLPeH5odEQ4dTBu99lnIQvSFow== +react-native-paper@4.12.8: + version "4.12.8" + resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.8.tgz#54be07cf5ff71cd2a06374aeae29abf2ac354317" + integrity sha512-jYpiaHY6KxiYuKuznN1zn7OF69BH9aUrIxUsB9A0jsK+fXpL6Z5aia2CBeG8aRBZI+R/2FN3b7/EAEJC/Cm3Lw== dependencies: "@callstack/react-theme-provider" "^3.0.7" color "^3.1.2"