Improved profile display and added new translations

components/Sidebar.js

@@ -49,7 +49,7 @@ class SideBar extends React.PureComponent<Props, State> {
                 icon: "home",
             },
             {
-                name: "AMICALE",
+                name: i18n.t('sidenav.divider4'),
                 route: "Divider4"
             },
             {

screens/Amicale/ProfileScreen.js

@@ -101,22 +101,10 @@ class ProfileScreen extends React.Component<Props, State> {
                     <Divider/>
                     <List.Section>
                         <List.Subheader>{i18n.t("profileScreen.personalInformation")}</List.Subheader>
-                        <List.Item
+                        {this.getPersonalListItem(this.data.birthday, "cake-variant")}
-                            title={this.getFieldValue(this.data.birthday)}
+                        {this.getPersonalListItem(this.data.phone, "phone")}
-                            left={props => <List.Icon {...props} icon="cake-variant"/>}
+                        {this.getPersonalListItem(this.data.email, "email")}
-                        />
+                        {this.getPersonalListItem(this.data.branch, "school")}
-                        <List.Item
-                            title={this.getFieldValue(this.data.phone)}
-                            left={props => <List.Icon {...props} icon="phone"/>}
-                        />
-                        <List.Item
-                            title={this.getFieldValue(this.data.email)}
-                            left={props => <List.Icon {...props} icon="email"/>}
-                        />
-                        <List.Item
-                            title={this.getFieldValue(this.data.branch)}
-                            left={props => <List.Icon {...props} icon="school"/>}
-                        />
                     </List.Section>
                     <Divider/>
                     <Card.Actions>
@@ -208,12 +196,36 @@ class ProfileScreen extends React.Component<Props, State> {
         );
     }
 
+    isFieldAvailable(field: ?string) {
+        return field !== null;
+    }
+
     getFieldValue(field: ?string) {
-        return field !== null
+        return this.isFieldAvailable(field)
             ? field
             : i18n.t("profileScreen.noData");
     }
 
+    getFieldColor(field: ?string) {
+        return this.isFieldAvailable(field)
+            ? this.colors.text
+            : this.colors.textDisabled;
+    }
+
+    getPersonalListItem(field: ?string, icon: string) {
+        return (
+            <List.Item
+                title={this.getFieldValue(field)}
+                left={props => <List.Icon
+                    {...props}
+                    icon={icon}
+                    color={this.getFieldColor(field)}
+                />}
+                titleStyle={{color: this.getFieldColor(field)}}
+            />
+        );
+    }
+
     render() {
         return (
             <AuthenticatedScreen

translations/en.json

@@ -20,7 +20,8 @@
   "sidenav": {
     "divider1": "Student websites",
     "divider2": "Services",
-    "divider3": "Personalisation"
+    "divider3": "Personalisation",
+    "divider4": "Amicale"
   },
   "intro": {
     "slide1": {

translations/fr.json

@@ -20,7 +20,8 @@
   "sidenav": {
     "divider1": "Sites étudiants",
     "divider2": "Services",
-    "divider3": "Personnalisation"
+    "divider3": "Personnalisation",
+    "divider4": "Amicale"
   },
   "intro": {
     "slide1": {