fix(rn): style for contact

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Mar 21, 2019 · e195304 · e195304
1 parent 71bda4e
commit e195304
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 93 deletions.
diff --git a/client/react-native/common/components/Screens/Chats/Add.js b/client/react-native/common/components/Screens/Chats/Add.js
@@ -4,88 +4,83 @@ import I18n from 'i18next'
 import React, { Component, PureComponent } from 'react'
 
 import { Pagination, RelayContext } from '../../../relay'
-import {
-  Screen,
-  Flex,
-  Text,
-  Header,
-  Avatar,
-  SearchBar,
-} from '../../Library'
-import {
-  border,
-  borderBottom,
-  marginHorizontal,
-  padding,
-} from '../../../styles'
+import { Screen, Flex, Text, Header, Avatar, SearchBar } from '../../Library'
+import { border, borderBottom, marginLeft, padding } from '../../../styles'
 import { colors } from '../../../constants'
-import { fragments } from '../../../graphql'
+import { enums, fragments } from '../../../graphql'
 import withRelayContext from '../../../helpers/withRelayContext'
 
-const Item = fragments.Contact(
-  class Item extends PureComponent {
-    state = { selected: false }
+const Item = withNamespaces()(
+  fragments.Contact(
+    class Item extends PureComponent {
+      state = { selected: false }
 
-    onPress = () => {
-      this.setState({ selected: !this.state.selected }, this.props.onPress)
-    }
-
-    render () {
-      const {
-        data: { status, displayName, overrideDisplayName, displayStatus },
-      } = this.props
-      const { selected } = this.state
-
-      if (status === 42) {
-        return null
+      onPress = () => {
+        this.setState({ selected: !this.state.selected }, this.props.onPress)
       }
 
-      return (
-        <Flex.Cols
-          align='start'
-          onPress={this.onPress}
-          style={[
-            {
-              backgroundColor: colors.white,
-              paddingVertical: 16,
-              height: 71,
-            },
-            marginHorizontal,
-            borderBottom,
-          ]}
-        >
-          <Flex.Rows size={1} align='start'>
-            <Avatar data={this.props.data} size={40} />
-          </Flex.Rows>
-          <Flex.Rows size={6} align='start' style={{ marginLeft: 14 }}>
-            <Text color={colors.black} left middle>
-              {(status === 42 && 'Myself') ||
-                overrideDisplayName ||
-                displayName}
-            </Text>
-            <Text color={colors.subtleGrey} tiny>
-              {displayStatus}
-            </Text>
-          </Flex.Rows>
-          <Flex.Rows align='end' self='center'>
-            <View
-              style={[
-                selected ? null : border,
-                {
-                  height: 18,
-                  width: 18,
-                  backgroundColor: selected ? colors.blue : colors.white,
-                  borderRadius: 9,
-                },
-              ]}
-            >
-              <Text icon='check' padding middle center color={colors.white} />
-            </View>
-          </Flex.Rows>
-        </Flex.Cols>
-      )
+      render () {
+        const {
+          data: { status, displayName, overrideDisplayName },
+          t,
+        } = this.props
+        const { selected } = this.state
+
+        if (status === 42) {
+          return null
+        }
+
+        return (
+          <Flex.Cols
+            align='center'
+            onPress={this.onPress}
+            style={[
+              {
+                height: 72,
+              },
+              padding,
+              borderBottom,
+            ]}
+          >
+            <Flex.Cols size={1} align='center'>
+              <Avatar data={this.props.data} size={40} />
+              <Flex.Rows size={3} justify='start' style={[marginLeft]}>
+                <Text color={colors.fakeBlack} left ellipsed>
+                  {overrideDisplayName || displayName}
+                </Text>
+                <Text color={colors.subtleGrey} left ellisped tiny>
+                  {t(
+                    'contacts.statuses.' +
+                      enums.ValueBertyEntityContactInputStatus[status]
+                  )}
+                </Text>
+              </Flex.Rows>
+            </Flex.Cols>
+            <Flex.Rows align='end' self='center'>
+              <View
+                style={[
+                  selected ? null : border,
+                  {
+                    height: 18,
+                    width: 18,
+                    backgroundColor: selected ? colors.blue : colors.background,
+                    borderRadius: 9,
+                  },
+                ]}
+              >
+                <Text
+                  icon='check'
+                  middle
+                  center
+                  color={selected ? colors.white : colors.background}
+                />
+              </View>
+            </Flex.Rows>
+          </Flex.Cols>
+        )
+      }
     }
-  }
+  )
 )
 
 class ListScreen extends Component {
@@ -160,9 +155,7 @@ class ListScreen extends Component {
 
   render () {
     const { contactsID } = this.state
-    const {
-      context,
-    } = this.props
+    const { context } = this.props
     return (
       <Screen style={[{ backgroundColor: colors.white }]}>
         <Pagination
@@ -173,7 +166,11 @@ class ListScreen extends Component {
           alias='ContactList'
           ListHeaderComponent={
             <View style={padding}>
-              <SearchBar onChangeText={() => { console.warn('not implemented') }} />
+              <SearchBar
+                onChangeText={() => {
+                  console.warn('not implemented')
+                }}
+              />
             </View>
           }
           renderItem={props =>

diff --git a/client/react-native/common/components/Screens/Contacts/List/Item.js b/client/react-native/common/components/Screens/Contacts/List/Item.js
@@ -62,30 +62,26 @@ const Item = fragments.Contact(
           style={[{ height: 72 }, padding, borderBottom]}
           onPress={() => this.showDetails()}
         >
-          <Flex.Cols size={1}>
-            <Flex.Rows size={1} align='center'>
-              <Avatar data={data} size={40} />
-            </Flex.Rows>
+          <Flex.Cols size={1} align='center'>
+            <Avatar data={data} size={40} />
             <Flex.Rows size={3} justify='start' style={[marginLeft]}>
-              <Text color={colors.fakeBlack} left>
+              <Text color={colors.fakeBlack} left ellipsed>
                 {overrideDisplayName || displayName}
               </Text>
-              <Text color={colors.subtleGrey} left>
+              <Text color={colors.subtleGrey} left ellipsed tiny>
                 {t(
                   'contacts.statuses.' +
                     enums.ValueBertyEntityContactInputStatus[status]
                 )}
               </Text>
             </Flex.Rows>
           </Flex.Cols>
-          <Flex.Rows size={1} align='end'>
-            {status === enums.BertyEntityContactInputStatus.RequestedMe && (
-              <ActionsReceived data={data} />
-            )}
-            {status === enums.BertyEntityContactInputStatus.IsRequested && (
-              <ActionsSent data={data} />
-            )}
-          </Flex.Rows>
+          {status === enums.BertyEntityContactInputStatus.RequestedMe && (
+            <ActionsReceived data={data} />
+          )}
+          {status === enums.BertyEntityContactInputStatus.IsRequested && (
+            <ActionsSent data={data} />
+          )}
         </Flex.Cols>
       )
     }