UX: Icons: Stop using fa-address-book (#17761)

* UX: Icons: Stop using fa-address-book * Remove locale string * Fix positioning
2024-12-23 09:52:26 +01:00 · 2023-02-16 07:26:00 -06:00 · 2023-02-16 07:26:00 -06:00 · 8c233b2a82
commit 8c233b2a82
parent f20d5db1e4
23 changed files with 15 additions and 62 deletions
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Adresse"
  },
-  "addressBookIcon": {
-    "message": "Adressbuchsymbol"
-  },
  "advanced": {
    "message": "Erweitert"
  },
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Διεύθυνση"
  },
-  "addressBookIcon": {
-    "message": "Εικονίδιο βιβλίου διευθύνσεων"
-  },
  "advanced": {
    "message": "Σύνθετες"
  },
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Address"
  },
-  "addressBookIcon": {
-    "message": "Address book icon"
-  },
  "advanced": {
    "message": "Advanced"
  },
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Dirección"
  },
-  "addressBookIcon": {
-    "message": "Icono de libreta de direcciones"
-  },
  "advanced": {
    "message": "Avanzado"
  },
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@ -142,9 +142,6 @@
  "address": {
    "message": "Dirección"
  },
-  "addressBookIcon": {
-    "message": "Icono de libreta de direcciones"
-  },
  "advanced": {
    "message": "Avanzado"
  },
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Adresse"
  },
-  "addressBookIcon": {
-    "message": "Icône du carnet d’adresses"
-  },
  "advanced": {
    "message": "Paramètres avancés"
  },
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "पता"
  },
-  "addressBookIcon": {
-    "message": "पता पुस्तिका आइकन"
-  },
  "advanced": {
    "message": "उन्नत"
  },
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Alamat"
  },
-  "addressBookIcon": {
-    "message": "Ikon buku alamat"
-  },
  "advanced": {
    "message": "Lanjutan"
  },
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@ -207,9 +207,6 @@
  "address": {
    "message": "Indirizzo"
  },
-  "addressBookIcon": {
-    "message": "Icona rubrica indirizzo"
-  },
  "advanced": {
    "message": "Avanzate"
  },
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "アドレス"
  },
-  "addressBookIcon": {
-    "message": "アドレス帳アイコン"
-  },
  "advanced": {
    "message": "高度な設定"
  },
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "주소"
  },
-  "addressBookIcon": {
-    "message": "주소록 아이콘"
-  },
  "advanced": {
    "message": "고급"
  },
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Endereço"
  },
-  "addressBookIcon": {
-    "message": "Ícone da agenda de endereços"
-  },
  "advanced": {
    "message": "Avançado"
  },
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@ -142,9 +142,6 @@
  "address": {
    "message": "Endereço"
  },
-  "addressBookIcon": {
-    "message": "Ícone da agenda de endereços"
-  },
  "advanced": {
    "message": "Avançado"
  },
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Адрес"
  },
-  "addressBookIcon": {
-    "message": "Значок адресной книги"
-  },
  "advanced": {
    "message": "Дополнительно"
  },
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Address"
  },
-  "addressBookIcon": {
-    "message": "Icon ng address book"
-  },
  "advanced": {
    "message": "Makabago"
  },
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Adres"
  },
-  "addressBookIcon": {
-    "message": "Adres defteri simgesi"
-  },
  "advanced": {
    "message": "Gelişmiş"
  },
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "Địa chỉ"
  },
-  "addressBookIcon": {
-    "message": "Biểu tượng sổ địa chỉ"
-  },
  "advanced": {
    "message": "Nâng cao"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -266,9 +266,6 @@
  "address": {
    "message": "地址"
  },
-  "addressBookIcon": {
-    "message": "地址簿图标"
-  },
  "advanced": {
    "message": "高级"
  },
--- a/ui/components/app/tab-bar/tab-bar.stories.js
+++ b/ui/components/app/tab-bar/tab-bar.stories.js
@ -24,7 +24,7 @@ export default {
        key: 'general',
      },
      {
-        icon: <i className="fa fa-address-book" />,
+        icon: <Icon name={ICON_NAMES.BOOK} />,
        content: 'Contacts',
        key: 'contacts',
      },
--- a/ui/helpers/constants/settings.js
+++ b/ui/helpers/constants/settings.js
@ -145,7 +145,7 @@ export const SETTINGS_CONSTANTS = [
    sectionMessage: (t) => t('contacts'),
    descriptionMessage: (t) => t('contacts'),
    route: CONTACT_LIST_ROUTE,
-    icon: 'fa fa-address-book',
+    icon: ICON_NAMES.BOOK,
  },
  ///: BEGIN:ONLY_INCLUDE_IN(flask)
  {
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
@ -11,6 +11,12 @@ import {
  getNumberOfSettingsInSection,
  handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../components/component-library';
+import { Color } from '../../../helpers/constants/design-system';
 import EditContact from './edit-contact';
 import AddContact from './add-contact';
 import ViewContact from './view-contact';
@ -72,9 +78,11 @@ export default class ContactListTab extends Component {
    return (
      <div className="address-book__container">
        <div>
-          <i
-            className="fa fa-address-book fa-4x address-book__icon"
-            title={t('addressBookIcon')}
+          <Icon
+            name={ICON_NAMES.BOOK}
+            color={Color.iconMuted}
+            className="address-book__icon"
+            size={ICON_SIZES.XL}
          />
          <h4 className="address-book__title">{t('buildContactList')}</h4>
          <p className="address-book__sub-title">
--- a/ui/pages/settings/contact-list-tab/index.scss
+++ b/ui/pages/settings/contact-list-tab/index.scss
@ -56,9 +56,8 @@
  }

  &__icon {
-    margin-bottom: 16px;
+    margin: 0 auto 16px auto;
    display: block;
-    color: var(--color-icon-muted);
  }

  &__title {
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@ -269,7 +269,7 @@ class SettingsPage extends PureComponent {
          },
          {
            content: t('contacts'),
-            icon: <i className="fa fa-address-book" />,
+            icon: <Icon name={ICON_NAMES.BOOK} />,
            key: CONTACT_LIST_ROUTE,
          },
          ///: BEGIN:ONLY_INCLUDE_IN(flask)