Refactor common components

package.json

@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "@aragon/templates-tokens": "^1.1.1",
-    "@aragon/ui": "^0.31.0",
+    "@aragon/ui": "^0.32.0",
     "@aragon/wrapper": "^3.0.0-beta.5",
     "@babel/polyfill": "^7.0.0",
     "bn.js": "4.11.6",

src/apps/Apps/Apps.js

@@ -2,29 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
-  Card,
-  Button,
   Badge,
-  Text,
+  Button,
+  Card,
   SafeLink,
-  theme,
+  Text,
+  breakpoint,
   colors,
+  theme,
   unselectable,
-  font,
-  breakpoint,
-  Viewport,
 } from '@aragon/ui'
 import AppLayout from '../../components/AppLayout/AppLayout'
-import MenuButton from '../../components/MenuPanel/MenuButton'
 
 import defaultIcon from './icons/default.svg'
 import payrollIcon from './icons/payroll.svg'
 import espressoIcon from './icons/espresso.svg'
 
 class Apps extends React.Component {
   static propTypes = {
-    onMessage: PropTypes.func,
+    onMessage: PropTypes.func.isRequired,
   }
+
   handleMenuPanelOpen = () => {
     this.props.onMessage({
       data: { from: 'app', name: 'menuPanel', value: true },
@@ -34,27 +32,20 @@ class Apps extends React.Component {
   render() {
     return (
       <AppLayout
-        title={
-          <AppBarTitle>
-            <Viewport>
-              {({ below }) =>
-                below('medium') && (
-                  <MenuButton onClick={this.handleMenuPanelOpen} />
-                )
-              }
-            </Viewport>
-            <AppBarLabel>Apps</AppBarLabel>
-          </AppBarTitle>
-        }
-        endContent={
-          <DevPortalAnchor
-            mode="strong"
-            href="https://hack.aragon.org/"
-            target="_blank"
-          >
-            Create a new app
-          </DevPortalAnchor>
-        }
+        title="Apps"
+        onMenuOpen={this.handleMenuPanelOpen}
+        mainButton={{
+          button: (
+            <DevPortalAnchor
+              mode="strong"
+              href="https://hack.aragon.org/"
+              target="_blank"
+            >
+              Create a new app
+            </DevPortalAnchor>
+          ),
+        }}
+        smallViewPadding={20}
       >
         <Content>
           <p>
@@ -97,31 +88,12 @@ class Apps extends React.Component {
   }
 }
 
-const AppBarTitle = styled.span`
-  display: flex;
-  align-items: center;
-  margin-left: -30px;
-`
-
-const AppBarLabel = styled.span`
-  margin-left: 8px;
-  ${font({ size: 'xxlarge' })};
-
-  ${breakpoint(
-    'medium',
-    `
-      margin-left: 24px;
-    `
-  )};
-`
-
 const DevPortalAnchor = styled(Button.Anchor)`
+  margin-right: 20px;
   display: block;
 `
 
 const Content = styled.div`
-  padding: 30px;
-
   > h1 {
     margin: 30px 0;
     font-weight: 600;

src/apps/Permissions/AppPermissions.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Table, TableRow, Text } from '@aragon/ui'
+import { Button, Table, TableRow, Text, Viewport } from '@aragon/ui'
 import IdentityBadge from '../../components/IdentityBadge'
 import { TableHeader, TableCell, FirstTableCell, LastTableCell } from './Table'
 import { PermissionsConsumer } from '../../contexts/PermissionsContext'
@@ -39,25 +39,33 @@ class AppPermissions extends React.PureComponent {
                       : 'No permissions set.'}
                   </EmptyBlock>
                 ) : (
-                  <Table
-                    header={
-                      <TableRow>
-                        <TableHeader title="Action" style={{ width: '20%' }} />
-                        <TableHeader title="Allowed for" />
-                        <TableHeader />
-                      </TableRow>
-                    }
-                  >
-                    {appPermissions.map(({ role, entity }, i) => (
-                      <Row
-                        key={i}
-                        role={role}
-                        entity={entity}
-                        proxyAddress={address}
-                        onRevoke={revokePermission}
-                      />
-                    ))}
-                  </Table>
+                  <Viewport>
+                    {({ below }) => (
+                      <Table
+                        noSideBorders={below('medium')}
+                        header={
+                          <TableRow>
+                            <TableHeader
+                              title="Action"
+                              style={{ width: '20%' }}
+                            />
+                            <TableHeader title="Allowed for" />
+                            <TableHeader />
+                          </TableRow>
+                        }
+                      >
+                        {appPermissions.map(({ role, entity }, i) => (
+                          <Row
+                            key={i}
+                            role={role}
+                            entity={entity}
+                            proxyAddress={address}
+                            onRevoke={revokePermission}
+                          />
+                        ))}
+                      </Table>
+                    )}
+                  </Viewport>
                 )}
               </Section>
               <EntityPermissions

src/apps/Permissions/AppRoles.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Table, TableRow, Text } from '@aragon/ui'
+import { Button, Table, TableRow, Text, Viewport } from '@aragon/ui'
 import { AppType, EthereumAddressType } from '../../prop-types'
 import { TableHeader, TableCell, FirstTableCell, LastTableCell } from './Table'
 import IdentityBadge from '../../components/IdentityBadge'
@@ -44,24 +44,32 @@ class AppRoles extends React.PureComponent {
               {loading || roles.length === 0 ? (
                 <EmptyBlock>{loading ? loadingLabel : emptyLabel}</EmptyBlock>
               ) : (
-                <Table
-                  header={
-                    <TableRow>
-                      <TableHeader title="Action" style={{ width: '20%' }} />
-                      <TableHeader title="Managed by" />
-                      <TableHeader />
-                    </TableRow>
-                  }
-                >
-                  {roles.map(({ role, manager }, i) => (
-                    <RoleRow
-                      key={i}
-                      role={role}
-                      manager={manager}
-                      onManage={this.handleManageRole}
-                    />
-                  ))}
-                </Table>
+                <Viewport>
+                  {({ below }) => (
+                    <Table
+                      noSideBorders={below('medium')}
+                      header={
+                        <TableRow>
+                          <TableHeader
+                            title="Action"
+                            style={{ width: '20%' }}
+                          />
+                          <TableHeader title="Managed by" />
+                          <TableHeader />
+                        </TableRow>
+                      }
+                    >
+                      {roles.map(({ role, manager }, i) => (
+                        <RoleRow
+                          key={i}
+                          role={role}
+                          manager={manager}
+                          onManage={this.handleManageRole}
+                        />
+                      ))}
+                    </Table>
+                  )}
+                </Viewport>
               )}
             </Section>
           )

src/apps/Permissions/EmptyBlock.js

@@ -2,18 +2,21 @@ import styled from 'styled-components'
 import { Card, breakpoint } from '@aragon/ui'
 
 const EmptyBlock = styled(Card)`
-  margin: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 180px;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-radius: 0;
 
   ${breakpoint(
     'medium',
     `
-      margin: 0;
-      width: 100%;
+      border-left-width: 1px;
+      border-right-width: 1px;
+      border-radius: 3px;
     `
   )}
 `

src/apps/Permissions/EntityPermissions.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Table, TableRow, Text } from '@aragon/ui'
+import { Button, Table, TableRow, Text, Viewport } from '@aragon/ui'
 import { TableHeader, TableCell, FirstTableCell, LastTableCell } from './Table'
 import Section from './Section'
 import EmptyBlock from './EmptyBlock'
@@ -40,30 +40,38 @@ class EntityPermissions extends React.PureComponent {
                   {loading ? loadPermissionsLabel : noPermissionsLabel}
                 </EmptyBlock>
               ) : (
-                <Table
-                  header={
-                    <TableRow>
-                      <TableHeader title="Action" style={{ width: '20%' }} />
-                      <TableHeader title="On app" />
-                      <TableHeader />
-                    </TableRow>
-                  }
-                >
-                  {roles.map(
-                    ({ role, roleBytes, roleFrom, proxyAddress }, i) => (
-                      <Row
-                        key={i}
-                        entityAddress={address}
-                        id={(role && role.id) || 'Unknown'}
-                        roleBytes={roleBytes}
-                        action={(role && role.name) || 'Unknown'}
-                        app={roleFrom.app}
-                        proxyAddress={proxyAddress}
-                        onRevoke={revokePermission}
-                      />
-                    )
+                <Viewport>
+                  {({ below }) => (
+                    <Table
+                      noSideBorders={below('medium')}
+                      header={
+                        <TableRow>
+                          <TableHeader
+                            title="Action"
+                            style={{ width: '20%' }}
+                          />
+                          <TableHeader title="On app" />
+                          <TableHeader />
+                        </TableRow>
+                      }
+                    >
+                      {roles.map(
+                        ({ role, roleBytes, roleFrom, proxyAddress }, i) => (
+                          <Row
+                            key={i}
+                            entityAddress={address}
+                            id={(role && role.id) || 'Unknown'}
+                            roleBytes={roleBytes}
+                            action={(role && role.name) || 'Unknown'}
+                            app={roleFrom.app}
+                            proxyAddress={proxyAddress}
+                            onRevoke={revokePermission}
+                          />
+                        )
+                      )}
+                    </Table>
                   )}
-                </Table>
+                </Viewport>
               )}
             </Section>
           )

src/apps/Permissions/Home/BrowseByApp.js

@@ -42,7 +42,7 @@ const Apps = styled.div`
   display: grid;
   grid-gap: 10px;
   grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
-  margin: 0 30px;
+  margin: 0 20px;
 
   ${breakpoint(
     'medium',