Merge pull request #1186 from AutarkLabs/newstyle

New Style updates for Address Book, Allocations, Dot Voting

apps/address-book/app/components/App/App.js

@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
 
 import { useAragonApi } from '@aragon/api-react'
-import { AppBar, AppView, Main, SidePanel } from '@aragon/ui'
+import { Button, Header, IconPlus, Main, SidePanel } from '@aragon/ui'
 
-import { AppTitle, AppTitleButton } from '../../../../../shared/ui'
 import { IdentityProvider } from '../../../../../shared/identity'
 import Entities from './Entities'
 import NewEntity from '../Panel/NewEntity'
@@ -13,7 +11,7 @@ const ASSETS_URL = './aragon-ui'
 
 const App = () => {
   const [ panelVisible, setPanelVisible ] = useState(false)
-  const { api, appState = {}, displayMenuButton = false } = useAragonApi()
+  const { api, appState = {} } = useAragonApi()
 
   const { entries = [] } = appState
 
@@ -42,34 +40,21 @@ const App = () => {
 
   return (
     <Main assetsUrl={ASSETS_URL}>
+      <Header
+        primary="Address Book"
+        secondary={
+          <Button mode="strong" icon={<IconPlus />} onClick={newEntity} label="New Entity" />
+        }
+      />
       <IdentityProvider
         onResolve={handleResolveLocalIdentity}
         onShowLocalIdentityModal={handleShowLocalIdentityModal}
       >
-        <AppView
-          appBar={
-            <AppBar
-              endContent={
-                <AppTitleButton caption="New Entity" onClick={newEntity} />
-              }
-            >
-              <AppTitle
-                css="padding-left: 30px"
-                displayMenuButton={displayMenuButton}
-                title="Address Book"
-              />
-            </AppBar>
-          }
-        >
-          <ScrollWrapper>
-            <Entities
-              entities={entries}
-              onNewEntity={newEntity}
-              onRemoveEntity={removeEntity}
-            />
-          </ScrollWrapper>
-        </AppView>
-
+        <Entities
+          entities={entries}
+          onNewEntity={newEntity}
+          onRemoveEntity={removeEntity}
+        />
         <SidePanel onClose={closePanel} opened={panelVisible} title="New entity">
           <NewEntity onCreateEntity={createEntity} />
         </SidePanel>
@@ -78,11 +63,4 @@ const App = () => {
   )
 }
 
-const ScrollWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-  overflow: auto;
-  flex-grow: 1;
-`
 export default App

apps/address-book/app/components/App/Entities.js

@@ -7,10 +7,7 @@ import {
   Badge,
   ContextMenu,
   ContextMenuItem,
-  Table,
-  TableCell,
-  TableHeader,
-  TableRow,
+  DataView,
   Text,
 } from '@aragon/ui'
 
@@ -34,55 +31,53 @@ const Entities = ({ entities, onNewEntity, onRemoveEntity }) => {
     return <Empty action={onNewEntity} />
   } else {
     return (
-      <Table
-        header={
-          <TableRow>
-            <TableHeader title="Entity" />
-          </TableRow>
+      <DataView
+        mode="table"
+        fields={[ 'Entity', '' ]}
+        entries={
+          entities.sort(entitiesSort).map(({ data: { name, entryAddress, entryType } }) =>
+            [ name, entryAddress, entryType ]
+          )
         }
-      >
-        {entities.sort(entitiesSort).map(({ data: { name, entryAddress, entryType } }) => {
+
+        renderEntry={([ name, entryAddress, entryType ]) => {
           const typeRow = ENTITY_TYPES.filter(row => row.name === entryType)[0]
-          return (
-            <TableRow key={entryAddress}>
-              <EntityCell>
-                <EntityWrapper>
-                  <Text
-                    size="xlarge"
-                    style={{
-                      paddingBottom: '5px',
-                    }}
-                  >
-                    {name}
-                  </Text>
-                  <LocalIdentityBadge
-                    networkType={network && network.type}
-                    entity={entryAddress}
-                    shorten={true}
-                  />
-                </EntityWrapper>
-              </EntityCell>
-              <EntityCell align="right">
-                <Badge foreground={typeRow.fg} background={typeRow.bg}>
-                  {typeRow.name}
-                </Badge>
-              </EntityCell>
-              <EntityCell
-                align="right"
-                style={{
-                  width: '30px',
-                }}
+          const values = [
+            // eslint-disable-next-line react/jsx-key
+            <EntityWrapper>
+              <Text
+                size="xlarge"
+                css="padding-bottom: 5px"
               >
-                <ContextMenu>
-                  <ContextMenuItem onClick={removeEntity(entryAddress)}>
-                    Remove
-                  </ContextMenuItem>
-                </ContextMenu>
-              </EntityCell>
-            </TableRow>
-          )
-        })}
-      </Table>
+                {name}
+              </Text>
+              <LocalIdentityBadge
+                networkType={network && network.type}
+                entity={entryAddress}
+                shorten={true}
+              />
+            </EntityWrapper>,
+
+            // eslint-disable-next-line react/jsx-key
+            <Badge
+              foreground={typeRow.fg}
+              background={typeRow.bg}
+              css="text-align: right"
+            >
+              {typeRow.name}
+            </Badge>
+          ]
+          return values
+        }}
+
+        renderEntryActions={([ , entryAddress ]) => (
+          <ContextMenu>
+            <ContextMenuItem onClick={removeEntity(entryAddress)}>
+                Remove
+            </ContextMenuItem>
+          </ContextMenu>
+        )}
+      />
     )
   }
 }
@@ -94,12 +89,10 @@ Entities.propTypes = {
   onRemoveEntity: PropTypes.func.isRequired,
 }
 
-const EntityCell = styled(TableCell)`
-  padding: 15px;
-`
 const EntityWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-left: 10px;
+  padding: 15px 0;
 `
 export default Entities

apps/address-book/app/components/Card/Empty.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { EmptyStateCard, unselectable } from '@aragon/ui'
+import { Button, EmptyStateCard, GU, unselectable } from '@aragon/ui'
 import icon from '../../assets/empty-ab.svg'
 
 const Icon = () => <img src={icon} alt="Empty entities icon" />
@@ -11,9 +11,11 @@ const Empty = ({ action }) => (
     <EmptyStateCard
       title="You have not added anyone  to the address book."
       text="Get started now by adding a new entity."
-      icon={<Icon />}
+      illustration={<Icon />}
       actionText="New Entity"
-      onActivate={action}
+      action={
+        <Button onClick={action}>New Entity</Button>
+      }
     />
   </EmptyWrapper>
 )
@@ -24,10 +26,10 @@ Empty.propTypes = {
 
 const EmptyWrapper = styled.div`
   ${unselectable};
-  flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: calc(100vh - ${14 * GU}px);
 `
 
 export default Empty

apps/address-book/app/components/Form/Field/FormField.js

@@ -1,32 +1,40 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SidePanelSeparator, Text, theme } from '@aragon/ui'
-
-import { FieldTitle } from '.'
+import { SidePanelSeparator, Text, textStyle, useTheme } from '@aragon/ui'
 
 const FormField = ({ input, label, hint, required, separator, err }) => {
   // TODO: Currently it will only work with 1 required child
   // const isRequired = React.Children.toArray(children).some(
   //   ({ props: childProps }) => childProps.required
   // )
+  const theme = useTheme()
 
   return (
-    <div style={{ marginBottom: '1rem' }}>
-      <FieldTitle>
-        {label && <Text color={theme.textTertiary}>{label}</Text>}
+    <div css="margin-bottom: 1rem">
+      <div>
+        {label && (
+          <Text css={`
+            ${textStyle('label2')};
+            color: ${theme.surfaceContentSecondary};
+          `}>
+            {label}
+          </Text>
+        )}
         {required && (
           <Text
             size="xsmall"
-            color={theme.accent}
+            css={`
+              color: ${theme.accent};
+              margin-left: 0.3rem;
+            `}
             title="Required"
-            style={{ marginLeft: '0.3rem' }}
           >
             *
           </Text>
         )}
-      </FieldTitle>
+      </div>
       {hint && (
-        <Text size="xsmall" color={theme.textTertiary}>
+        <Text size="xsmall" color={theme.surfaceContentSecondary}>
           {hint}
         </Text>
       )}

apps/address-book/app/components/Form/Field/index.js

@@ -1,2 +1 @@
-export { default as FieldTitle } from './FieldTitle'
 export { default as FormField } from './FormField'

apps/address-book/app/components/Form/Form.js

@@ -1,17 +1,19 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Button, Text, theme } from '@aragon/ui'
+import { Button, Text, useTheme } from '@aragon/ui'
 
 const Form = ({ children, onSubmit, submitText, heading, subHeading }) => {
+  const theme = useTheme()
+
   return (
     // TODO: Fix the SidePanel 2 lines heading thing
     <React.Fragment>
       {heading && <Text size="xxlarge">{heading}</Text>}
-      {subHeading && <Text color={theme.textTertiary}>{subHeading}</Text>}
-      <div style={{ height: '1rem' }} />
+      {subHeading && <Text color={theme.surfaceContentSecondary}>{subHeading}</Text>}
+      <div css="height: 1rem" />
       {children}
       <Button
-        style={{ userSelect: 'none' }}
+        css="user-select: none"
         mode="strong"
         wide
         onClick={onSubmit}

apps/address-book/app/components/Panel/NewEntity.js

@@ -4,8 +4,6 @@ import { Form, FormField } from '../Form'
 import { DropDown, TextInput } from '@aragon/ui'
 import web3Utils from 'web3-utils'
 
-// TODO: fields validation and error handling need improvement!
-
 const ENTITY_TYPES = [ 'Individual', 'Organization', 'Project' ]
 const INITIAL_STATE = {
   name: '',
@@ -86,7 +84,7 @@ class NewEntity extends React.Component {
               name="type"
               items={ENTITY_TYPES}
               onChange={changeType}
-              active={ENTITY_TYPES.indexOf(type)}
+              selected={ENTITY_TYPES.indexOf(type)}
               wide
             />
           }

apps/address-book/app/script.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/no-unused-modules
+/* eslint-disable import/no-unused-modules */
 import '@babel/polyfill'
 
 import { retryEvery } from '../../../shared/ui/utils'

apps/address-book/package.json

@@ -31,13 +31,14 @@
   "dependencies": {
     "@aragon/api": "2.0.0-beta.5",
     "@aragon/api-react": "2.0.0-beta.4",
-    "@aragon/ui": "0.33.0",
+    "@aragon/ui": "1.0.0-alpha.18",
     "@tps/ui": "^0.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-components": "4.1.3",
-    "web3-utils": "^1.0.0"
+    "web3-utils": "^1.0.0",
+    "date-fns": "2.0.0-alpha.22"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",