Merge pull request #1795 from kaloudis/seed-columns-fix

[Display bug] Seed: explicitly create two columns
ZeusLN · Oct 28, 2023 · 4d3b65f · 4d3b65f
2 parents 1cec3f0 + 2615e07
commit 4d3b65f
Showing 1 changed file with 33 additions and 19 deletions.
diff --git a/views/Settings/Seed.tsx b/views/Settings/Seed.tsx
@@ -43,10 +43,10 @@ const MnemonicWord = ({ index, word }) => {
             style={{
                 padding: 8,
                 backgroundColor: themeColor('secondary'),
-                width: '45%',
                 borderRadius: 5,
-                margin: 9,
+                margin: 6,
                 marginTop: 4,
+                marginBottom: 4,
                 flexDirection: 'row'
             }}
         >
@@ -71,6 +71,7 @@ const MnemonicWord = ({ index, word }) => {
                     fontSize: 18,
                     alignSelf: 'flex-end',
                     margin: 0,
+                    marginLeft: 10,
                     padding: 0
                 }}
             >
@@ -270,40 +271,45 @@ export default class Seed extends React.PureComponent<SeedProps, SeedState> {
                         <ScrollView
                             contentContainerStyle={{
                                 flexGrow: 1,
-                                justifyContent: 'center'
+                                flexDirection: 'row'
                             }}
                         >
-                            <View
-                                style={{
-                                    marginTop: 8,
-                                    maxHeight: 620,
-                                    flexWrap: 'wrap',
-                                    alignItems: 'flex-start',
-                                    alignSelf: 'center',
-                                    flexDirection: 'column'
-                                }}
-                            >
+                            <View style={styles.column}>
                                 {seedPhrase &&
-                                    seedPhrase.map(
-                                        (word: string, index: number) => {
+                                    seedPhrase
+                                        .slice(0, 12)
+                                        .map((word: string, index: number) => {
                                             return (
                                                 <MnemonicWord
                                                     index={index}
                                                     word={word}
                                                     key={`mnemonic-${index}`}
                                                 />
                                             );
-                                        }
-                                    )}
+                                        })}
+                            </View>
+                            <View style={styles.column}>
+                                {seedPhrase &&
+                                    seedPhrase
+                                        .slice(12, 24)
+                                        .map((word: string, index: number) => {
+                                            return (
+                                                <MnemonicWord
+                                                    index={index + 12}
+                                                    word={word}
+                                                    key={`mnemonic-${index}`}
+                                                />
+                                            );
+                                        })}
                             </View>
                         </ScrollView>
                         <View
                             style={{
                                 alignSelf: 'center',
                                 marginTop: 45,
                                 bottom: 35,
-                                width: '100%',
-                                backgroundColor: themeColor('background')
+                                backgroundColor: themeColor('background'),
+                                width: '100%'
                             }}
                         >
                             <Button
@@ -364,5 +370,13 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
         marginTop: 22
+    },
+    column: {
+        marginTop: 8,
+        flexWrap: 'wrap',
+        alignItems: 'flex-start',
+        alignSelf: 'center',
+        flexDirection: 'column',
+        width: '50%'
     }
 });