update contact row styles

bitpay · Jul 26, 2022 · 6fbd457 · 6fbd457
1 parent 6cb5816
commit 6fbd457
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 49 deletions.
diff --git a/src/components/list/ContactRow.tsx b/src/components/list/ContactRow.tsx
@@ -2,21 +2,22 @@ import React, {memo} from 'react';
 import styled from 'styled-components/native';
 import {useTheme} from 'styled-components/native';
 import {Column} from '../styled/Containers';
-import {H5, SubText} from '../styled/Text';
+import {H5, ListItemSubText} from '../styled/Text';
 import AngleRight from '../../../assets/img/angle-right.svg';
 import ContactIcon from '../../navigation/tabs/contacts/components/ContactIcon';
 
 const ContactContainer = styled.TouchableHighlight`
-  padding: 20px;
+  padding: 10px 0px;
 `;
 
 const ContactColumn = styled(Column)`
-  margin-left: 25px;
+  margin-left: 24px;
+  margin-right: 8px;
 `;
 
 const ContactImageContainer = styled.View`
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
   display: flex;
   justify-content: center;
   align-self: center;
@@ -45,16 +46,18 @@ interface Props {
 const ContactRow = ({contact, onPress}: Props) => {
   const theme = useTheme();
   const underlayColor = theme.dark ? '#121212' : '#fbfbff';
-  const {coin, name, email} = contact;
+  const {coin, name, email, address} = contact;
   return (
     <ContactContainer underlayColor={underlayColor} onPress={onPress}>
       <RowContainer>
         <ContactImageContainer>
-          <ContactIcon name={name} coin={coin} />
+          <ContactIcon name={name} coin={coin} size={45} />
         </ContactImageContainer>
         <ContactColumn>
           <H5>{name}</H5>
-          {email ? <SubText>{email}</SubText> : null}
+          <ListItemSubText numberOfLines={1} ellipsizeMode={'tail'}>
+            {email ? email : address}
+          </ListItemSubText>
         </ContactColumn>
         <AngleRight />
       </RowContainer>

diff --git a/src/components/list/SettingsContactRow.tsx b/src/components/list/SettingsContactRow.tsx
@@ -4,7 +4,7 @@ import {Column, Setting} from '../styled/Containers';
 import {H7, Smallest} from '../styled/Text';
 import AngleRight from '../../../assets/img/angle-right.svg';
 import ContactIcon from '../../navigation/tabs/contacts/components/ContactIcon';
-import {SlateDark, White} from '../../styles/colors';
+import {LuckySevens, SlateDark} from '../../styles/colors';
 import {ContactRowProps} from './ContactRow';
 
 const ContactColumn = styled(Column)`
@@ -26,7 +26,7 @@ const RowContainer = styled.View`
 `;
 
 const ContactsSubtext = styled(Smallest)`
-  color: ${({theme: {dark}}) => (dark ? White : SlateDark)};
+  color: ${({theme: {dark}}) => (dark ? LuckySevens : SlateDark)};
 `;
 
 interface Props {
@@ -44,7 +44,9 @@ const SettingsContactRow = ({contact, onPress}: Props) => {
         </ContactImageContainer>
         <ContactColumn>
           <H7 medium={true}>{name}</H7>
-          <ContactsSubtext>{email ? email : address}</ContactsSubtext>
+          <ContactsSubtext numberOfLines={1} ellipsizeMode={'tail'}>
+            {email ? email : address}
+          </ContactsSubtext>
         </ContactColumn>
         <AngleRight />
       </RowContainer>

diff --git a/src/components/styled/Containers.tsx b/src/components/styled/Containers.tsx
@@ -97,7 +97,7 @@ export const RowContainer = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   margin: 10px 0;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
 `;
 
 export const CurrencyColumn = styled(Column)`

diff --git a/src/navigation/tabs/contacts/screens/ContactsRoot.tsx b/src/navigation/tabs/contacts/screens/ContactsRoot.tsx
@@ -3,7 +3,7 @@ import {useTranslation} from 'react-i18next';
 import debounce from 'lodash.debounce';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import styled, {useTheme} from 'styled-components/native';
-import {TouchableOpacity, FlatList} from 'react-native';
+import {TouchableOpacity, FlatList, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {useForm, Controller} from 'react-hook-form';
 import {useNavigation} from '@react-navigation/core';
@@ -170,15 +170,17 @@ const ContactsRoot: React.FC = () => {
 
   const renderItem = useCallback(
     ({item}) => (
-      <ContactRow
-        contact={item}
-        onPress={() => {
-          navigation.navigate('Contacts', {
-            screen: 'ContactsDetails',
-            params: {contact: item},
-          });
-        }}
-      />
+      <View style={{paddingHorizontal: 10}}>
+        <ContactRow
+          contact={item}
+          onPress={() => {
+            navigation.navigate('Contacts', {
+              screen: 'ContactsDetails',
+              params: {contact: item},
+            });
+          }}
+        />
+      </View>
     ),
     [navigation],
   );

diff --git a/src/navigation/tabs/settings/general/screens/LanguageSettings.tsx b/src/navigation/tabs/settings/general/screens/LanguageSettings.tsx
@@ -13,7 +13,7 @@ import {AppActions} from '../../../../../store/app';
 import {Analytics} from '../../../../../store/app/app.effects';
 import {useAppDispatch, useAppSelector} from '../../../../../utils/hooks';
 import {Settings, SettingsContainer} from '../../SettingsRoot';
-import {LanguageList} from "../../../../../constants/LanguageSelectionList";
+import {LanguageList} from '../../../../../constants/LanguageSelectionList';
 
 const LanguageSettingsScreen: React.VFC = () => {
   const dispatch = useAppDispatch();

diff --git a/src/navigation/wallet/screens/send/SendTo.tsx b/src/navigation/wallet/screens/send/SendTo.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useLayoutEffect, useState} from 'react';
+import React, {useEffect, useLayoutEffect, useMemo, useState} from 'react';
 import {BaseText, HeaderTitle, Link} from '../../../../components/styled/Text';
 import {useNavigation, useRoute, useTheme} from '@react-navigation/native';
 import styled from 'styled-components/native';
@@ -75,11 +75,11 @@ import {APP_NAME_UPPERCASE} from '../../../../constants/config';
 import {GetChain, IsUtxoCoin} from '../../../../store/wallet/utils/currency';
 import {goToAmount, incomingData} from '../../../../store/scan/scan.effects';
 import {useTranslation} from 'react-i18next';
-import SettingsContactRow from '../../../../components/list/SettingsContactRow';
 import {toFiat} from '../../../../store/wallet/utils/wallet';
 import Settings from '../../../../components/settings/Settings';
 import OptionsSheet, {Option} from '../../components/OptionsSheet';
 import Icons from '../../components/WalletIcons';
+import ContactRow from '../../../../components/list/ContactRow';
 
 const ValidDataTypes: string[] = [
   'BitcoinAddress',
@@ -283,13 +283,15 @@ const SendTo = () => {
     dispatch,
   );
 
-  const contacts = allContacts.filter(
-    contact =>
-      contact.coin === currencyAbbreviation.toLowerCase() &&
-      contact.network === network &&
-      (contact.name.toLowerCase().includes(searchInput.toLowerCase()) ||
-        contact.email?.toLowerCase().includes(searchInput.toLowerCase())),
-  );
+  const contacts = useMemo(() => {
+    return allContacts.filter(
+      contact =>
+        contact.coin === currencyAbbreviation.toLowerCase() &&
+        contact.network === network &&
+        (contact.name.toLowerCase().includes(searchInput.toLowerCase()) ||
+          contact.email?.toLowerCase().includes(searchInput.toLowerCase())),
+    );
+  }, [allContacts, currencyAbbreviation, network, searchInput]);
 
   const onErrorMessageDismiss = () => {
     setSearchInput('');
@@ -534,24 +536,27 @@ const SendTo = () => {
 
             {contacts.map((item, index) => {
               return (
-                <SendContactRow key={index}>
-                  <SettingsContactRow
-                    contact={item}
-                    onPress={() => {
-                      try {
-                        if (item) {
-                          validateAndNavigateToConfirm(
-                            item.address,
-                            'contact',
-                            item.name,
-                          );
-                        }
-                      } catch (err) {
-                        console.log(err);
+                <ContactRow
+                  key={index}
+                  contact={item}
+                  onPress={() => {
+                    try {
+                      if (item) {
+                        validateAndNavigateToConfirm(
+                          item.address,
+                          'contact',
+                          item.name,
+                        );
                       }
-                    }}
-                  />
-                </SendContactRow>
+                    } catch (err) {
+                      const errString =
+                        err instanceof Error
+                          ? err.message
+                          : JSON.stringify(err);
+                      logger.error(`Send To [Contacts]: ${errString}`);
+                    }
+                  }}
+                />
               );
             })}
           </>