From 606618ee28f09346ace9e3f4a271ff6381549f42 Mon Sep 17 00:00:00 2001
From: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Date: Thu, 28 May 2020 15:53:11 -0700
Subject: [PATCH] Update eth_accounts permission description (#8693)

* update eth_accounts permission description

* make it easier to find permission name locale message

* handle longer permissions descriptions in UI
---
 app/_locales/en/messages.json                        |  2 +-
 .../connected-accounts-list-permissions.component.js |  6 +++---
 .../app/connected-accounts-list/index.scss           |  3 +++
 .../permission-page-container-content.component.js   | 12 ++++++------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index a4a5a35b0..82b4af93b 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1,6 +1,6 @@
 {
   "eth_accounts": {
-    "message": "View your public address (required)",
+    "message": "View the addresses of your permitted accounts (required)",
     "description": "The description for the `eth_accounts` permission"
   },
   "connectedSites": {
diff --git a/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js b/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js
index 15d643238..7ee497d53 100644
--- a/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js
+++ b/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js
@@ -55,9 +55,9 @@ export default class ConnectedAccountsListPermissions extends PureComponent {
         >
           <p>{t('authorizedPermissions')}:</p>
           <ul className="connected-accounts-permissions__list">
-            {permissions.map(({ key }) => (
-              <li key={key} className="connected-accounts-permissions__list-item">
-                <i className="fas fa-check-square" />&nbsp;{t(key)}
+            {permissions.map(({ key: permissionName }) => (
+              <li key={permissionName} className="connected-accounts-permissions__list-item">
+                <i className="fas fa-check-square" />{t(permissionName)}
               </li>
             ))}
           </ul>
diff --git a/ui/app/components/app/connected-accounts-list/index.scss b/ui/app/components/app/connected-accounts-list/index.scss
index 0e610b1c6..edb77009d 100644
--- a/ui/app/components/app/connected-accounts-list/index.scss
+++ b/ui/app/components/app/connected-accounts-list/index.scss
@@ -113,7 +113,10 @@
   }
 
   &__list-item {
+    display: flex;
+
     i {
+      display: block;
       padding-right: 8px;
       font-size: 18px;
       color: $Grey-800;
diff --git a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
index 71e94c0e1..db7a225b3 100644
--- a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
@@ -67,23 +67,23 @@ export default class PermissionPageContainerContent extends PureComponent {
     } = this.props
     const { t } = this.context
 
-    const items = Object.keys(selectedPermissions).map((methodName) => {
+    const items = Object.keys(selectedPermissions).map((permissionName) => {
 
-      const description = t(methodName)
+      const description = t(permissionName)
       // don't allow deselecting eth_accounts
-      const isDisabled = methodName === 'eth_accounts'
+      const isDisabled = permissionName === 'eth_accounts'
 
       return (
         <div
           className="permission-approval-container__content__permission"
-          key={methodName}
+          key={permissionName}
           onClick={() => {
             if (!isDisabled) {
-              onPermissionToggle(methodName)
+              onPermissionToggle(permissionName)
             }
           }}
         >
-          { selectedPermissions[methodName]
+          { selectedPermissions[permissionName]
             ? <i title={t('permissionCheckedIconDescription')} className="fa fa-check-square" />
             : <i title={t('permissionUncheckedIconDescription')} className="fa fa-square" />
           }