localization and UI tweaks

ZeusLN · Mar 7, 2024 · 8bfebd8 · 8bfebd8
1 parent baa2efd
commit 8bfebd8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/components/WalletHeader.tsx b/components/WalletHeader.tsx
@@ -47,8 +47,6 @@ import stores from '../stores/Stores';
 import { Body } from './text/Body';
 import { Row } from '../components/layout/Row';
 
-const Contact = require('../assets/images/Mascot.png');
-
 const TorIcon = require('../assets/images/tor.png');
 
 const Mailbox = () => (

diff --git a/locales/en.json b/locales/en.json
@@ -852,6 +852,8 @@
     "views.Settings.Contacts.noAddress": "No Address",
     "views.Settings.Contacts.to": "To",
     "views.Settings.Contacts.deleteAllContacts": "Delete all contacts",
+    "views.SelectNodeProfile.selectProfilePicture": "Select Profile Picture",
+    "views.SelectNodeProfile.uploadPicture": "Upload picture",
     "views.Transaction.title": "Transaction",
     "views.Transaction.totalFees": "Total Fees",
     "views.Transaction.transactionHash": "Transaction Hash",

diff --git a/views/Settings/SelectNodeProfile.tsx b/views/Settings/SelectNodeProfile.tsx
@@ -6,7 +6,8 @@ import {
     Image,
     StyleSheet,
     FlatList,
-    Dimensions
+    Dimensions,
+    ScrollView
 } from 'react-native';
 import { Avatar } from 'react-native-elements';
 import { launchImageLibrary } from 'react-native-image-picker';
@@ -19,6 +20,8 @@ import Screen from '../../components/Screen';
 import Header from '../../components/Header';
 import Button from '../../components/Button';
 
+import { localeString } from '../../utils/LocaleUtils';
+
 interface SelectNodeProfileProps {
     navigation: any;
 }
@@ -51,7 +54,7 @@ export default class SelectNodeProfile extends React.Component<
                 require('../../assets/images/zeus-illustration-7a.jpg'),
                 require('../../assets/images/zeus-illustration-7b.jpg')
             ],
-            photo: null
+            photo: ''
         };
     }
 
@@ -144,7 +147,9 @@ export default class SelectNodeProfile extends React.Component<
                 <Header
                     leftComponent="Back"
                     centerComponent={{
-                        text: 'Select Profile Picture',
+                        text: localeString(
+                            'views.SelectNodeProfile.selectProfilePicture'
+                        ),
                         style: {
                             color: themeColor('text'),
                             fontFamily: 'PPNeueMontreal-Book'
@@ -159,7 +164,13 @@ export default class SelectNodeProfile extends React.Component<
                     }}
                 >
                     <TouchableOpacity onPress={this.selectPhoto}>
-                        <View style={styles.photoContainer}>
+                        <View
+                            style={{
+                                ...styles.photoContainer,
+                                backgroundColor: themeColor('secondaryText'),
+                                borderColor: themeColor('separator')
+                            }}
+                        >
                             {photo ? (
                                 <Image
                                     source={{ uri: this.getPhoto(photo) }}
@@ -171,39 +182,50 @@ export default class SelectNodeProfile extends React.Component<
                         </View>
                     </TouchableOpacity>
                 </View>
-                <FlatList
-                    data={this.state.images}
-                    renderItem={({ item }) => (
-                        <TouchableOpacity
-                            onPress={() => this.handleImageTap(item)}
-                        >
-                            <View style={styles.avatarContainer}>
-                                <Avatar
-                                    rounded
-                                    size={
-                                        Dimensions.get('window').width / 3 - 20
-                                    }
-                                    source={item}
-                                />
-                            </View>
-                        </TouchableOpacity>
-                    )}
-                    numColumns={3}
-                    keyExtractor={(item, index) => index.toString()}
-                    contentContainerStyle={{
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        paddingVertical: 20
-                    }}
-                />
+                <ScrollView style={{ marginVertical: 10 }}>
+                    <FlatList
+                        data={this.state.images}
+                        renderItem={({ item }) => (
+                            <TouchableOpacity
+                                onPress={() => this.handleImageTap(item)}
+                            >
+                                <View
+                                    style={{
+                                        ...styles.avatarContainer,
+                                        backgroundColor:
+                                            themeColor('secondaryText')
+                                    }}
+                                >
+                                    <Avatar
+                                        rounded
+                                        size={
+                                            Dimensions.get('window').width / 3 -
+                                            20
+                                        }
+                                        source={item}
+                                    />
+                                </View>
+                            </TouchableOpacity>
+                        )}
+                        numColumns={3}
+                        keyExtractor={(item, index) => index.toString()}
+                        contentContainerStyle={{
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                        }}
+                    />
+                </ScrollView>
 
                 <Button
-                    title="Upload picture"
+                    title={localeString(
+                        'views.SelectNodeProfile.uploadPicture'
+                    )}
                     onPress={() => {
                         navigation.navigate('NodeConfiguration', {
                             photo
                         });
                     }}
+                    containerStyle={{ paddingBottom: 10 }}
                 />
             </Screen>
         );
@@ -212,13 +234,11 @@ export default class SelectNodeProfile extends React.Component<
 
 const styles = StyleSheet.create({
     photoContainer: {
-        backgroundColor: themeColor('secondaryText'),
         width: 136,
         height: 136,
         borderRadius: 68,
         justifyContent: 'center',
         alignItems: 'center',
-        borderColor: themeColor('separator'),
         borderWidth: 4
     },
     photo: {
@@ -228,7 +248,6 @@ const styles = StyleSheet.create({
         borderRadius: 68
     },
     avatarContainer: {
-        backgroundColor: themeColor('secondaryText'),
         margin: 8,
         borderRadius: 68
     }