Updated action list in token, NFTs and activity view (#19702)

* updated ui for nft import button

* updated no nft image found in the center

* updated footer for all screens in tabs

* removed no nft state from nft tab

* updated snapshot

* lint fix

* fixed e2e tests

* fixed prep build error

* removed no nfts yet test

* updated tabs

* fixed prod error

* updated no nft screen

* changed button size to md

app/_locales/de/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "Die ID eines NFTs ist eine eindeutige Kennung, da keine zwei NFTs gleich sind. Auch diese Nummer finden Sie in OpenSea unter „Details“. Notieren Sie diese oder kopieren Sie sie in Ihre Zwischenablage."
   },
-  "importNFTs": {
-    "message": "NFTs importieren"
-  },
   "importSelectedTokens": {
     "message": "Ausgewählte Token importieren?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Laut unseren Aufzeichnungen stimmt der angegebene RPC-URL-Wert nicht mit einem bekannten Provider für diese Chain-ID überein."
   },
-  "missingNFT": {
-    "message": "Sie sehen Ihr NFT nicht?"
-  },
   "missingSetting": {
     "message": "Sie können eine Einstellung nicht finden?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Kein Umrechnungskurs verfügbar"
   },
-  "noNFTs": {
-    "message": "Noch keine NFTs"
-  },
   "noSnaps": {
     "message": "Keine Snaps installiert"
   },

app/_locales/el/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "Ένα αναγνωριστικό του συλλεκτικού είναι ένα μοναδικό αναγνωριστικό δεδομένου ότι δεν υπάρχουν δύο ίδια NFT. Και πάλι, στο OpenSea αυτός ο αριθμός βρίσκεται στην ενότητα \"Λεπτομέρειες\". Σημειώστε τον ή αντιγράψτε τον στο πρόχειρο σας."
   },
-  "importNFTs": {
-    "message": "Εισαγωγή NFT"
-  },
   "importSelectedTokens": {
     "message": "Εισαγωγή επιλεγμένων token;"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Σύμφωνα με τις καταχωρήσεις μας, η τιμή RPC URL που υποβλήθηκε δεν ταιριάζει με κάποιον γνωστό πάροχο για αυτό το αναγνωριστικό αλυσίδας."
   },
-  "missingNFT": {
-    "message": "Δεν βλέπετε το NFT σας;"
-  },
   "missingSetting": {
     "message": "Δεν μπορείτε να βρείτε μια ρύθμιση;"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Δεν Υπάρχει Διαθέσιμη Ισοτιμία Μετατροπής"
   },
-  "noNFTs": {
-    "message": "Δεν υπάρχουν NFT ακόμα"
-  },
   "noSnaps": {
     "message": "Δεν εγκαταστάθηκαν Snaps"
   },

app/_locales/en/messages.json

@@ -1884,9 +1884,6 @@
   "importNFTTokenIdToolTip": {
     "message": "An NFT's ID is a unique identifier since no two NFTs are alike. Again, on OpenSea this number is under 'Details'. Make a note of it, or copy it onto your clipboard."
   },
-  "importNFTs": {
-    "message": "Import NFTs"
-  },
   "importSelectedTokens": {
     "message": "Import selected tokens?"
   },
@@ -2273,9 +2270,6 @@
   "mismatchedRpcUrl": {
     "message": "According to our records the submitted RPC URL value does not match a known provider for this chain ID."
   },
-  "missingNFT": {
-    "message": "Don't see your NFT?"
-  },
   "missingSetting": {
     "message": "Can't find a setting?"
   },

app/_locales/es/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "La ID de un NFT es un identificador único, ya que no hay dos NFT iguales. Nuevamente, en OpenSea, este número se encuentra en 'Detalles'. Tome nota de ello o cópielo en su portapapeles."
   },
-  "importNFTs": {
-    "message": "AGREGAR NFT"
-  },
   "importSelectedTokens": {
     "message": "¿Agregar los tokens seleccionados?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Según nuestros registros, el valor de la URL de RPC enviado no coincide con un proveedor conocido para este ID de cadena."
   },
-  "missingNFT": {
-    "message": "¿No ve su NFT?"
-  },
   "missingSetting": {
     "message": "¿No puede encontrar un ajuste?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "No hay tasa de conversión disponible"
   },
-  "noNFTs": {
-    "message": "No hay ningún NFT aún"
-  },
   "noSnaps": {
     "message": "No hay complementos instalados"
   },

app/_locales/es_419/messages.json

@@ -1070,9 +1070,6 @@
   "importMyWallet": {
     "message": "Importar Mi cartera"
   },
-  "importNFTs": {
-    "message": "Importar NFT"
-  },
   "importTokenQuestion": {
     "message": "¿Desea importar el token?"
   },
@@ -1330,9 +1327,6 @@
     "message": "verifique los detalles de la red",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "missingNFT": {
-    "message": "¿No ve su NFT?"
-  },
   "mustSelectOne": {
     "message": "Debe seleccionar al menos 1 token."
   },
@@ -1465,9 +1459,6 @@
   "noConversionRateAvailable": {
     "message": "No hay tasa de conversión disponible"
   },
-  "noNFTs": {
-    "message": "Aún no hay NFT"
-  },
   "noTransactions": {
     "message": "No tiene transacciones"
   },

app/_locales/fr/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "L’ID d’un NFT est un identifiant unique puisqu’il n’y a pas deux NFT identiques. Encore une fois, sur OpenSea, ce numéro se trouve dans la section « Détails ». Prenez-en note ou copiez-le dans votre presse-papiers."
   },
-  "importNFTs": {
-    "message": "Importer des NFT"
-  },
   "importSelectedTokens": {
     "message": "Voulez-vous importer les jetons sélectionnés ?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Selon nos informations, la valeur de l’URL RPC soumise ne correspond pas à un fournisseur connu pour cet ID de chaîne."
   },
-  "missingNFT": {
-    "message": "Vous ne voyez pas votre NFT ?"
-  },
   "missingSetting": {
     "message": "Vous ne trouvez pas un paramètre ?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Aucun taux de conversion disponible"
   },
-  "noNFTs": {
-    "message": "Aucun NFT pour le moment"
-  },
   "noSnaps": {
     "message": "Aucun Snap installé"
   },

app/_locales/hi/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "किसी एनएफटी की आईडी एक विशिष्ट पहचानकर्ता है क्योंकि कोई भी दो एनएफटी एक जैसे नहीं होते हैं। फिर से, OpenSea पर यह संख्या 'डिटेल्स' के नीचे होगी। इसे नोट कर लें या अपने क्लिपबोर्ड पर कॉपी कर लें।"
   },
-  "importNFTs": {
-    "message": "NFT आयात करें"
-  },
   "importSelectedTokens": {
     "message": "चयनित टोकन आयात करें?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "हमारे रिकॉर्ड के अनुसार, सबमिट किया गया RPC-URL मान इस चेन आईडी के लिए किसी ज्ञात प्रदाता से मेल नहीं खाता।"
   },
-  "missingNFT": {
-    "message": "अपना NFT नहीं देख रहे हैं?"
-  },
   "missingSetting": {
     "message": "सेटिंग नहीं मिल पाया?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "कोई भी रूपांतरण दर उपलब्ध नहीं है"
   },
-  "noNFTs": {
-    "message": "अभी तक कोई NFT नहीं"
-  },
   "noSnaps": {
     "message": "कोई स्नैप इंस्टाल नहीं किया गया"
   },

app/_locales/id/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "ID NFT merupakan pengenal unik karena tidak ada dua NFT yang sama. Sekali lagi, angka ini berada di bawah 'Detail' pada OpenSea. Catat atau salin ke papan klip."
   },
-  "importNFTs": {
-    "message": "Impor NFT"
-  },
   "importSelectedTokens": {
     "message": "Impor token yang dipilih?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Menurut catatan kami, nilai URL RPC yang dikirimkan tidak sesuai dengan penyedia yang dikenal untuk ID rantai ini."
   },
-  "missingNFT": {
-    "message": "Tidak melihat NFT Anda?"
-  },
   "missingSetting": {
     "message": "Tidak dapat menemukan pengaturan?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Nilai konversi tidak tersedia"
   },
-  "noNFTs": {
-    "message": "Belum ada NFT"
-  },
   "noSnaps": {
     "message": "Belum ada Snap yang diinstal"
   },

app/_locales/ja/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "NFT の ID は一意の識別子で、同じ NFT は 2 つとして存在しません。前述の通り、OpenSea ではこの番号は「詳細」に表示されます。この ID を書き留めるか、クリップボードにコピーしてください。"
   },
-  "importNFTs": {
-    "message": "NFTをインポート"
-  },
   "importSelectedTokens": {
     "message": "選択したトークンをインポートしますか？"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "弊社の記録によると、送信された RPC URL の値がこのチェーン ID の既知のプロバイダーと一致しません。"
   },
-  "missingNFT": {
-    "message": "NFTが見当たりませんか？"
-  },
   "missingSetting": {
     "message": "設定が見つかりませんか？"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "利用可能な換算レートがありません"
   },
-  "noNFTs": {
-    "message": "NFTはまだありません"
-  },
   "noSnaps": {
     "message": "スナップがインストールされていません"
   },

app/_locales/ko/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "NFT의 ID는 고유한 식별자이므로 동일한 NFT는 존재하지 않습니다. 다시 말하지만, OpenSea에서 이 번호는 '세부 정보(Details)'에서 찾아볼 수 있습니다. 이를 기록하거나 클립보드에 복사해 두세요."
   },
-  "importNFTs": {
-    "message": "NFT 가져오기"
-  },
   "importSelectedTokens": {
     "message": "선택한 토큰을 불러올까요?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "기록에 따르면 제출한 RPC URL 값이 이 체인 ID의 알려진 공급업체와 일치하지 않습니다."
   },
-  "missingNFT": {
-    "message": "NFT가 보이지 않나요?"
-  },
   "missingSetting": {
     "message": "설정을 찾으세요?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "사용 가능한 환율 없음"
   },
-  "noNFTs": {
-    "message": "아직 NFT가 없음"
-  },
   "noSnaps": {
     "message": "설치된 스냅이 없습니다"
   },

app/_locales/pt/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "O ID de um NFT é um identificador único, pois não há dois NFTs iguais. Novamente, na OpenSea, esse número se encontra em \"Detalhes\". Anote-o ou copie-o para sua área de transferência."
   },
-  "importNFTs": {
-    "message": "Importar NFTs"
-  },
   "importSelectedTokens": {
     "message": "Importar tokens selecionados?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "De acordo com os nossos registros, o valor da URL da RPC enviado não corresponde a um provedor conhecido da ID desta cadeia."
   },
-  "missingNFT": {
-    "message": "Não está vendo o seu NFT?"
-  },
   "missingSetting": {
     "message": "Não consegue encontrar uma configuração?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Não há uma taxa de conversão disponível"
   },
-  "noNFTs": {
-    "message": "Nenhum NFT até agora"
-  },
   "noSnaps": {
     "message": "Nenhum snap instalado"
   },

app/_locales/pt_BR/messages.json

@@ -1070,9 +1070,6 @@
   "importMyWallet": {
     "message": "Importar minha carteira"
   },
-  "importNFTs": {
-    "message": "Importar NFTs"
-  },
   "importTokenQuestion": {
     "message": "Importar token?"
   },
@@ -1330,9 +1327,6 @@
     "message": "verifique os detalhes da rede",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "missingNFT": {
-    "message": "Não está vendo o seu NFT?"
-  },
   "mustSelectOne": {
     "message": "Selecione pelo menos 1 token."
   },
@@ -1465,9 +1459,6 @@
   "noConversionRateAvailable": {
     "message": "Não há uma taxa de conversão disponível"
   },
-  "noNFTs": {
-    "message": "Ainda não há nenhum NFT"
-  },
   "noTransactions": {
     "message": "Você não tem transações"
   },

app/_locales/ru/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "Идентификатор коллекционного актива является уникальным идентификатором, поскольку нет двух одинаковых NFT. Опять же, в OpenSea этот номер находится в разделе «Подробности». Запишите его или скопируйте в буфер обмена."
   },
-  "importNFTs": {
-    "message": "Импорт NFT"
-  },
   "importSelectedTokens": {
     "message": "Импортировать выбранные токены?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Согласно нашим записям, отправленное значение URL-адреса RPC не соответствует известному поставщику для этого идентификатора блокчейна."
   },
-  "missingNFT": {
-    "message": "Не видите свои NFT?"
-  },
   "missingSetting": {
     "message": "Не удается найти настройку?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Нет доступного обменного курса"
   },
-  "noNFTs": {
-    "message": "Пока нет NFT-токенов"
-  },
   "noSnaps": {
     "message": "Снапы не установлены"
   },

app/_locales/tl/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "Ang ID ng NFT ay isang natatanging pagkakakilanlan dahil walang dalawang NFT ang magkatulad. Muli, sa OpenSea ang numerong ito ay nasa ilalim ng 'Mga Detalye'. Itala ito, o kopyahin ito sa iyong clipboard."
   },
-  "importNFTs": {
-    "message": "I-import ang mga NFT"
-  },
   "importSelectedTokens": {
     "message": "I-import ang mga napiling token?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Ayon sa aming mga talaan, ang isinumiteng RPC URL value ay hindi tumutugma sa isang kilalang provider para sa chain ID na ito."
   },
-  "missingNFT": {
-    "message": "Hindi makita ang NFT mo?"
-  },
   "missingSetting": {
     "message": "Hindi makahanap ng setting?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Hindi available ang rate ng conversion"
   },
-  "noNFTs": {
-    "message": "Wala pang mga NFT"
-  },
   "noSnaps": {
     "message": "Walang mga Snap na naka-install"
   },

app/_locales/tr/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "Hiçbir iki NFT kimliği birbiriyle aynı olmadığı için her NFT kimliği benzersiz bir tanımlayıcıdır. Yine, OpenSea'de bu sayı 'Detaylar' kısmının altında yer alır. Not alın veya panonuza kopyalayın."
   },
-  "importNFTs": {
-    "message": "NFS'leri İçe Aktar"
-  },
   "importSelectedTokens": {
     "message": "Seçilen tokenleri içe aktar?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Kayıtlarımıza göre, sunulan RPC URL adresi değeri bu zincir kimliğinin bilinen bir sağlayıcısı ile uyumlu değil."
   },
-  "missingNFT": {
-    "message": "NFT'nizi görmüyor musunuz?"
-  },
   "missingSetting": {
     "message": "Bir ayarı bulamıyor musun?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Dönüşüm oranı mevcut değil"
   },
-  "noNFTs": {
-    "message": "Henüz NFT yok"
-  },
   "noSnaps": {
     "message": "Hiç Snap yüklü değil"
   },

app/_locales/vi/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "ID của NFT là một mã nhận dạng duy nhất vì không có hai NFT nào giống hệt nhau. Một lần nữa, trên OpenSea, mã số này nằm bên dưới mục 'Chi tiết'. Hãy ghi chú lại hoặc sao chép vào bộ nhớ đệm."
   },
-  "importNFTs": {
-    "message": "Nhập NFT"
-  },
   "importSelectedTokens": {
     "message": "Nhập các token đã chọn?"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "Theo hồ sơ của chúng tôi, giá trị RPC URL đã gửi không khớp với một nhà cung cấp đã biết cho ID chuỗi này."
   },
-  "missingNFT": {
-    "message": "Không thấy NFT của mình?"
-  },
   "missingSetting": {
     "message": "Không tìm thấy thiết lập?"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "Không có sẵn tỷ lệ quy đổi nào"
   },
-  "noNFTs": {
-    "message": "Chưa có NFT"
-  },
   "noSnaps": {
     "message": "Chưa cài đặt Snap nào"
   },

app/_locales/zh_CN/messages.json

@@ -1599,9 +1599,6 @@
   "importNFTTokenIdToolTip": {
     "message": "NFT的ID是唯一标识符，因为所有NFT都是独一无二的。同样，在OpenSea上，此数字位于“详情”下方。记下它，或将它复制到剪贴板上。"
   },
-  "importNFTs": {
-    "message": "添加收藏品"
-  },
   "importSelectedTokens": {
     "message": "要导入所选代币吗？"
   },
@@ -1953,9 +1950,6 @@
   "mismatchedRpcUrl": {
     "message": "根据我们的记录，所提交的RPC URL值与此链ID的已知提供者不匹配。"
   },
-  "missingNFT": {
-    "message": "找不到您的 NFT？"
-  },
   "missingSetting": {
     "message": "找不到设置吗？"
   },
@@ -2162,9 +2156,6 @@
   "noConversionRateAvailable": {
     "message": "无可用汇率"
   },
-  "noNFTs": {
-    "message": "尚无 NFT"
-  },
   "noSnaps": {
     "message": "没有安装Snap"
   },

test/e2e/nft/import-erc1155.spec.js

@@ -35,7 +35,7 @@ describe('Import ERC1155 NFT', function () {
 
         // After login, go to NFTs tab, open the import NFT/ERC1155 form
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement({ text: 'Import NFTs', tag: 'a' });
+        await driver.clickElement({ text: 'Import NFT', tag: 'button' });
 
         // Enter a valid NFT that belongs to user and check success message appears
         await driver.fill('[data-testid="address"]', contractAddress);
@@ -83,7 +83,7 @@ describe('Import ERC1155 NFT', function () {
 
         // After login, go to NFTs tab, open the import NFT form
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement({ text: 'Import NFTs', tag: 'a' });
+        await driver.clickElement({ text: 'Import NFT', tag: 'button' });
 
         // Enter an NFT that not belongs to user with a valid address and an invalid token id
         await driver.fill('[data-testid="address"]', contractAddress);

test/e2e/nft/import-nft.spec.js

@@ -35,7 +35,7 @@ describe('Import NFT', function () {
 
         // After login, go to NFTs tab, open the import NFT form
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement({ text: 'Import NFTs', tag: 'a' });
+        await driver.clickElement({ text: 'Import NFT', tag: 'button' });
 
         // Enter a valid NFT that belongs to user and check success message appears
         await driver.fill('[data-testid="address"]', contractAddress);
@@ -82,7 +82,7 @@ describe('Import NFT', function () {
 
         // After login, go to NFTs tab, open the import NFT form
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement({ text: 'Import NFTs', tag: 'a' });
+        await driver.clickElement({ text: 'Import NFT', tag: 'button' });
 
         // Enter an NFT that not belongs to user with a valid address and an invalid token id
         await driver.fill('[data-testid="address"]', contractAddress);

ui/components/app/asset-list/asset-list.js

@@ -98,7 +98,7 @@ const AssetList = ({ onClickAsset }) => {
         />
       ) : null}
       <Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
-        <ImportTokenLink margin={4} />
+        <ImportTokenLink margin={4} marginBottom={2} />
       </Box>
       {showDetectedTokens && (
         <DetectedToken setShowDetectedTokens={setShowDetectedTokens} />

ui/components/app/nfts-tab/index.scss

@@ -1,11 +1,4 @@
 .nfts-tab {
-  &__link {
-    a {
-      padding: 4px;
-      font-size: 0.875rem;
-    }
-  }
-
   &__loading {
     display: flex;
     height: 250px;

ui/components/app/nfts-tab/nfts-tab.js

@@ -2,18 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import Box from '../../ui/box';
-import Button from '../../ui/button';
-import Typography from '../../ui/typography/typography';
-import NftsDetectionNotice from '../nfts-detection-notice';
 import NftsItems from '../nfts-items';
 import {
-  TypographyVariant,
-  TextAlign,
   JustifyContent,
-  FLEX_DIRECTION,
-  FontWeight,
+  FlexDirection,
   AlignItems,
+  Size,
+  Display,
+  TextAlign,
+  TextVariant,
   TextColor,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -24,6 +21,8 @@ import {
   detectNfts,
 } from '../../../store/actions';
 import { useNftsCollections } from '../../../hooks/useNftsCollections';
+import { Box, ButtonLink, IconName, Text } from '../../component-library';
+import NftsDetectionNotice from '../nfts-detection-notice';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 
 export default function NftsTab({ onAddNFT }) {
@@ -61,88 +60,91 @@ export default function NftsTab({ onAddNFT }) {
         />
       ) : (
         <>
-          {isMainnet && !useNftDetection ? <NftsDetectionNotice /> : null}
-          <Box padding={12}>
+          {isMainnet && !useNftDetection ? <NftsDetectionNotice /> : null}{' '}
+          <Box
+            padding={12}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+          >
             <Box justifyContent={JustifyContent.center}>
               <img src="./images/no-nfts.svg" />
             </Box>
             <Box
               marginTop={4}
               marginBottom={12}
+              display={Display.Flex}
               justifyContent={JustifyContent.center}
-              flexDirection={FLEX_DIRECTION.COLUMN}
+              alignItems={AlignItems.center}
+              flexDirection={FlexDirection.Column}
               className="nfts-tab__link"
             >
-              <Typography
+              <Text
                 color={TextColor.textMuted}
-                variant={TypographyVariant.H4}
+                variant={TextVariant.headingSm}
                 align={TextAlign.Center}
-                fontWeight={FontWeight.Bold}
+                as="h4"
               >
                 {t('noNFTs')}
-              </Typography>
-              <Button
-                type="link"
-                target="_blank"
-                rel="noopener noreferrer"
+              </Text>
+              <ButtonLink
+                size={Size.MD}
+                data-testid="import-nft-button"
                 href={ZENDESK_URLS.NFT_TOKENS}
+                externalLink
               >
                 {t('learnMoreUpperCase')}
-              </Button>
+              </ButtonLink>
             </Box>
           </Box>
         </>
       )}
       <Box
-        marginBottom={4}
-        justifyContent={JustifyContent.center}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        className="nfts-tab__buttons"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        alignItems={AlignItems.flexStart}
+        margin={4}
+        gap={2}
+        marginBottom={2}
       >
-        <Typography
-          color={TextColor.textMuted}
-          variant={TypographyVariant.H5}
-          align={TextAlign.Center}
+        <ButtonLink
+          size={Size.MD}
+          data-testid="import-nft-button"
+          startIconName={IconName.Add}
+          onClick={onAddNFT}
         >
-          {t('missingNFT')}
-        </Typography>
-        <Box
-          alignItems={AlignItems.center}
-          justifyContent={JustifyContent.center}
-        >
-          {!isMainnet && Object.keys(collections).length < 1 ? null : (
-            <>
-              <Box
-                className="nfts-tab__link"
-                justifyContent={JustifyContent.flexEnd}
-              >
-                {isMainnet && !useNftDetection ? (
-                  <Button type="link" onClick={onEnableAutoDetect}>
-                    {t('enableAutoDetect')}
-                  </Button>
-                ) : (
-                  <Button type="link" onClick={onRefresh}>
-                    {t('refreshList')}
-                  </Button>
-                )}
-              </Box>
-              <Typography
-                color={TextColor.textMuted}
-                variant={TypographyVariant.H6}
-                align={TextAlign.Center}
-              >
-                {t('or')}
-              </Typography>
-            </>
-          )}
-          <Box
-            justifyContent={JustifyContent.flexStart}
-            className="nfts-tab__link"
-          >
-            <Button type="link" onClick={onAddNFT}>
-              {t('importNFTs')}
-            </Button>
-          </Box>
-        </Box>
+          {t('importNFT')}
+        </ButtonLink>
+        {!isMainnet && Object.keys(collections).length < 1 ? null : (
+          <>
+            <Box
+              className="nfts-tab__link"
+              justifyContent={JustifyContent.flexEnd}
+            >
+              {isMainnet && !useNftDetection ? (
+                <ButtonLink
+                  size={Size.MD}
+                  startIconName={IconName.Setting}
+                  data-testid="refresh-list-button"
+                  onClick={onEnableAutoDetect}
+                >
+                  {t('enableAutoDetect')}
+                </ButtonLink>
+              ) : (
+                <ButtonLink
+                  size={Size.MD}
+                  startIconName={IconName.Refresh}
+                  data-testid="refresh-list-button"
+                  onClick={onRefresh}
+                >
+                  {t('refreshList')}
+                </ButtonLink>
+              )}
+            </Box>
+          </>
+        )}
       </Box>
     </Box>
   );

ui/components/app/nfts-tab/nfts-tab.test.js

@@ -303,7 +303,7 @@ describe('NFT Items', () => {
         onAddNFT: onAddNFTStub,
       });
       expect(onAddNFTStub).toHaveBeenCalledTimes(0);
-      fireEvent.click(screen.queryByText('Import NFTs'));
+      fireEvent.click(screen.queryByText('Import NFT'));
       expect(onAddNFTStub).toHaveBeenCalledTimes(1);
     });
   });

ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap

@@ -20,10 +20,10 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       </button>
     </div>
     <div
-      class="box box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-row box--align-items-center"
+      class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
     >
       <button
-        class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
         data-testid="refresh-list-button"
       >
         <span
@@ -57,10 +57,10 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       </button>
     </div>
     <div
-      class="box box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-row box--align-items-center"
+      class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
     >
       <button
-        class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
         data-testid="refresh-list-button"
       >
         <span

ui/components/multichain/import-token-link/import-token-link.js

@@ -64,13 +64,9 @@ export const ImportTokenLink = ({ className, ...props }) => {
               t('importTokensCamelCase').slice(1)}
         </ButtonLink>
       </Box>
-      <Box
-        display={Display.Flex}
-        alignItems={AlignItems.center}
-        paddingBottom={4}
-        paddingTop={4}
-      >
+      <Box display={Display.Flex} alignItems={AlignItems.center} paddingTop={2}>
         <ButtonLink
+          size={Size.MD}
           startIconName={IconName.Refresh}
           data-testid="refresh-list-button"
           onClick={() => detectNewTokens()}

ui/components/ui/tabs/index.scss

@@ -1,7 +1,6 @@
 @import 'tab/index';
 
 .tabs {
-  flex-grow: 1;
   // Just for Firefox — https://github.com/MetaMask/metamask-extension/issues/8700
   -moz-transform: translateZ(0);
 

ui/pages/home/home.component.js

@@ -17,7 +17,6 @@ import MultipleNotifications from '../../components/app/multiple-notifications';
 import TransactionList from '../../components/app/transaction-list';
 import Popover from '../../components/ui/popover';
 import Button from '../../components/ui/button';
-import Box from '../../components/ui/box';
 import ConnectedSites from '../connected-sites';
 import ConnectedAccounts from '../connected-accounts';
 import { Tabs, Tab } from '../../components/ui/tabs';
@@ -31,6 +30,12 @@ import {
   DISPLAY,
   TextColor,
   TextVariant,
+
+  ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
+  Size,
+  JustifyContent,
+  Display,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../helpers/constants/design-system';
 import { SECOND } from '../../../shared/constants/time';
 import {
@@ -38,6 +43,10 @@ import {
   ButtonIconSize,
   IconName,
   Text,
+  Box,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
+  ButtonLink,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../components/component-library';
 
 import {
@@ -746,6 +755,23 @@ export default class Home extends PureComponent {
     const showTermsOfUse =
       completedOnboarding && !onboardedInThisUISession && showTermsOfUsePopup;
 
+    ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
+    // The style in activity screen for support is different
+    const activitySupportDisplayStyle =
+      defaultHomeActiveTabName === 'activity'
+        ? {
+            justifyContent: JustifyContent.center,
+            paddingLeft: 0,
+            marginTop: 4,
+            marginBottom: 4,
+          }
+        : {
+            justifyContent: JustifyContent.flexStart,
+            paddingLeft: 4,
+            marginTop: 0,
+            marginBottom: 4,
+          };
+    ///: END:ONLY_INCLUDE_IN
     return (
       <div className="main-container">
         <Route path={CONNECTED_ROUTE} component={ConnectedSites} exact />
@@ -798,102 +824,108 @@ export default class Home extends PureComponent {
                 ///: END:ONLY_INCLUDE_IN
               }
             </div>
-            <Tabs
-              t={this.context.t}
-              defaultActiveTabKey={defaultHomeActiveTabName}
-              onTabClick={(tabName) => {
-                onTabClick(tabName);
-                let event;
-                switch (tabName) {
-                  case 'nfts':
-                    event = MetaMetricsEventName.NftScreenOpened;
-                    break;
-                  case 'activity':
-                    event = MetaMetricsEventName.ActivityScreenOpened;
-                    break;
-                  default:
-                    event = MetaMetricsEventName.TokenScreenOpened;
-                }
-                this.context.trackEvent({
-                  category: MetaMetricsEventCategory.Home,
-                  event,
-                });
-              }}
-              tabsClassName="home__tabs"
-            >
-              <Tab
-                activeClassName="home__tab--active"
-                className="home__tab"
-                data-testid="home__asset-tab"
-                name={this.context.t('tokens')}
-                tabKey="tokens"
+            <Box style={{ flexGrow: '1' }}>
+              <Tabs
+                t={this.context.t}
+                defaultActiveTabKey={defaultHomeActiveTabName}
+                onTabClick={(tabName) => {
+                  onTabClick(tabName);
+                  let event;
+                  switch (tabName) {
+                    case 'nfts':
+                      event = MetaMetricsEventName.NftScreenOpened;
+                      break;
+                    case 'activity':
+                      event = MetaMetricsEventName.ActivityScreenOpened;
+                      break;
+                    default:
+                      event = MetaMetricsEventName.TokenScreenOpened;
+                  }
+                  this.context.trackEvent({
+                    category: MetaMetricsEventCategory.Home,
+                    event,
+                  });
+                }}
+                tabsClassName="home__tabs"
               >
-                <Box marginTop={2}>
-                  <AssetList
-                    onClickAsset={(asset) =>
-                      history.push(`${ASSET_ROUTE}/${asset}`)
-                    }
-                  />
-                </Box>
-              </Tab>
-              {
-                ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
                 <Tab
                   activeClassName="home__tab--active"
                   className="home__tab"
-                  data-testid="home__nfts-tab"
-                  name={this.context.t('nfts')}
-                  tabKey="nfts"
+                  data-testid="home__asset-tab"
+                  name={this.context.t('tokens')}
+                  tabKey="tokens"
                 >
-                  <NftsTab
-                    onAddNFT={() => {
-                      history.push(ADD_NFT_ROUTE);
-                    }}
-                  />
+                  <Box marginTop={2}>
+                    <AssetList
+                      onClickAsset={(asset) =>
+                        history.push(`${ASSET_ROUTE}/${asset}`)
+                      }
+                    />
+                  </Box>
                 </Tab>
-                ///: END:ONLY_INCLUDE_IN
-              }
-              <Tab
-                activeClassName="home__tab--active"
-                className="home__tab"
-                data-testid="home__activity-tab"
-                name={t('activity')}
-                tabKey="activity"
-              >
-                <TransactionList />
-              </Tab>
-            </Tabs>
-            <div className="home__support">
+                {
+                  ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+                  <Tab
+                    activeClassName="home__tab--active"
+                    className="home__tab"
+                    data-testid="home__nfts-tab"
+                    name={this.context.t('nfts')}
+                    tabKey="nfts"
+                  >
+                    <NftsTab
+                      onAddNFT={() => {
+                        history.push(ADD_NFT_ROUTE);
+                      }}
+                    />
+                  </Tab>
+                  ///: END:ONLY_INCLUDE_IN
+                }
+                <Tab
+                  activeClassName="home__tab--active"
+                  className="home__tab"
+                  data-testid="home__activity-tab"
+                  name={t('activity')}
+                  tabKey="activity"
+                >
+                  <TransactionList />
+                </Tab>
+              </Tabs>
               {
                 ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
-                t('needHelp', [
-                  <a
-                    href={SUPPORT_LINK}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    key="need-help-link"
-                    onClick={() => {
-                      this.context.trackEvent(
-                        {
-                          category: MetaMetricsEventCategory.Home,
-                          event: MetaMetricsEventName.SupportLinkClicked,
-                          properties: {
-                            url: SUPPORT_LINK,
-                          },
+                <ButtonLink
+                  size={Size.MD}
+                  startIconName={IconName.MessageQuestion}
+                  data-testid="need-help-link"
+                  href={SUPPORT_LINK}
+                  display={Display.Flex}
+                  justifyContent={activitySupportDisplayStyle.justifyContent}
+                  paddingLeft={activitySupportDisplayStyle.paddingLeft}
+                  marginBottom={activitySupportDisplayStyle.marginBottom}
+                  marginTop={activitySupportDisplayStyle.marginTop}
+                  onClick={() => {
+                    this.context.trackEvent(
+                      {
+                        category: MetaMetricsEventCategory.Home,
+                        event: MetaMetricsEventName.SupportLinkClicked,
+                        properties: {
+                          url: SUPPORT_LINK,
                         },
-                        {
-                          contextPropsIntoEventProperties: [
-                            MetaMetricsContextProp.PageTitle,
-                          ],
-                        },
-                      );
-                    }}
-                  >
-                    {t('needHelpLinkText')}
-                  </a>,
-                ])
+                      },
+                      {
+                        contextPropsIntoEventProperties: [
+                          MetaMetricsContextProp.PageTitle,
+                        ],
+                      },
+                    );
+                  }}
+                  externalLink
+                >
+                  {t('needHelpLinkText')}
+                </ButtonLink>
                 ///: END:ONLY_INCLUDE_IN
               }
+            </Box>
+            <div className="home__support">
               {
                 ///: BEGIN:ONLY_INCLUDE_IN(build-beta)
                 <BetaHomeFooter />