Merge pull request #45 from meriadec/master

Dashboard work

src/components/AccountPage.js

@@ -28,7 +28,7 @@ class AccountPage extends PureComponent<Props> {
     const { account, accountData } = this.props
 
     return (
-      <Box p={3} flow={3}>
+      <Box flow={3}>
         <Box>
           <Text fontSize={4}>{`${account.name} account`}</Text>
         </Box>

src/components/DashboardPage.js

@@ -9,7 +9,10 @@ import { format } from 'helpers/btc'
 
 import { getTotalBalance } from 'reducers/accounts'
 
-import Box from 'components/base/Box'
+import Box, { Card } from 'components/base/Box'
+import Text from 'components/base/Text'
+import Select from 'components/base/Select'
+import Tabs from 'components/base/Tabs'
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   totalBalance: getTotalBalance(state),
@@ -19,10 +22,102 @@ type Props = {
   totalBalance: number,
 }
 
-class DashboardPage extends PureComponent<Props> {
+type State = {
+  tab: number,
+}
+
+const itemsTimes = [
+  { key: 'week', name: 'Last week' },
+  { key: 'month', name: 'Last month' },
+  { key: 'year', name: 'Last year' },
+]
+
+class DashboardPage extends PureComponent<Props, State> {
+  state = {
+    tab: 0,
+  }
+
+  handleChangeTab = tab => this.setState({ tab })
+
   render() {
     const { totalBalance } = this.props
-    return <Box p={20}>Your balance: {format(totalBalance)}</Box>
+    const { tab } = this.state
+    return (
+      <Box flow={4}>
+        <Box horizontal align="flex-end">
+          <Box>
+            <Text color="black" fontSize={6}>
+              {'Hello Anonymous,'}
+            </Text>
+            <Text color="grey" fontSize={3}>
+              {'here is the summary of your 5 accounts'}
+            </Text>
+          </Box>
+          <Box ml="auto">
+            <Select
+              items={itemsTimes}
+              value={itemsTimes[0]}
+              renderSelected={item => item.name}
+              style={{ width: 250 }}
+            />
+          </Box>
+        </Box>
+        <Card flow={3}>
+          <Tabs
+            index={tab}
+            onTabClick={this.handleChangeTab}
+            items={[
+              {
+                key: 'balance',
+                title: 'Total balance',
+                render: () => (
+                  <Box>
+                    <Text fontSize={4}>{format(totalBalance)}</Text>
+                  </Box>
+                ),
+              },
+              {
+                key: 'market',
+                title: 'Market',
+                render: () => <Box>{'Not yet. Be patient.'}</Box>,
+              },
+            ]}
+          />
+        </Card>
+        <Box flow={3}>
+          <Box horizontal flow={3}>
+            <Card flex={1} style={{ height: 200 }}>
+              {'Brian account'}
+            </Card>
+            <Card flex={1} style={{ height: 200 }}>
+              {'Virginie account'}
+            </Card>
+            <Card flex={1} style={{ height: 200 }}>
+              {'Ledger account'}
+            </Card>
+          </Box>
+          <Box horizontal flow={3}>
+            <Card flex={1} style={{ height: 200 }}>
+              {'Brian account'}
+            </Card>
+            <Card flex={1} style={{ height: 200 }}>
+              {'Virginie account'}
+            </Card>
+            <Box
+              p={3}
+              flex={1}
+              borderWidth={2}
+              align="center"
+              justify="center"
+              borderColor="mouse"
+              style={{ borderStyle: 'dashed' }}
+            >
+              {'+ Add account'}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    )
   }
 }
 

src/components/SettingsPage/index.js

@@ -25,7 +25,7 @@ class SettingsPage extends PureComponent<Props, State> {
     const { tab } = this.state
 
     return (
-      <Box p={3} flow={4}>
+      <Box flow={4}>
         <Text fontSize={5}>{'Settings'}</Text>
         <Tabs
           index={tab}

src/components/Wrapper.js

@@ -38,11 +38,11 @@ class Wrapper extends Component<{}> {
               <Box grow horizontal>
                 <SideBar />
 
-                <Box shrink grow bg="cream">
+                <Box shrink grow bg="cream" color="grey">
                   <TopBar />
                   <Box grow relative>
                     <UpdateNotifier />
-                    <GrowScroll>
+                    <GrowScroll p={4}>
                       <Route path="/" exact component={DashboardPage} />
                       <Route path="/settings" component={SettingsPage} />
                       <Route path="/account/:id" component={AccountPage} />

src/components/base/Box/index.js

@@ -55,7 +55,7 @@ const Box = styled.div`
 `
 
 const RawCard = styled(Box).attrs({ bg: 'white', p: 3 })`
-  box-shadow: rgba(0, 0, 0, 0.1) 0 5px 30px;
+  box-shadow: rgba(0, 0, 0, 0.06) 0 8px 30px;
   border-radius: 5px;
 `
 

src/components/base/Select/index.js

@@ -16,6 +16,7 @@ import Triangles from './Triangles'
 
 type Props = {
   items: Array<Object>,
+  value?: Object,
   itemToString?: Function,
   onChange?: Function,
   fuseOptions?: Object,
@@ -124,10 +125,13 @@ class Select extends PureComponent<Props> {
       renderSelected,
       placeholder,
       onChange,
+      value,
+      ...props
     } = this.props
 
     return (
       <Downshift
+        selectedItem={value}
         itemToString={itemToString}
         onChange={onChange}
         render={({
@@ -140,7 +144,7 @@ class Select extends PureComponent<Props> {
           selectedItem,
           ...downshiftProps
         }) => (
-          <Container {...getRootProps({ refKey: 'innerRef' })}>
+          <Container {...getRootProps({ refKey: 'innerRef' })} {...props}>
             {searchable ? (
               <Box relative>
                 <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />

src/components/base/Tabs/index.js

@@ -9,7 +9,7 @@ import Box, { Tabbable } from 'components/base/Box'
 
 const Tab = styled(Tabbable).attrs({
   flex: 1,
-  pb: 1,
+  pb: 2,
   align: 'center',
   justify: 'center',
   fontSize: 1,
@@ -17,10 +17,10 @@ const Tab = styled(Tabbable).attrs({
   border-bottom: 2px solid transparent;
   border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};
   color: ${p => (p.isActive ? p.theme.colors.blue : p.theme.colors.steel)};
-  font-weight: ${p => (p.isActive ? 'bold' : '')};
   margin-bottom: -1px;
   outline: none;
   cursor: ${p => (p.isActive ? 'default' : 'pointer')};
+  max-width: 200px;
 `
 
 type Item = {

src/styles/theme.js

@@ -8,6 +8,7 @@ export default {
     argile: '#eeeeee',
     blue: '#6193ff',
     cream: '#f9f9f9',
+    gray: '#a8b6c2',
     grenade: '#ea2e49',
     lead: '#999999',
     mouse: '#e2e2e2',