Redesign 'Add Token' component (#8260)

The 'Add Token' component has been redesigned to be more in-line with
the new home screen design. The description instructing the user to
click the 'Add Token' button has been removed, and the section itself
has been made roughly the same size as one of the list item. The text
now appears on just one line, overflowing to two if necessary.

app/_locales/am/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "የሰንሰለት መታወቂያ"
   },
-  "clickToAdd": {
-    "message": "ወደ መለያዎት ለማከል $1ላይ ጠቅ ያድርጉ"
-  },
   "clickToRevealSeed": {
     "message": "ሚስጥራዊ ቃላትን ለመግለጽ እዚህ ጠቅ ያድርጉ"
   },

app/_locales/ar/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "معرّف السلسلة"
   },
-  "clickToAdd": {
-    "message": "انقر على $1لإضافتها إلى حسابك"
-  },
   "clickToRevealSeed": {
     "message": "انقر هنا للكشف عن الكلمات السرية"
   },

app/_locales/bg/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Идентификатор на веригата"
   },
-  "clickToAdd": {
-    "message": "Кликнете върху $1, за да ги добавите към вашия акаунт"
-  },
   "clickToRevealSeed": {
     "message": "Кликнете тук, за да разкриете тайните думи"
   },

app/_locales/bn/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "চেন আইডি"
   },
-  "clickToAdd": {
-    "message": "আপনার অ্যাকাউন্টে $1যোগ করতে সেগুলিতে ক্লিক করুন"
-  },
   "clickToRevealSeed": {
     "message": "গোপন শব্দগুলি প্রকাশ করতে এখানে ক্লিক করুন"
   },

app/_locales/ca/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "Cadena ID"
   },
-  "clickToAdd": {
-    "message": "Fes clic a $1 per afegir-los al teu compte"
-  },
   "clickToRevealSeed": {
     "message": "Fes clic aquí per a revelar les paraules secretes"
   },

app/_locales/da/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Kæde-ID"
   },
-  "clickToAdd": {
-    "message": "Klik på $1 for at tilføje dem til din konto"
-  },
   "clickToRevealSeed": {
     "message": "Klik her for at se hemmelige ord"
   },

app/_locales/de/messages.json

@@ -188,9 +188,6 @@
   "cancelled": {
     "message": "Abgebrochen"
   },
-  "clickToAdd": {
-    "message": "Klicken Sie auf $1, um sie zu Ihrem Konto hinzuzufügen"
-  },
   "clickToRevealSeed": {
     "message": "Hier klicken, um Geheimwörter zu enthüllen"
   },

app/_locales/el/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "Αναγνωριστικό Αλυσίδας"
   },
-  "clickToAdd": {
-    "message": "Κάντε κλικ στο $1 για να τα προσθέσετε στον λογαριασμό σας"
-  },
   "clickToRevealSeed": {
     "message": "Κάντε κλικ εδώ για να αποκαλύψετε μυστικές λέξεις"
   },

app/_locales/en/messages.json

@@ -255,9 +255,6 @@
   "chainId": {
     "message": "Chain ID"
   },
-  "clickToAdd": {
-    "message": "Click on $1 to add them to your account"
-  },
   "clickToRevealSeed": {
     "message": "Click here to reveal secret words"
   },

app/_locales/es/messages.json

@@ -160,9 +160,6 @@
   "chainId": {
     "message": "ID Cadena"
   },
-  "clickToAdd": {
-    "message": "Hazle clic en $1 para agregarles a su cuenta"
-  },
   "clickToRevealSeed": {
     "message": "Haga clic aquí para revelar palabras secretas"
   },

app/_locales/es_419/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "ID de cadena"
   },
-  "clickToAdd": {
-    "message": "Haz clic en $1 para agregarlos a tu cuenta"
-  },
   "clickToRevealSeed": {
     "message": "Haz clic aquí para mostrar las palabras secretas"
   },

app/_locales/et/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Ahela ID"
   },
-  "clickToAdd": {
-    "message": "Klõpsake valikul $1, et need oma kontole lisada"
-  },
   "clickToRevealSeed": {
     "message": "Klõpsake salasõnade kuvamiseks"
   },

app/_locales/fa/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "آی دی زنجیره"
   },
-  "clickToAdd": {
-    "message": "بالای 1$1 کلیک نموده و آنرا به حساب تان اضافه نمایید"
-  },
   "clickToRevealSeed": {
     "message": "برای آشکار سازی کلمات مخفی اینجا کلیک نمایید"
   },

app/_locales/fi/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "Ketjun tunnus"
   },
-  "clickToAdd": {
-    "message": "Napsauta kohdetta $1 lisätäksesi ne tiliisi"
-  },
   "clickToRevealSeed": {
     "message": "Paljasta salaiset sanat napsauttamalla tästä"
   },

app/_locales/fil/messages.json

@@ -176,9 +176,6 @@
   "cancelled": {
     "message": "Nakansela"
   },
-  "clickToAdd": {
-    "message": "Mag-click sa $1 para idagdag ang mga iyon sa iyong account"
-  },
   "clickToRevealSeed": {
     "message": "Mag-click dito para ipakita ang iyong secret words"
   },

app/_locales/fr/messages.json

@@ -188,9 +188,6 @@
   "chainId": {
     "message": "ID de chaîne"
   },
-  "clickToAdd": {
-    "message": "Cliquez sur $1 pour les ajouter à votre compte"
-  },
   "clickToRevealSeed": {
     "message": "Cliquez ici pour révéler des mots secrets"
   },

app/_locales/he/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "מזהה שרשרת"
   },
-  "clickToAdd": {
-    "message": "לחצ/י על $1 כדי להוסיף אותם לחשבונך"
-  },
   "clickToRevealSeed": {
     "message": "לחצ/י כאן לחשיפת מילים סודיות"
   },

app/_locales/hi/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "चेन आई.डी."
   },
-  "clickToAdd": {
-    "message": "उन्हें अपने खाते में जोड़ने के लिए $1 पर क्लिक करें"
-  },
   "clickToRevealSeed": {
     "message": "सीक्रेट शब्दों को जानने के लिए यहाँ क्लिक करें"
   },

app/_locales/hr/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Identifikacijska oznaka bloka"
   },
-  "clickToAdd": {
-    "message": "Kliknite na $1 kako biste ih dodali na svoj račun"
-  },
   "clickToRevealSeed": {
     "message": "Ovdje kliknite za otkrivanje tajnih riječi"
   },

app/_locales/ht/messages.json

@@ -94,9 +94,6 @@
   "cancellationGasFee": {
     "message": "Anilasyon Gaz Chaj"
   },
-  "clickToAdd": {
-    "message": "Klike sou $ 1 pou ajoute yo nan kont ou"
-  },
   "close": {
     "message": "Fèmen"
   },

app/_locales/hu/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Lánc azonosítója"
   },
-  "clickToAdd": {
-    "message": "Kattintson $1-re, hogy hozzáadja a fiókjához"
-  },
   "clickToRevealSeed": {
     "message": "Kattintson ide a titkos szavak megjelenítéséhez"
   },

app/_locales/id/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "ID Rantai"
   },
-  "clickToAdd": {
-    "message": "Klik $1 untuk menambahkannya ke akun Anda"
-  },
   "clickToRevealSeed": {
     "message": "Klik di sini untuk mengungkapkan kata-kata rahasia"
   },

app/_locales/it/messages.json

@@ -255,9 +255,6 @@
   "chainId": {
     "message": "Blockchain ID"
   },
-  "clickToAdd": {
-    "message": "Clicca su $1 per aggiungerli al tuo account"
-  },
   "clickToRevealSeed": {
     "message": "Clicca qui per rivelare la tua frase segreta"
   },

app/_locales/kn/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "ಚೈನ್ ID"
   },
-  "clickToAdd": {
-    "message": "ನಿಮ್ಮ ಖಾತೆಗೆ ಅವರನ್ನು ಸೇರಿಸಲು $1ನಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ "
-  },
   "clickToRevealSeed": {
     "message": "ರಹಸ್ಯ ಪದಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸಲು ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ"
   },

app/_locales/ko/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "체인 ID"
   },
-  "clickToAdd": {
-    "message": "계정에 토큰을 추가하기 위해 $1를 클릭하세요."
-  },
   "clickToRevealSeed": {
     "message": "비밀 단어를 보기 위해 여기를 클릭하세요."
   },

app/_locales/lt/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Grandinės ID"
   },
-  "clickToAdd": {
-    "message": "Spustelėkite $1, kad juos pridėtumėte prie paskyros"
-  },
   "clickToRevealSeed": {
     "message": "Spustelėkite čia, kad atidengtumėte slaptus žodžius"
   },

app/_locales/lv/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "Ķēdes ID"
   },
-  "clickToAdd": {
-    "message": "Noklikšķiniet uz $1, lai pievienotu tos savam kontam"
-  },
   "clickToRevealSeed": {
     "message": "Klikšķiniet šeit, lai skatītu slepenos vārdus"
   },

app/_locales/ms/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "ID Rantaian"
   },
-  "clickToAdd": {
-    "message": "Klik pada $1 untuk menambahnya ke dalam akaun anda"
-  },
   "clickToRevealSeed": {
     "message": "Klik di sini untuk mendedahkan perkataan rahsia"
   },

app/_locales/no/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "Blokkjede "
   },
-  "clickToAdd": {
-    "message": "Klikk på $1 for a legge dem til kontoen din "
-  },
   "clickToRevealSeed": {
     "message": "Klikk her for å vise hemmelige ord "
   },

app/_locales/pl/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "Identyfikator łańcucha"
   },
-  "clickToAdd": {
-    "message": "Przycisnij $1, aby dodać go do swojego konta"
-  },
   "clickToRevealSeed": {
     "message": "Kliknij tutaj, aby odkryć tajne słowa"
   },

app/_locales/pt_BR/messages.json

@@ -194,9 +194,6 @@
   "chainId": {
     "message": "ID da Cadeia"
   },
-  "clickToAdd": {
-    "message": "Clique em $1 para adicioná-los à sua conta"
-  },
   "clickToRevealSeed": {
     "message": "Clique aqui para revelar as palavras secretas"
   },

app/_locales/ro/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "ID lanț"
   },
-  "clickToAdd": {
-    "message": "Faceți clic pe $1 pentru a-i adăuga contului dvs."
-  },
   "clickToRevealSeed": {
     "message": "Faceți clic aici pentru a arăta cuvintele secrete"
   },

app/_locales/ru/messages.json

@@ -656,9 +656,6 @@
   "chainId": {
     "message": "ID сети"
   },
-  "clickToAdd": {
-    "message": "Нажмите на $1, для добавления в свой аккаунт"
-  },
   "clickToRevealSeed": {
     "message": "Нажмите здесь, чтобы показать секретную фразу (сид)"
   },

app/_locales/sk/messages.json

@@ -191,9 +191,6 @@
   "chainId": {
     "message": "ID reťazca"
   },
-  "clickToAdd": {
-    "message": "Kliknutím na $1 ich pridáte do svojho účtu"
-  },
   "clickToRevealSeed": {
     "message": "Kliknutím sem odkryjete tajné slová"
   },

app/_locales/sl/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "ID verige"
   },
-  "clickToAdd": {
-    "message": "Kliknite na $1 za dodajo v vaš račun"
-  },
   "clickToRevealSeed": {
     "message": "Kliknite tukaj, če želite razkriti skrivne besede"
   },

app/_locales/sr/messages.json

@@ -197,9 +197,6 @@
   "cancelled": {
     "message": "Otkazano"
   },
-  "clickToAdd": {
-    "message": "Kliknite na $1 kako biste ih dodali na svoj nalog"
-  },
   "clickToRevealSeed": {
     "message": "Kliknite ovde kako biste otkrili tajne reči"
   },

app/_locales/sv/messages.json

@@ -194,9 +194,6 @@
   "cancelled": {
     "message": "Avbruten"
   },
-  "clickToAdd": {
-    "message": "Tryck på $1 för att lägga till dem på ditt konto."
-  },
   "clickToRevealSeed": {
     "message": "Klicka här för att visa hemliga ord"
   },

app/_locales/sw/messages.json

@@ -194,9 +194,6 @@
   "chainId": {
     "message": "Utambulisho wa Mnyororo"
   },
-  "clickToAdd": {
-    "message": "Bofya kwenye $1 ili kuongeza kwenye akaunti yako"
-  },
   "clickToRevealSeed": {
     "message": "Bofya hapa ili uonyeshe maneno ya siri"
   },

app/_locales/uk/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "ID мережі"
   },
-  "clickToAdd": {
-    "message": "Клацніть на $1, щоб додати їх до вашого облікового запису"
-  },
   "clickToRevealSeed": {
     "message": "Клацніть тут, щоб відкрити секретні слова"
   },

app/_locales/zh_CN/messages.json

@@ -200,9 +200,6 @@
   "chainId": {
     "message": "链 ID"
   },
-  "clickToAdd": {
-    "message": "点击 $1 将其加入您的个人账户"
-  },
   "clickToRevealSeed": {
     "message": "点击此处显示密语"
   },

app/_locales/zh_TW/messages.json

@@ -197,9 +197,6 @@
   "chainId": {
     "message": "鏈 ID"
   },
-  "clickToAdd": {
-    "message": "點選下方 $1 新增資訊"
-  },
   "clickToRevealSeed": {
     "message": "點選顯示助憶詞"
   },

test/e2e/metamask-ui.spec.js

@@ -808,7 +808,7 @@ describe('MetaMask', function () {
     })
 
     it('clicks on the Add Token button', async function () {
-      await driver.clickElement(By.xpath(`//div[contains(text(), 'Add Token')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Add Token')]`))
       await driver.delay(regularDelayMs)
     })
 
@@ -1239,7 +1239,7 @@ describe('MetaMask', function () {
 
   describe('Add existing token using search', function () {
     it('clicks on the Add Token button', async function () {
-      await driver.clickElement(By.xpath(`//div[contains(text(), 'Add Token')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Add Token')]`))
       await driver.delay(regularDelayMs)
     })
 

ui/app/components/app/add-token-button/add-token-button.component.js

@@ -20,14 +20,13 @@ export default class AddTokenButton extends PureComponent {
 
     return (
       <div className="add-token-button">
-        <h1 className="add-token-button__help-header">{t('missingYourTokens')}</h1>
+        <span className="add-token-button__description">{t('missingYourTokens')}</span>
-        <p className="add-token-button__help-desc">{t('clickToAdd', [t('addToken')])}</p>
+        <button
-        <div
           className="add-token-button__button"
           onClick={onClick}
         >
           {t('addToken')}
-        </div>
+        </button>
       </div>
     )
   }

ui/app/components/app/add-token-button/index.scss

@@ -1,23 +1,22 @@
 .add-token-button {
-  display: flex;
+  width: 100%;
-  flex-direction: column;
+  height: 90px;
-  color: lighten($scorpion, 25%);
+  padding: 20px;
-  width: 185px;
-  margin: 36px auto;
   text-align: center;
-
+  font-size: 1rem;
-  &__help-header {
-    font-weight: bold;
-    font-size: 1rem;
-  }
-
-  &__help-desc {
-    font-size: 0.75rem;
-    margin-top: 1rem;
-  }
 
   &__button {
-    @extend %small-link;
+    background-color: transparent;
-    margin: 1rem;
+    color: $Blue-500;
+    display: inline-block;
+    font-size: 1rem;
+
+    &:hover {
+      color: $Blue-400;
+    }
+
+    &:active {
+      color: $Blue-600;
+    }
   }
 }