From d2b9dafc1dd8229c46d561c17d9fa516a99b6025 Mon Sep 17 00:00:00 2001 From: Pierre Bertet Date: Fri, 20 Dec 2019 12:10:25 -0300 Subject: [PATCH] Finance, Tokens, Voting: dark mode support (#1054) --- apps/agent/app/package.json | 6 +- apps/agent/app/src/App.js | 11 +- apps/agent/app/src/components/ComingSoon.js | 11 +- apps/agent/app/src/index.js | 5 +- apps/finance/app/package.json | 6 +- apps/finance/app/src/App.js | 20 +-- apps/finance/app/src/index.js | 5 +- apps/token-manager/app/package.json | 6 +- apps/token-manager/app/src/App.js | 10 +- apps/token-manager/app/src/index.js | 5 +- apps/voting/app/package.json | 6 +- apps/voting/app/src/App.js | 151 ++++++++++---------- apps/voting/app/src/app-logic.js | 4 +- 13 files changed, 130 insertions(+), 116 deletions(-) diff --git a/apps/agent/app/package.json b/apps/agent/app/package.json index 37a20fdc12..f650cac7a1 100644 --- a/apps/agent/app/package.json +++ b/apps/agent/app/package.json @@ -4,10 +4,10 @@ "private": true, "license": "AGPL-3.0-or-later", "dependencies": { - "@aragon/api": "^2.0.0-beta.6", - "@aragon/api-react": "^2.0.0-beta.6", + "@aragon/api": "^2.0.0-beta.9", + "@aragon/api-react": "^2.0.0-beta.9", "@aragon/templates-tokens": "^1.2.0", - "@aragon/ui": "^1.0.0", + "@aragon/ui": "^1.2.1", "@babel/polyfill": "^7.0.0", "date-fns": "2.0.0-alpha.22", "file-saver": "^2.0.2", diff --git a/apps/agent/app/src/App.js b/apps/agent/app/src/App.js index fecc103a43..bac0fdc042 100644 --- a/apps/agent/app/src/App.js +++ b/apps/agent/app/src/App.js @@ -1,5 +1,5 @@ -import React from 'react' -import { Header, Layout, SyncIndicator, useLayout } from '@aragon/ui' +import React, { useEffect } from 'react' +import { Main, Header, SyncIndicator, useLayout } from '@aragon/ui' import { useAragonApi } from '@aragon/api-react' import InstallFrame from './components/InstallFrame' import { IdentityProvider } from './components/IdentityManager/IdentityManager' @@ -32,11 +32,12 @@ function App({ api, appState, isSyncing }) { } export default () => { - const { api, appState } = useAragonApi() + const { api, appState, guiStyle } = useAragonApi() + const { appearance } = guiStyle return ( - +
- +
) } diff --git a/apps/agent/app/src/components/ComingSoon.js b/apps/agent/app/src/components/ComingSoon.js index 3e9e67358c..37ff631cf9 100644 --- a/apps/agent/app/src/components/ComingSoon.js +++ b/apps/agent/app/src/components/ComingSoon.js @@ -10,6 +10,7 @@ function ComingSoon() { css={` width: 100%; min-height: ${72 * GU}px; + text-align: center; `} >
Agent transaction list is coming soon! @@ -42,12 +44,15 @@ function ComingSoon() { max-width: ${52 * GU}px; color: ${theme.contentSecondary}; ${textStyle('body2')}; + padding: 0 ${2 * GU}px; `} > We are currently working on the full version of this app. You’ll soon be - able to browse Agent interactions with other Ethereum applications - from here. - Learn how you can start using it today + able to browse Agent interactions with other Ethereum applications from + here. + + Learn how you can start using it today +
) diff --git a/apps/agent/app/src/index.js b/apps/agent/app/src/index.js index 58eb098fa2..f9c5a81945 100644 --- a/apps/agent/app/src/index.js +++ b/apps/agent/app/src/index.js @@ -3,15 +3,12 @@ import '@babel/polyfill' import React from 'react' import ReactDOM from 'react-dom' import { AragonApi } from '@aragon/api-react' -import { Main } from '@aragon/ui' import appStateReducer from './app-state-reducer' import App from './App' ReactDOM.render( -
- -
+ , document.getElementById('root') ) diff --git a/apps/finance/app/package.json b/apps/finance/app/package.json index f859b2e3fc..245c39ffb3 100644 --- a/apps/finance/app/package.json +++ b/apps/finance/app/package.json @@ -4,10 +4,10 @@ "private": true, "license": "AGPL-3.0-or-later", "dependencies": { - "@aragon/api": "^2.0.0-beta.6", - "@aragon/api-react": "^2.0.0-beta.6", + "@aragon/api": "^2.0.0-beta.9", + "@aragon/api-react": "^2.0.0-beta.9", "@aragon/templates-tokens": "^1.3.0", - "@aragon/ui": "^1.0.0", + "@aragon/ui": "^1.2.1", "@babel/polyfill": "^7.0.0", "bn.js": "^4.11.8", "core-js": "^2.6.5", diff --git a/apps/finance/app/src/App.js b/apps/finance/app/src/App.js index 90225d7944..02a5b310bb 100644 --- a/apps/finance/app/src/App.js +++ b/apps/finance/app/src/App.js @@ -1,9 +1,10 @@ -import React from 'react' +import React, { useEffect } from 'react' import PropTypes from 'prop-types' import { Button, Header, IconPlus, + Main, SidePanel, SyncIndicator, useLayout, @@ -129,15 +130,18 @@ class App extends React.Component { } export default () => { - const { api, appState } = useAragonApi() + const { api, appState, guiStyle } = useAragonApi() const { layoutName } = useLayout() + const { appearance } = guiStyle return ( - +
+ +
) } diff --git a/apps/finance/app/src/index.js b/apps/finance/app/src/index.js index 30ce587aaf..f9c5a81945 100644 --- a/apps/finance/app/src/index.js +++ b/apps/finance/app/src/index.js @@ -2,16 +2,13 @@ import '@babel/polyfill' import React from 'react' import ReactDOM from 'react-dom' -import { Main } from '@aragon/ui' import { AragonApi } from '@aragon/api-react' import appStateReducer from './app-state-reducer' import App from './App' ReactDOM.render( -
- -
+ , document.getElementById('root') ) diff --git a/apps/token-manager/app/package.json b/apps/token-manager/app/package.json index 80a1fd0fda..39a307e4af 100644 --- a/apps/token-manager/app/package.json +++ b/apps/token-manager/app/package.json @@ -4,9 +4,9 @@ "private": true, "license": "AGPL-3.0-or-later", "dependencies": { - "@aragon/api": "^2.0.0-beta.6", - "@aragon/api-react": "^2.0.0-beta.6", - "@aragon/ui": "^1.0.0", + "@aragon/api": "^2.0.0-beta.9", + "@aragon/api-react": "^2.0.0-beta.9", + "@aragon/ui": "^1.2.1", "bn.js": "^4.11.6", "prop-types": "^15.7.2", "react": "^16.8.4", diff --git a/apps/token-manager/app/src/App.js b/apps/token-manager/app/src/App.js index f8d1aef6ef..de7956a244 100644 --- a/apps/token-manager/app/src/App.js +++ b/apps/token-manager/app/src/App.js @@ -6,6 +6,7 @@ import { GU, Header, IconPlus, + Main, SyncIndicator, Tag, textStyle, @@ -199,9 +200,14 @@ class App extends React.PureComponent { } export default () => { - const { api, appState } = useAragonApi() const theme = useTheme() + const { api, appState, guiStyle } = useAragonApi() const { layoutName } = useLayout() + const { appearance } = guiStyle - return + return ( +
+ +
+ ) } diff --git a/apps/token-manager/app/src/index.js b/apps/token-manager/app/src/index.js index 18cf4e1e87..074162ecff 100644 --- a/apps/token-manager/app/src/index.js +++ b/apps/token-manager/app/src/index.js @@ -1,15 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom' import { AragonApi } from '@aragon/api-react' -import { Main } from '@aragon/ui' import appStateReducer from './app-state-reducer' import App from './App' ReactDOM.render( -
- -
+ , document.getElementById('root') ) diff --git a/apps/voting/app/package.json b/apps/voting/app/package.json index 69fe43ab5e..7f98266120 100644 --- a/apps/voting/app/package.json +++ b/apps/voting/app/package.json @@ -4,9 +4,9 @@ "private": true, "license": "AGPL-3.0-or-later", "dependencies": { - "@aragon/api": "^2.0.0-beta.8", - "@aragon/api-react": "^2.0.0-beta.8", - "@aragon/ui": "^1.0.0", + "@aragon/api": "^2.0.0-beta.9", + "@aragon/api-react": "^2.0.0-beta.9", + "@aragon/ui": "^1.2.1", "bn.js": "^4.11.8", "date-fns": "2.0.0-alpha.22", "onecolor": "^3.1.0", diff --git a/apps/voting/app/src/App.js b/apps/voting/app/src/App.js index c69f1156ed..6cbe2fa052 100644 --- a/apps/voting/app/src/App.js +++ b/apps/voting/app/src/App.js @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useEffect } from 'react' import { Button, Header, @@ -7,6 +7,7 @@ import { SyncIndicator, useLayout, } from '@aragon/ui' +import { useGuiStyle } from '@aragon/api-react' import NewVotePanel from './components/NewVotePanel' import useFilterVotes from './hooks/useFilterVotes' import useScrollTop from './hooks/useScrollTop' @@ -23,11 +24,12 @@ const App = React.memo(function App() { executionTargets, isSyncing, newVotePanel, - selectedVote, selectVote, + selectedVote, votes, } = useAppLogic() + const { appearance } = useGuiStyle() const { layoutName } = useLayout() const compactMode = layoutName === 'small' const handleBack = useCallback(() => selectVote(-1), [selectVote]) @@ -50,82 +52,87 @@ const App = React.memo(function App() { useScrollTop(selectedVote) return ( - - {votes.length === 0 && ( -
- -
- )} - {votes.length > 0 && ( - - -
} - display={compactMode ? 'icon' : 'label'} - /> - ) - } - /> - {selectedVote ? ( - + + {votes.length === 0 && ( +
+ - ) : ( - + )} + {votes.length > 0 && ( + + +
} + display={compactMode ? 'icon' : 'label'} + /> + ) + } /> - )} - - )} - - + {selectedVote ? ( + + ) : ( + + )} + + )} + + + ) }) export default function Voting() { return ( -
- - - - - - - -
+ + + + + + + ) } diff --git a/apps/voting/app/src/app-logic.js b/apps/voting/app/src/app-logic.js index 8018e11119..cac1017008 100644 --- a/apps/voting/app/src/app-logic.js +++ b/apps/voting/app/src/app-logic.js @@ -104,11 +104,11 @@ export function useAppLogic() { return { actions, executionTargets, + isSyncing: isSyncing || !ready, + newVotePanel, selectVote, selectedVote, votes, - isSyncing: isSyncing || !ready, - newVotePanel, } }