Finance: new styles (#929)

aragon · Sep 2, 2019 · 2b8b048 · 2b8b048
1 parent 3c55239
commit 2b8b048
Show file tree

Hide file tree

Showing 40 changed files with 2,072 additions and 3,020 deletions.
diff --git a/apps/finance/app/index.html b/apps/finance/app/index.html
@@ -5,6 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <title>Finance</title>
+    <style>
+      html, body {
+        overflow: hidden;
+      }
+      #root {
+        height: 100vh;
+        overflow: auto;
+      }
+    </style>
   </head>
   <body>
     <noscript>

diff --git a/apps/finance/app/now.json b/apps/finance/app/now.json
@@ -0,0 +1,10 @@
+{
+  "version": 2,
+  "public": true,
+  "scope": "aragon",
+  "name": "finance",
+  "alias": "nightly-finance.aragon.org",
+  "builds": [
+    { "src": "package.json", "use": "@now/static-build", "config": { "distDir": "build" } }
+  ]
+}
diff --git a/apps/finance/app/package.json b/apps/finance/app/package.json
@@ -7,7 +7,7 @@
     "@aragon/api": "^2.0.0-beta.4",
     "@aragon/api-react": "^2.0.0-beta.4",
     "@aragon/templates-tokens": "^1.2.0",
-    "@aragon/ui": "^0.40.0",
+    "@aragon/ui": "^1.0.0-alpha.11",
     "@babel/polyfill": "^7.0.0",
     "bn.js": "^4.11.8",
     "core-js": "^2.6.5",
@@ -30,7 +30,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-styled-components": "^1.7.1",
+    "babel-plugin-styled-components": "^1.10.6",
     "eslint": "^5.6.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-config-standard": "^12.0.0",
@@ -46,11 +46,12 @@
   },
   "scripts": {
     "lint": "eslint ./src",
-    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build",
     "start": "npm run sync-assets && npm run watch:script & parcel serve index.html -p 3002 --out-dir build/",
     "build": "npm run sync-assets && npm run build:script && parcel build index.html --out-dir build/ --public-url \".\"",
+    "build:script": "parcel build src/script.js --out-dir build/",
     "watch:script": "parcel watch src/script.js --out-dir build/ --no-hmr",
-    "build:script": "parcel build src/script.js --out-dir build/"
+    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build",
+    "now-build": "npm run build"
   },
   "browserslist": [
     ">2%",

diff --git a/apps/finance/app/src/App.js b/apps/finance/app/src/App.js
@@ -1,18 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { SyncIndicator, EmptyStateCard, Main, SidePanel } from '@aragon/ui'
+import {
+  Button,
+  Header,
+  IconPlus,
+  SidePanel,
+  SyncIndicator,
+  useViewport,
+} from '@aragon/ui'
 import { useAragonApi } from '@aragon/api-react'
 import Balances from './components/Balances'
 import NewTransferPanelContent from './components/NewTransfer/PanelContent'
 import Transfers from './components/Transfers'
-import AppLayout from './components/AppLayout'
-import NewTransferIcon from './components/NewTransferIcon'
 import { ETHER_TOKEN_FAKE_ADDRESS } from './lib/token-utils'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
 
-import addFundsIcon from './components/assets/add-funds-icon.svg'
-
 class App extends React.Component {
   static propTypes = {
     api: PropTypes.object,
@@ -85,90 +87,63 @@ class App extends React.Component {
   }
 
   render() {
-    const { appState, isSyncing } = this.props
+    const { appState, isSyncing, compactMode } = this.props
     const { newTransferOpened } = this.state
     const { balances, transactions, tokens, proxyAddress } = appState
 
     return (
-      <Main assetsUrl="./aragon-ui">
-        <div css="min-width: 320px">
-          <IdentityProvider
-            onResolve={this.handleResolveLocalIdentity}
-            onShowLocalIdentityModal={this.handleShowLocalIdentityModal}
-          >
-            <SyncIndicator visible={isSyncing} />
-            <AppLayout
-              title="Finance"
-              mainButton={{
-                label: 'New transfer',
-                icon: <NewTransferIcon />,
-                onClick: this.handleNewTransferOpen,
-              }}
-              smallViewPadding={0}
-            >
-              {balances.length > 0 && (
-                <SpacedBlock>
-                  <Balances balances={balances} />
-                </SpacedBlock>
-              )}
-              {transactions.length > 0 && (
-                <SpacedBlock>
-                  <Transfers
-                    dao={proxyAddress}
-                    transactions={transactions}
-                    tokens={tokens}
-                  />
-                </SpacedBlock>
-              )}
-              {!isSyncing &&
-                balances.length === 0 &&
-                transactions.length === 0 && (
-                  <EmptyScreen>
-                    <EmptyStateCard
-                      icon={<img src={addFundsIcon} alt="" />}
-                      title="There are no funds yet"
-                      text="Create a new transfer to get started."
-                      actionText="New transfer"
-                      onActivate={this.handleNewTransferOpen}
-                    />
-                  </EmptyScreen>
-                )}
-            </AppLayout>
-            <SidePanel
-              opened={newTransferOpened}
-              onClose={this.handleNewTransferClose}
-              title="New transfer"
-            >
-              <NewTransferPanelContent
-                opened={newTransferOpened}
-                tokens={tokens}
-                onWithdraw={this.handleWithdraw}
-                onDeposit={this.handleDeposit}
-                proxyAddress={proxyAddress}
-              />
-            </SidePanel>
-          </IdentityProvider>
-        </div>
-      </Main>
+      <IdentityProvider
+        onResolve={this.handleResolveLocalIdentity}
+        onShowLocalIdentityModal={this.handleShowLocalIdentityModal}
+      >
+        <SyncIndicator visible={isSyncing} />
+        <Header
+          primary="Finance"
+          secondary={
+            <Button
+              mode="strong"
+              onClick={this.handleNewTransferOpen}
+              label="New transfer"
+              icon={<IconPlus />}
+              display={compactMode ? 'icon' : 'label'}
+            />
+          }
+        />
+        <Balances balances={balances} compactMode={compactMode} />
+        <Transfers
+          proxyAddress={proxyAddress}
+          transactions={transactions}
+          tokens={tokens}
+        />
+        <SidePanel
+          opened={newTransferOpened}
+          onClose={this.handleNewTransferClose}
+          title="New transfer"
+        >
+          <NewTransferPanelContent
+            opened={newTransferOpened}
+            tokens={tokens}
+            onWithdraw={this.handleWithdraw}
+            onDeposit={this.handleDeposit}
+            proxyAddress={proxyAddress}
+          />
+        </SidePanel>
+      </IdentityProvider>
     )
   }
 }
 
-const EmptyScreen = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-`
-
-const SpacedBlock = styled.div`
-  margin-top: 30px;
-  &:first-child {
-    margin-top: 0;
-  }
-`
-
 export default () => {
   const { api, appState } = useAragonApi()
-  return <App api={api} appState={appState} isSyncing={appState.isSyncing} />
+  const { below } = useViewport()
+  const compactMode = below('medium')
+
+  return (
+    <App
+      api={api}
+      appState={appState}
+      isSyncing={appState.isSyncing}
+      compactMode={compactMode}
+    />
+  )
 }
diff --git a/apps/finance/app/src/components/AppLayout.js b/apps/finance/app/src/components/AppLayout.js