fix: change styles

rsksmart · Feb 25, 2022 · 4f9d1cd · 4f9d1cd
1 parent c54a71e
commit 4f9d1cd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/ux/createKeys/new/ConfirmNewMasterKeyScreen.tsx b/src/ux/createKeys/new/ConfirmNewMasterKeyScreen.tsx
@@ -13,6 +13,7 @@ import { SquareButton } from '../../../components/button/SquareButton'
 import { Arrow } from '../../../components/icons'
 import { getTokenColor } from '../../../screens/home/tokenColor'
 import { WordInput } from './WordInput'
+import { colors } from '../../../styles/colors'
 
 interface ConfirmMasterKeyScreenProps {
   createFirstWallet: CreateKeysProps['createFirstWallet']
@@ -43,16 +44,18 @@ export const ConfirmNewMasterKeyScreen: React.FC<
   const mnemonic = route.params.mnemonic
   const [selectedWords, setSelectedWords] = useState<string[]>([])
   const [words, setWords] = useState<string[]>(shuffle(mnemonic.split(' ')))
+
+  //TODO: create "three column grid" component
   const rows = [1, 2, 3, 4, 5, 6, 7, 8]
 
   const { t } = useTranslation()
 
   const [error, setError] = useState<string | null>(null)
   const selectWord = (selectedWord: string) => {
     setError(null)
-    const a = [...selectedWords, selectedWord]
-    setSelectedWords(a)
-    setWords(words.filter(word => !a.find(w => w === word)))
+    const updatedWords = [...selectedWords, selectedWord]
+    setSelectedWords(updatedWords)
+    setWords(words.filter(word => !updatedWords.find(w => w === word)))
   }
   const saveAndNavigate = async () => {
     const rifWallet = await createFirstWallet(mnemonic)
@@ -77,13 +80,13 @@ export const ConfirmNewMasterKeyScreen: React.FC<
 
       {rows.map(row => (
         <View style={grid.row}>
-          <WordInput index={row} initValue={selectedWords[row - 1]} />
+          <WordInput wordNumber={row} initValue={selectedWords[row - 1]} />
           <WordInput
-            index={row + rows.length}
+            wordNumber={row + rows.length}
             initValue={selectedWords[row + rows.length - 1]}
           />
           <WordInput
-            index={row + rows.length * 2}
+            wordNumber={row + rows.length * 2}
             initValue={selectedWords[row + rows.length * 2 - 1]}
           />
           <Text>{row + rows.length}</Text>
@@ -115,10 +118,10 @@ export const ConfirmNewMasterKeyScreen: React.FC<
 
 const styles = StyleSheet.create({
   defaultText: {
-    color: '#ffffff',
+    color: colors.white,
   },
   parent: {
-    backgroundColor: '#050134',
+    backgroundColor: colors.darkBlue,
   },
 
   badgeArea: {
@@ -132,15 +135,15 @@ const styles = StyleSheet.create({
     marginVertical: 1,
   },
   badgeText: {
-    backgroundColor: 'rgba(219, 227, 255, 0.3)',
-    color: '#ffffff',
+    backgroundColor: colors.purple,
+    color: colors.white,
     borderRadius: 30,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 
   header: {
-    color: '#ffffff',
+    color: colors.white,
     fontSize: 22,
     paddingVertical: 20,
     textAlign: 'center',

diff --git a/src/ux/createKeys/new/WordInput.tsx b/src/ux/createKeys/new/WordInput.tsx
@@ -4,23 +4,23 @@ import { grid } from '../../../styles/grid'
 import { StyleSheet, View, Text, TextInput } from 'react-native'
 
 export const WordInput: React.FC<{
-  index: number
+  wordNumber: number
   initValue: string
-}> = ({ index, initValue }) => {
+}> = ({ wordNumber, initValue }) => {
   return (
     <View
       style={{
         ...grid.column4,
         ...styles.wordContainer,
       }}>
-      <Text style={styles.wordIndex}>{index}. </Text>
+      <Text style={styles.wordNumber}>{wordNumber}. </Text>
       {initValue ? (
         <View style={styles.wordContent}>
           <Text style={styles.wordText}>{initValue}</Text>
         </View>
       ) : (
         <TextInput
-          key={index}
+          key={wordNumber}
           style={styles.wordInput}
           value={initValue}
           placeholder=""
@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
     color: '#ffffff',
     fontSize: 14,
   },
-  wordIndex: {
+  wordNumber: {
     color: '#ffffff',
     display: 'flex',
     paddingVertical: 4,