UI updates for contacts Page (#19646)

* updated contacts flow update

* json file updates

* updated contacts edit and view list

* keep contacts tab selected

* lint fix

* replaced hardcoded strings with constant

* updated padding in box

app/_locales/am/messages.json

@@ -202,9 +202,6 @@
   "delete": {
     "message": "ሰርዝ"
   },
-  "deleteAccount": {
-    "message": "መለያን ሰርዝ"
-  },
   "deleteNetwork": {
     "message": "አውታረ መረብ ይሰረዝ?"
   },

app/_locales/ar/messages.json

@@ -215,9 +215,6 @@
   "delete": {
     "message": "حذف"
   },
-  "deleteAccount": {
-    "message": "حذف الحساب"
-  },
   "deleteNetwork": {
     "message": "هل تريد حذف الشبكة؟"
   },

app/_locales/bg/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Изтриване"
   },
-  "deleteAccount": {
-    "message": "Изтриване на акаунт"
-  },
   "deleteNetwork": {
     "message": "Да се изтрие ли мрежата?"
   },

app/_locales/bn/messages.json

@@ -208,9 +208,6 @@
   "delete": {
     "message": "মুছুন"
   },
-  "deleteAccount": {
-    "message": "অ্যাকাউন্ট মুছুন"
-  },
   "deleteNetwork": {
     "message": "নেটওয়ার্ক মুছবেন?"
   },

app/_locales/ca/messages.json

@@ -208,9 +208,6 @@
   "delete": {
     "message": "Suprimeix"
   },
-  "deleteAccount": {
-    "message": "Elimina el compte"
-  },
   "deleteNetwork": {
     "message": "Esborrar Xarxa?"
   },

app/_locales/da/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Slet"
   },
-  "deleteAccount": {
-    "message": "Slet konto"
-  },
   "deleteNetwork": {
     "message": "Slet Netværk?"
   },

app/_locales/de/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Löschen"
   },
-  "deleteAccount": {
-    "message": "Konto löschen"
-  },
   "deleteNetwork": {
     "message": "Netzwerk löschen?"
   },

app/_locales/el/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Διαγραφή"
   },
-  "deleteAccount": {
-    "message": "Διαγραφή Λογαριασμού"
-  },
   "deleteNetwork": {
     "message": "Διαγραφή Δικτύου;"
   },

app/_locales/en/messages.json

@@ -1101,8 +1101,8 @@
   "delete": {
     "message": "Delete"
   },
-  "deleteAccount": {
-    "message": "Delete account"
+  "deleteContact": {
+    "message": "Delete contact"
   },
   "deleteNetwork": {
     "message": "Delete network?"

app/_locales/es/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Eliminar"
   },
-  "deleteAccount": {
-    "message": "Eliminar cuenta"
-  },
   "deleteNetwork": {
     "message": "¿Eliminar red?"
   },

app/_locales/es_419/messages.json

@@ -581,9 +581,6 @@
   "delete": {
     "message": "Eliminar"
   },
-  "deleteAccount": {
-    "message": "Eliminar cuenta"
-  },
   "deleteNetwork": {
     "message": "¿Eliminar red?"
   },

app/_locales/et/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Kustuta"
   },
-  "deleteAccount": {
-    "message": "Kustuta konto"
-  },
   "deleteNetwork": {
     "message": "Võrk kustutada?"
   },

app/_locales/fa/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "حذف"
   },
-  "deleteAccount": {
-    "message": "حذف حساب"
-  },
   "deleteNetwork": {
     "message": "شبکه حذف شود؟"
   },

app/_locales/fi/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Poista"
   },
-  "deleteAccount": {
-    "message": "Poista tili"
-  },
   "deleteNetwork": {
     "message": "Poistetaanko verkko?"
   },

app/_locales/fil/messages.json

@@ -187,9 +187,6 @@
   "delete": {
     "message": "I-delete"
   },
-  "deleteAccount": {
-    "message": "I-delete ang Account"
-  },
   "deleteNetwork": {
     "message": "I-delete ang Network?"
   },

app/_locales/fr/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Supprimer"
   },
-  "deleteAccount": {
-    "message": "Supprimer le compte"
-  },
   "deleteNetwork": {
     "message": "Supprimer le réseau ?"
   },

app/_locales/he/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "מחיקה"
   },
-  "deleteAccount": {
-    "message": "מחק חשבון"
-  },
   "deleteNetwork": {
     "message": "למחוק את הרשת?"
   },

app/_locales/hi/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "हटाएँ"
   },
-  "deleteAccount": {
-    "message": "अकाउंट हटाएं"
-  },
   "deleteNetwork": {
     "message": "नेटवर्क हटाएं?"
   },

app/_locales/hr/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Izbriši"
   },
-  "deleteAccount": {
-    "message": "Izbriši račun"
-  },
   "deleteNetwork": {
     "message": "Izbrisati mrežu?"
   },

app/_locales/hu/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Törlés"
   },
-  "deleteAccount": {
-    "message": "Fiók törlése"
-  },
   "deleteNetwork": {
     "message": "Törli a hálózatot?"
   },

app/_locales/id/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Hapus"
   },
-  "deleteAccount": {
-    "message": "Hapus akun"
-  },
   "deleteNetwork": {
     "message": "Hapus jaringan?"
   },

app/_locales/it/messages.json

@@ -716,9 +716,6 @@
   "delete": {
     "message": "Elimina"
   },
-  "deleteAccount": {
-    "message": "Cancella account"
-  },
   "deleteNetwork": {
     "message": "Cancella la rete?"
   },

app/_locales/ja/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "削除"
   },
-  "deleteAccount": {
-    "message": "アカウントを削除"
-  },
   "deleteNetwork": {
     "message": "ネットワークを削除しますか?"
   },

app/_locales/kn/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "ಅಳಿಸಿ"
   },
-  "deleteAccount": {
-    "message": "ಖಾತೆಯನ್ನು ಅಳಿಸಿ"
-  },
   "deleteNetwork": {
     "message": "ನೆಟ್‌ವರ್ಕ್ ಅಳಿಸುವುದೇ?"
   },

app/_locales/ko/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "삭제"
   },
-  "deleteAccount": {
-    "message": "계정 삭제"
-  },
   "deleteNetwork": {
     "message": "네트워크를 삭제할까요?"
   },

app/_locales/lt/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Ištrinti"
   },
-  "deleteAccount": {
-    "message": "Šalinti paskyrą"
-  },
   "deleteNetwork": {
     "message": "Panaikinti tinklą?"
   },

app/_locales/lv/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Dzēst"
   },
-  "deleteAccount": {
-    "message": "Dzēst kontu"
-  },
   "deleteNetwork": {
     "message": "Dzēst tīklu?"
   },

app/_locales/ms/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Padam"
   },
-  "deleteAccount": {
-    "message": "Hapus Akaun"
-  },
   "deleteNetwork": {
     "message": "Padamkan Rangkaian?"
   },

app/_locales/no/messages.json

@@ -208,9 +208,6 @@
   "delete": {
     "message": "Slett"
   },
-  "deleteAccount": {
-    "message": "Slett konto "
-  },
   "deleteNetwork": {
     "message": "Slette nettverk? "
   },

app/_locales/ph/messages.json

@@ -406,9 +406,6 @@
   "delete": {
     "message": "I-delete"
   },
-  "deleteAccount": {
-    "message": "I-delete ang Account"
-  },
   "deleteNetwork": {
     "message": "I-delete ang Network?"
   },

app/_locales/pl/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Usuń"
   },
-  "deleteAccount": {
-    "message": "Usuń konto"
-  },
   "deleteNetwork": {
     "message": "Usunąć sieć?"
   },

app/_locales/pt/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Excluir"
   },
-  "deleteAccount": {
-    "message": "Excluir conta"
-  },
   "deleteNetwork": {
     "message": "Excluir rede?"
   },

app/_locales/pt_BR/messages.json

@@ -581,9 +581,6 @@
   "delete": {
     "message": "Excluir"
   },
-  "deleteAccount": {
-    "message": "Excluir conta"
-  },
   "deleteNetwork": {
     "message": "Excluir rede?"
   },

app/_locales/ro/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Șterge"
   },
-  "deleteAccount": {
-    "message": "Ștergeți cont"
-  },
   "deleteNetwork": {
     "message": "Ștergeți rețeaua?"
   },

app/_locales/ru/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Удалить"
   },
-  "deleteAccount": {
-    "message": "Удалить счет"
-  },
   "deleteNetwork": {
     "message": "Удалить сеть?"
   },

app/_locales/sk/messages.json

@@ -205,9 +205,6 @@
   "delete": {
     "message": "Odstrániť"
   },
-  "deleteAccount": {
-    "message": "Zmazať účet"
-  },
   "deleteNetwork": {
     "message": "Odstrániť sieť?"
   },

app/_locales/sl/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Izbriši"
   },
-  "deleteAccount": {
-    "message": "Izbriši račun"
-  },
   "deleteNetwork": {
     "message": "Izbrišem to omrežje?"
   },

app/_locales/sr/messages.json

@@ -208,9 +208,6 @@
   "delete": {
     "message": "Избриши"
   },
-  "deleteAccount": {
-    "message": "Obriši nalog"
-  },
   "deleteNetwork": {
     "message": "Da li želite da obrišete mrežu?"
   },

app/_locales/sv/messages.json

@@ -205,9 +205,6 @@
   "delete": {
     "message": "Radera"
   },
-  "deleteAccount": {
-    "message": "Radera konto"
-  },
   "deleteNetwork": {
     "message": "Radera nätverk?"
   },

app/_locales/sw/messages.json

@@ -205,9 +205,6 @@
   "delete": {
     "message": "Futa"
   },
-  "deleteAccount": {
-    "message": "Futa Akaunti"
-  },
   "deleteNetwork": {
     "message": "Futa Mtandao?"
   },

app/_locales/tl/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "I-delete"
   },
-  "deleteAccount": {
-    "message": "I-delete ang Account"
-  },
   "deleteNetwork": {
     "message": "I-delete ang network?"
   },

app/_locales/tr/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Sil"
   },
-  "deleteAccount": {
-    "message": "Hesabı Sil"
-  },
   "deleteNetwork": {
     "message": "Ağı Sil?"
   },

app/_locales/uk/messages.json

@@ -211,9 +211,6 @@
   "delete": {
     "message": "Видалити"
   },
-  "deleteAccount": {
-    "message": "Видалити обліковий запис"
-  },
   "deleteNetwork": {
     "message": "Видалити мережу?"
   },

app/_locales/vi/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "Xóa"
   },
-  "deleteAccount": {
-    "message": "Xóa tài khoản"
-  },
   "deleteNetwork": {
     "message": "Xóa mạng?"
   },

app/_locales/zh_CN/messages.json

@@ -911,9 +911,6 @@
   "delete": {
     "message": "删除"
   },
-  "deleteAccount": {
-    "message": "删除账户"
-  },
   "deleteNetwork": {
     "message": "删除网络？"
   },

app/_locales/zh_TW/messages.json

@@ -408,9 +408,6 @@
   "delete": {
     "message": "刪除"
   },
-  "deleteAccount": {
-    "message": "刪除帳戶"
-  },
   "deleteNetwork": {
     "message": "刪除網路？"
   },

test/e2e/tests/address-book.spec.js

@@ -171,7 +171,7 @@ describe('Address Book', function () {
 
         await driver.clickElement({ text: 'Test Name 1', tag: 'p' });
         await driver.clickElement({ text: 'Edit', tag: 'button' });
-        await driver.clickElement({ text: 'Delete account', tag: 'a' });
+        await driver.clickElement({ text: 'Delete contact', tag: 'a' });
         // it checks if account is deleted
         const contact = await driver.findElement(
           '.send__select-recipient-wrapper__group-item',

ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js

@@ -115,7 +115,7 @@ export default class AddContact extends PureComponent {
           </div>
         )}
         <div className="address-book__add-contact__content">
-          <div className="address-book__view-contact__group">
+          <div className="address-book__view-contact__group address-book__add-contact__content__username">
             <div className="address-book__view-contact__group__label">
               {t('userName')}
             </div>

ui/pages/settings/contact-list-tab/contact-list-tab.component.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import ContactList from '../../../components/app/contact-list';
 import {
   CONTACT_ADD_ROUTE,
+  CONTACT_LIST_ROUTE,
   CONTACT_VIEW_ROUTE,
 } from '../../../helpers/constants/routes';
 import {
@@ -34,6 +35,7 @@ export default class ContactListTab extends Component {
     editingContact: PropTypes.bool,
     addingContact: PropTypes.bool,
     hideAddressBook: PropTypes.bool,
+    currentPath: PropTypes.string,
   };
 
   settingsRefs = Array(
@@ -155,13 +157,15 @@ export default class ContactListTab extends Component {
   }
 
   render() {
-    const { addingContact, addressBook } = this.props;
+    const { addingContact, addressBook, currentPath } = this.props;
 
     return (
       <div className="address-book-wrapper">
         {this.renderAddressBookContent()}
         {this.renderContactContent()}
-        {!addingContact && addressBook.length > 0
+        {currentPath === CONTACT_LIST_ROUTE &&
+        !addingContact &&
+        addressBook.length > 0
           ? this.renderAddButton()
           : null}
       </div>

ui/pages/settings/contact-list-tab/contact-list-tab.container.js

@@ -30,6 +30,7 @@ const mapStateToProps = (state, ownProps) => {
     addressBook: getAddressBook(state),
     selectedAddress: pathNameTailIsAddress ? pathNameTail : '',
     hideAddressBook,
+    currentPath: pathname,
   };
 };
 

ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
-import Identicon from '../../../../components/ui/identicon';
 import Button from '../../../../components/ui/button/button.component';
 import TextField from '../../../../components/ui/text-field';
 import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer';
@@ -9,6 +8,17 @@ import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../../../shared/modules/hexstring-utils';
+import {
+  AvatarAccount,
+  AvatarAccountSize,
+  Box,
+  Text,
+} from '../../../../components/component-library';
+import {
+  AlignItems,
+  Display,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
 
 export default class EditContact extends PureComponent {
   static contextTypes = {
@@ -59,8 +69,21 @@ export default class EditContact extends PureComponent {
 
     return (
       <div className="settings-page__content-row address-book__edit-contact">
-        <div className="settings-page__header address-book__header--edit">
-          <Identicon address={address} diameter={60} />
+        <Box
+          className="settings-page__header address-book__header--edit"
+          paddingLeft={6}
+          paddingRight={6}
+        >
+          <Box display={Display.Flex} alignItems={AlignItems.center}>
+            <AvatarAccount size={AvatarAccountSize.Lg} address={address} />
+            <Text
+              className="address-book__header__name"
+              variant={TextVariant.bodyLgMedium}
+              marginInlineStart={4}
+            >
+              {name || address}
+            </Text>
+          </Box>
           <Button
             type="link"
             className="settings-page__address-book-button"
@@ -69,9 +92,9 @@ export default class EditContact extends PureComponent {
               history.push(listRoute);
             }}
           >
-            {t('deleteAccount')}
+            {t('deleteContact')}
           </Button>
-        </div>
+        </Box>
         <div className="address-book__edit-contact__content">
           <div className="address-book__view-contact__group">
             <div className="address-book__view-contact__group__label">

ui/pages/settings/contact-list-tab/index.scss

@@ -21,19 +21,6 @@
     align-items: center;
   }
 
-  &__header,
-  &__header--edit {
-    &__name {
-      @include H3;
-
-      margin-left: 24px;
-      max-width: 8em;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-
   &__header--edit {
     display: flex;
     justify-content: space-between;
@@ -186,10 +173,6 @@
         padding-top: 0;
       }
     }
-
-    .page-container__footer {
-      border-top: none;
-    }
   }
 
   &__add-contact {
@@ -197,10 +180,16 @@
     flex-flow: column nowrap;
     padding-bottom: 0 !important;
     height: 100%;
+    padding-top: 0;
 
     &__content {
       flex: 1 1 auto;
       height: 100%;
+      padding-top: 0;
+
+      &__username {
+        padding-top: 0;
+      }
     }
 
     &__error {

ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js

@@ -2,19 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
-import Identicon from '../../../../components/ui/identicon';
 import Button from '../../../../components/ui/button/button.component';
 
 import {
+  AvatarAccount,
+  AvatarAccountSize,
+  Box,
   ButtonIcon,
   ButtonIconSize,
   IconName,
+  Text,
 } from '../../../../components/component-library';
 
 import Tooltip from '../../../../components/ui/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
-import { IconColor } from '../../../../helpers/constants/design-system';
+import {
+  IconColor,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
 
 function quadSplit(address) {
   return `0x${address
@@ -42,10 +48,19 @@ function ViewContact({
   return (
     <div className="settings-page__content-row">
       <div className="settings-page__content-item">
-        <div className="settings-page__header address-book__header">
-          <Identicon address={address} diameter={60} />
-          <div className="address-book__header__name">{name || address}</div>
-        </div>
+        <Box
+          className="settings-page__header address-book__header"
+          paddingLeft={6}
+        >
+          <AvatarAccount size={AvatarAccountSize.Lg} address={address} />
+          <Text
+            className="address-book__header__name"
+            variant={TextVariant.bodyLgMedium}
+            marginInlineStart={4}
+          >
+            {name || address}
+          </Text>
+        </Box>
         <div className="address-book__view-contact__group">
           <Button
             type="secondary"
@@ -81,6 +96,7 @@ function ViewContact({
             </Tooltip>
           </div>
         </div>
+        {memo.length > 0 ? (
           <div className="address-book__view-contact__group">
             <div className="address-book__view-contact__group__label--capitalized">
               {t('memo')}
@@ -89,6 +105,7 @@ function ViewContact({
               {memo}
             </div>
           </div>
+        ) : null}
       </div>
     </div>
   );

ui/pages/settings/settings.component.js

@@ -267,6 +267,8 @@ class SettingsPage extends PureComponent {
         <Box
           className="settings-page__subheader"
           padding={4}
+          paddingLeft={6}
+          paddingRight={6}
           display={Display.Flex}
           flexDirection={FlexDirection.Row}
           alignItems={AlignItems.center}
@@ -361,6 +363,12 @@ class SettingsPage extends PureComponent {
           if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
             return true;
           }
+          if (
+            key === CONTACT_LIST_ROUTE &&
+            currentPath.includes(CONTACT_LIST_ROUTE)
+          ) {
+            return true;
+          }
           return matchPath(currentPath, { exact: true, path: key });
         }}
         onSelect={(key) => history.push(key)}