Convert Connected Sites page to modal (#8254)

This commit updates the existing _Connected Sites_ section to a modal using
the `Popover` component. This will serve as a base for the new modal design.

test/e2e/permissions.spec.js

@@ -135,7 +135,7 @@ describe('MetaMask', function () {
     it('shows connected sites', async function () {
       await driver.clickElement(By.xpath(`//button[contains(text(), 'Connected Sites')]`))
 
-      await driver.findElement(By.css('.connected-sites__title'))
+      await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected Sites')]`))
 
       const domains = await driver.findClickableElements(By.css('.connected-sites-list__domain'))
       assert.equal(domains.length, 1)
@@ -163,6 +163,7 @@ describe('MetaMask', function () {
       await driver.switchToWindow(extension)
 
       await driver.clickElement(By.xpath(`//button[contains(text(), 'Disconnect All')]`))
+      await driver.clickElement(By.css('.popover-header__close'))
 
       const disconnectModal = await driver.findElement(By.css('span .modal'))
 

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

@@ -4,6 +4,7 @@ import ConnectedSitesList from '../../components/app/connected-sites-list'
 import {
   DEFAULT_ROUTE,
 } from '../../helpers/constants/routes'
+import Popover from '../../components/ui/popover/popover.component'
 
 export default class ConnectSites extends Component {
   static propTypes = {
@@ -19,18 +20,9 @@ export default class ConnectSites extends Component {
       history,
     } = this.props
     return (
-      <div className="connected-sites">
-        <div className="connected-sites__header">
-          <div className="connected-sites__title">
-            { this.context.t('connectedSites') }
-          </div>
-          <div
-            className="settings-page__close-button"
-            onClick={() => history.push(DEFAULT_ROUTE)}
-          />
-        </div>
+      <Popover title={this.context.t('connectedSites')} onClose={() => history.push(DEFAULT_ROUTE)}>
         <ConnectedSitesList />
-      </div>
+      </Popover>
     )
   }
 }

ui/app/pages/connected-sites/index.scss

@@ -1,37 +0,0 @@
-.connected-sites {
-  width: 408px;
-  background-color: #fff;
-  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
-  z-index: 25;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  flex-flow: column;
-  border-radius: 8px;
-  overflow-y: auto;
-
-  @media screen and (min-width: 576px) {
-    max-height: 82vh;
-    min-height: 570px;
-    -webkit-box-flex: 0;
-    flex: 0 0 auto;
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-  &__header {
-    display: flex;
-    height: 67px;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding-left: 16px;
-    padding-right: 16px;
-    border-bottom: 1px solid #C4C4C4;
-  }
-
-  &__title {
-    @extend %header--24;
-  }
-}

ui/app/pages/home/home.component.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Media from 'react-media'
-import { Redirect } from 'react-router-dom'
+import { Redirect, Route } from 'react-router-dom'
 import { formatDate } from '../../helpers/utils/util'
 import HomeNotification from '../../components/app/home-notification'
 import DaiMigrationNotification from '../../components/app/dai-migration-component'
@@ -10,6 +10,7 @@ import WalletView from '../../components/app/wallet-view'
 import TransactionList from '../../components/app/transaction-list'
 import TransactionViewBalance from '../../components/app/transaction-view-balance'
 import MenuBar from '../../components/app/menu-bar'
+import ConnectedSites from '../connected-sites/connected-sites.component'
 
 import {
   RESTORE_VAULT_ROUTE,
@@ -17,6 +18,7 @@ import {
   CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
   INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   CONNECT_ROUTE,
+  CONNECTED_ROUTE,
 } from '../../helpers/constants/routes'
 
 export default class Home extends PureComponent {
@@ -170,6 +172,7 @@ export default class Home extends PureComponent {
 
     return (
       <div className="main-container">
+        <Route path={CONNECTED_ROUTE} component={ConnectedSites} />
         <div className="home__container">
           <Media
             query="(min-width: 576px)"

ui/app/pages/index.scss

@@ -19,5 +19,3 @@
 @import 'confirm-approve/index';
 
 @import 'permissions-connect/index';
-
-@import 'connected-sites/index';

ui/app/pages/routes/routes.component.js

@@ -15,7 +15,6 @@ import Authenticated from '../../helpers/higher-order-components/authenticated'
 import Initialized from '../../helpers/higher-order-components/initialized'
 import Lock from '../lock'
 import PermissionsConnect from '../permissions-connect'
-import ConnectedSites from '../connected-sites'
 import RestoreVaultPage from '../keychains/restore-vault'
 import RevealSeedConfirmation from '../keychains/reveal-seed'
 import MobileSyncPage from '../mobile-sync'
@@ -38,7 +37,6 @@ import {
   CONFIRM_ADD_TOKEN_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONNECT_ROUTE,
-  CONNECTED_ROUTE,
   DEFAULT_ROUTE,
   INITIALIZE_ROUTE,
   INITIALIZE_UNLOCK_ROUTE,
@@ -127,8 +125,7 @@ export default class Routes extends Component {
         <Authenticated path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE} component={ConfirmAddSuggestedTokenPage} exact />
         <Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
         <Authenticated path={`${CONNECT_ROUTE}/:id`} component={PermissionsConnect} />
-        <Authenticated path={CONNECTED_ROUTE} component={ConnectedSites} exact />
-        <Authenticated path={DEFAULT_ROUTE} component={Home} exact />
+        <Authenticated path={DEFAULT_ROUTE} component={Home} />
       </Switch>
     )