fix(setup-wallet): mnemonic input cursor and selection colors (#3249)

Emurgo · May 9, 2024 · 0de781e · 0de781e
1 parent 5787cf2
commit 0de781e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git 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
@@ -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}) => (
           <InputContainer>
-            <RNTextInput {...inputProps} style={[style, renderComponentStyle, {color: colors.text, flex: 1}]} />
+            <RNTextInput
+              {...inputProps}
+              cursorColor={cursorColor}
+              selectionColor={selectionColor}
+              style={[style, renderComponentStyle, {color: colors.text, flex: 1}]}
+            />
           </InputContainer>
         )}
         onBlur={(e) => {

diff --git a/...et-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx b/...et-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx
@@ -220,7 +220,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
     ref,
   ) => {
     const inputRef = React.useRef<RNTextInput>(null)
-    const {styles} = useStyles()
+    const {styles, colors} = useStyles()
     const [word, setWord] = React.useState(selectedWord)
 
     React.useImperativeHandle(
@@ -300,6 +300,8 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
           }
         }}
         onBlur={() => 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<MnemonicWordInputRef>) =>
   }, [ref])
 
 const useStyles = () => {
-  const {theme} = useTheme()
+  const {
+    theme: {color, padding, typography},
+  } = useTheme()
+
   const styles = StyleSheet.create({
     mnemonicInputView: {
       flexDirection: 'row',
@@ -334,37 +339,37 @@ 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,
       flex: 1,
       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',
       gap: 8,
       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
@@ -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==
+[email protected].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"