Design QA fixes for v8 (#8630)

app/_locales/en/messages.json

@@ -1,6 +1,6 @@
 {
   "connectedSites": {
-    "message": "Connected Sites"
+    "message": "Connected sites"
   },
   "connectedSitesDescription": {
     "message": "$1 is connected to these sites. They can view your account address.",
@@ -32,9 +32,6 @@
   "disconnectThisAccount": {
     "message": "Disconnect this account"
   },
-  "viewConnectedSites": {
-    "message": "View connected sites"
-  },
   "permissions": {
     "message": "Permissions"
   },
@@ -132,7 +129,7 @@
     "message": "Account"
   },
   "accountDetails": {
-    "message": "Account Details"
+    "message": "Account details"
   },
   "accountName": {
     "message": "Account Name"
@@ -632,7 +629,7 @@
     "message": "Estimated Processing Times"
   },
   "expandView": {
-    "message": "Expand View"
+    "message": "Expand view"
   },
   "exportPrivateKey": {
     "message": "Export Private Key"
@@ -1594,7 +1591,7 @@
     "message": "Unapproved"
   },
   "unconnectedAccountAlertDescription": {
-    "message": "This account is not connected to this site."
+    "message": "$1 is not connected to $2."
   },
   "unconnectedAccountAlertDisableTooltip": {
     "message": "This can be changed in \"Settings > Alerts\""
@@ -1734,5 +1731,11 @@
   "encryptionPublicKeyNotice": {
     "message": "$1 would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.",
     "description": "$1 is website or dapp name"
+  },
+  "thisSite": {
+    "message": "this site"
+  },
+  "thisAccount": {
+    "message": "This account"
   }
 }

app/images/icons/connected-sites-white.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" fill="#FFFFFF"/>
+</svg>

app/images/icons/disconnect.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9717 11.5576C13.6494 10.5858 14.0469 9.40401 14.0469 8.12939C14.0469 4.81569 11.3606 2.12939 8.04688 2.12939C6.77226 2.12939 5.59048 2.52684 4.61869 3.20457L6.70652 5.2924C7.09817 5.10496 7.53683 5 8 5C9.65685 5 11 6.34315 11 8C11 8.46317 10.895 8.90183 10.7076 9.29348L12.9717 11.5576ZM12.9987 14.413L14.142 15.5563C14.5325 15.9468 15.1657 15.9468 15.5562 15.5563C15.9468 15.1658 15.9468 14.5326 15.5562 14.1421L14.4026 12.9885C15.434 11.6415 16.0469 9.957 16.0469 8.12939C16.0469 3.71112 12.4652 0.129395 8.04688 0.129395C6.21927 0.129395 4.5348 0.742241 3.18776 1.77364L2.1212 0.707079C1.73067 0.316555 1.09751 0.316555 0.706986 0.707079C0.316461 1.0976 0.316461 1.73077 0.706986 2.12129L1.76322 3.17753C0.688345 4.53962 0.046875 6.25959 0.046875 8.12939C0.046875 12.5477 3.6286 16.1294 8.04688 16.1294C9.91667 16.1294 11.6367 15.4879 12.9987 14.413ZM11.5713 12.9857C10.5818 13.7051 9.36389 14.1294 8.04688 14.1294C4.73317 14.1294 2.04688 11.4431 2.04688 8.12939C2.04688 6.81238 2.47121 5.59447 3.19062 4.60493L5.29234 6.70665C5.10494 7.09827 5 7.53688 5 8C5 9.65685 6.34315 11 8 11C8.46312 11 8.90173 10.8951 9.29335 10.7077L11.5713 12.9857Z" fill="#24292E"/>
+</svg>

test/e2e/permissions.spec.js

@@ -132,9 +132,9 @@ describe('MetaMask', function () {
     })
 
     it('shows connected sites', async function () {
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Connected Sites')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Connected sites')]`))
 
-      await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected Sites')]`))
+      await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected sites')]`))
 
       const domains = await driver.findClickableElements(By.css('.connected-sites-list__domain-name'))
       assert.equal(domains.length, 1)

ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js

@@ -13,6 +13,7 @@ import Popover from '../../../ui/popover'
 import Button from '../../../ui/button'
 import Checkbox from '../../../ui/check-box'
 import Tooltip from '../../../ui/tooltip-v2'
+import { getSelectedIdentity, getOriginOfCurrentTab } from '../../../../selectors'
 
 const {
   ERROR,
@@ -23,6 +24,8 @@ const SwitchToUnconnectedAccountAlert = () => {
   const t = useContext(I18nContext)
   const dispatch = useDispatch()
   const alertState = useSelector(getAlertState)
+  const origin = useSelector(getOriginOfCurrentTab)
+  const selectedIdentity = useSelector(getSelectedIdentity)
   const [dontShowThisAgain, setDontShowThisAgain] = useState(false)
 
   const onClose = async () => {
@@ -31,11 +34,14 @@ const SwitchToUnconnectedAccountAlert = () => {
       : dispatch(dismissAlert())
   }
 
+  const accountName = selectedIdentity?.name || t('thisAccount')
+  const siteName = origin || t('thisSite')
+
   return (
     <Popover
       contentClassName="unconnected-account-alert__content"
       title={t('notConnected')}
-      subtitle={t('unconnectedAccountAlertDescription')}
+      subtitle={t('unconnectedAccountAlertDescription', [ accountName, siteName ])}
       onClose={onClose}
       footer={(
         <>

ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js

@@ -39,7 +39,7 @@ export default class ConnectedAccountsListPermissions extends PureComponent {
 
     return (
       <div className="connected-accounts-permissions">
-        <p className="connected-accounts-permissions__header">
+        <p className="connected-accounts-permissions__header" onClick={this.toggleExpanded}>
           <strong>{t('permissions')}</strong>
           <button
             className={classnames('fas', {
@@ -47,25 +47,23 @@ export default class ConnectedAccountsListPermissions extends PureComponent {
               'fa-angle-up': expanded,
             })}
             title={t('showPermissions')}
-            onClick={this.toggleExpanded}
           />
         </p>
-        {
-          expanded
-            ? (
-              <>
-                <p>{t('authorizedPermissions')}:</p>
-                <ul className="connected-accounts-permissions__list">
-                  {permissions.map(({ key, description }) => (
-                    <li key={key} className="connected-accounts-permissions__list-item">
-                      <i className="fas fa-check-square" />&nbsp;{description}
-                    </li>
-                  ))}
-                </ul>
-              </>
-            )
-            : null
-        }
+        <div
+          className={classnames('connected-accounts-permissions__list-container', {
+            'connected-accounts-permissions__list-container--expanded': expanded,
+          })}
+        >
+          <p>{t('authorizedPermissions')}:</p>
+          <ul className="connected-accounts-permissions__list">
+            {permissions.map(({ key, description }) => (
+              <li key={key} className="connected-accounts-permissions__list-item">
+                <i className="fas fa-check-square" />&nbsp;{description}
+              </li>
+            ))}
+          </ul>
+        </div>
+
       </div>
     )
   }

ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js

@@ -121,7 +121,7 @@ export default class ConnectedAccountsList extends PureComponent {
                     )
                   }
                   <MenuItem
-                    iconClassName="fas fa-ban"
+                    iconClassNames="disconnect-icon"
                     onClick={this.disconnectAccount}
                   >
                     {t('disconnectThisAccount')}

ui/app/components/app/connected-accounts-list/index.scss

@@ -92,6 +92,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    cursor: pointer;
 
     font-size: 14px;
     line-height: 20px;
@@ -115,6 +116,19 @@
     i {
       padding-right: 8px;
       font-size: 18px;
+      color: $Grey-800;
+    }
+  }
+
+  &__list-container {
+    max-height: 0px;
+    overflow: hidden;
+    height: auto;
+    transition: max-height 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
+
+    &--expanded {
+      // arbitrarily set hard coded value for effect to work
+      max-height: 100px;
     }
   }
 }

ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js

@@ -32,7 +32,9 @@ export default class ConnectedStatusIndicator extends Component {
           'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
           'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED,
         })}
-      />
+      >
+        <span className="connected-status-indicator__inner-circle" />
+      </div>
     )
   }
 

ui/app/components/app/connected-status-indicator/index.scss

@@ -16,22 +16,37 @@
     background-color: #EDEDED;
   }
 
+  &__inner-circle {
+    border-radius: 4px;
+    height: 4px;
+    width: 4px;
+    background-color: transparent;
+  }
+
   &__green-circle, &__yellow-circle, &__grey-circle {
     border-radius: 4px;
     height: 8px;
     width: 8px;
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__green-circle {
-    background: #4CD964;
+    border-color: #4CD964;
+  }
+
+  &__green-circle &__inner-circle {
+    background-color: #4CD964;
   }
 
   &__yellow-circle {
-    background: #FFD33D;
+    border-color: #FFD33D;
   }
 
   &__grey-circle {
-    background: $Grey-100;
+    border-color: $Grey-500;
   }
 
   &__text {

ui/app/components/app/dropdowns/account-details-dropdown/account-details-dropdown.component.js

@@ -127,7 +127,7 @@ export default class AccountDetailsDropdown extends Component {
           }}
           text={this.context.t('connectedSites')}
           icon={(
-            <img src="images/connect-white.svg" style={{ height: '15px' }} alt="" />
+            <img src="images/icons/connected-sites-white.svg" style={{ height: '15px' }} alt="" />
           )}
         />
         {

ui/app/components/app/token-cell/token-cell.scss

@@ -16,7 +16,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   &__token-balance, &__token-symbol {
     font-size: 16px;
     flex: 0 0 auto;
-    height: 16px;
     color: $Black-100;
   }
 

ui/app/components/ui/menu/menu.scss

@@ -43,4 +43,16 @@
   &__icon {
     margin-right: 8px;
   }
+
+  .disconnect-icon {
+    &:before {
+      content: "";
+      background-image: url(/images/icons/disconnect.svg);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      padding: 8px;
+      display: flex;
+    }
+  }
 }

ui/app/pages/connected-accounts/connected-accounts.component.js

@@ -54,11 +54,6 @@ export default class ConnectedAccounts extends PureComponent {
         subtitle={connectedAccounts.length ? connectedAccountsDescription : t('connectedAccountsEmptyDescription')}
         onClose={() => history.push(DEFAULT_ROUTE)}
         footerClassName="connected-accounts__footer"
-        footer={
-          connectedAccounts.length
-            ? null
-            : <a onClick={this.viewConnectedSites}>{t('viewConnectedSites')}</a>
-        }
       >
         <ConnectedAccountsList
           accountToConnect={accountToConnect}