Finance, Tokens, Voting: dark mode support (#1054)

aragon · Dec 20, 2019 · d2b9daf · d2b9daf
1 parent 90ad353
commit d2b9daf
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 116 deletions.
diff --git 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
@@ -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 (
-    <Layout>
+    <Main theme={appearance} assetsUrl="./aragon-ui">
       <App api={api} appState={appState} isSyncing={appState.isSyncing} />
-    </Layout>
+    </Main>
   )
 }
diff --git 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;
       `}
     >
       <div
@@ -32,6 +33,7 @@ function ComingSoon() {
           color: ${theme.content};
           ${textStyle('title2')};
           margin-bottom: ${2 * GU}px;
+          padding: 0 ${2 * GU}px;
         `}
       >
         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.
-        <Link href="https://aragon.org/agent">Learn how you can start using it today</Link>
+        able to browse Agent interactions with other Ethereum applications from
+        here.
+        <Link href="https://aragon.org/agent">
+          Learn how you can start using it today
+        </Link>
       </div>
     </Card>
   )

diff --git 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(
   <AragonApi reducer={appStateReducer}>
-    <Main assetsUrl="./aragon-ui">
-      <App />
-    </Main>
+    <App />
   </AragonApi>,
   document.getElementById('root')
 )
diff --git 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
@@ -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 (
-    <App
-      api={api}
-      appState={appState}
-      isSyncing={appState.isSyncing}
-      compactMode={layoutName === 'small'}
-    />
+    <Main theme={appearance} assetsUrl="./aragon-ui">
+      <App
+        api={api}
+        appState={appState}
+        isSyncing={appState.isSyncing}
+        compactMode={layoutName === 'small'}
+      />
+    </Main>
   )
 }
diff --git 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(
   <AragonApi reducer={appStateReducer}>
-    <Main assetsUrl="./aragon-ui">
-      <App />
-    </Main>
+    <App />
   </AragonApi>,
   document.getElementById('root')
 )
diff --git 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
@@ -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 <App api={api} layoutName={layoutName} theme={theme} {...appState} />
+  return (
+    <Main assetsUrl="./aragon-ui" theme={appearance}>
+      <App api={api} layoutName={layoutName} theme={theme} {...appState} />
+    </Main>
+  )
 }
diff --git 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(
   <AragonApi reducer={appStateReducer}>
-    <Main assetsUrl="./aragon-ui">
-      <App />
-    </Main>
+    <App />
   </AragonApi>,
   document.getElementById('root')
 )
diff --git 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",