From 49fd743640e9bc70d715e242e9dc1a72edc5fe5d Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 1 Mar 2018 17:58:59 +0100
Subject: [PATCH] Work on Account page

---
 src/components/AccountPage/AccountHeader.js   | 46 +++++++++++++++++++
 .../{AccountPage.js => AccountPage/index.js}  | 29 +++---------
 src/components/TransactionsList/index.js      |  5 ++
 3 files changed, 57 insertions(+), 23 deletions(-)
 create mode 100644 src/components/AccountPage/AccountHeader.js
 rename src/components/{AccountPage.js => AccountPage/index.js} (78%)

diff --git a/src/components/AccountPage/AccountHeader.js b/src/components/AccountPage/AccountHeader.js
new file mode 100644
index 00000000..9f01e89a
--- /dev/null
+++ b/src/components/AccountPage/AccountHeader.js
@@ -0,0 +1,46 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
+import styled from 'styled-components'
+
+import type { Account } from 'types/common'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
+const CurName = styled(Text).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 2,
+})`
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`
+
+type Props = {
+  account: Account,
+}
+
+class AccountHeader extends PureComponent<Props> {
+  render() {
+    const { account } = this.props
+    const Icon = getIconByCoinType(account.currency.coinType)
+    return (
+      <Box horizontal align="center" flow={2}>
+        {Icon && (
+          <Box color={account.currency.color}>
+            <Icon size={24} />
+          </Box>
+        )}
+        <Box>
+          <CurName>{account.currency.name}</CurName>
+          <Text ff="Museo Sans|Regular" fontSize={7}>
+            {account.name}
+          </Text>
+        </Box>
+      </Box>
+    )
+  }
+}
+
+export default AccountHeader
diff --git a/src/components/AccountPage.js b/src/components/AccountPage/index.js
similarity index 78%
rename from src/components/AccountPage.js
rename to src/components/AccountPage/index.js
index 2f94a9e3..b801e307 100644
--- a/src/components/AccountPage.js
+++ b/src/components/AccountPage/index.js
@@ -20,9 +20,9 @@ import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 import Icon from 'components/base/Icon'
 import IconControls from 'icons/Controls'
-import ReceiveBox from 'components/ReceiveBox'
 import Text from 'components/base/Text'
 import TransactionsList from 'components/TransactionsList'
+import AccountHeader from './AccountHeader'
 
 type Props = {
   t: T,
@@ -48,11 +48,9 @@ class AccountPage extends PureComponent<Props> {
     }
 
     return (
-      <Box flow={3}>
+      <Box flow={7}>
         <Box horizontal>
-          <Box>
-            <Text fontSize={8}>{account.name}</Text>
-          </Box>
+          <AccountHeader account={account} />
           <Box horizontal alignItems="center" justifyContent="flex-end" grow flow={2}>
             <Button primary onClick={() => openModal(MODAL_SEND, { account })}>
               <Box horizontal flow={2} alignItems="center">
@@ -80,24 +78,9 @@ class AccountPage extends PureComponent<Props> {
             </Button>
           </Box>
         </Box>
-        <Box horizontal flow={3}>
-          <Box grow>
-            <Card
-              title={t('account:balance')}
-              style={{ height: 435 }}
-              alignItems="center"
-              justifyContent="center"
-            >
-              <Text fontSize={5}>{formatBTC(account.balance)}</Text>
-            </Card>
-          </Box>
-
-          <Box style={{ width: 300 }}>
-            <Card title={t('account:receive')} flow={3}>
-              <ReceiveBox path={account.path} address={account.address} />
-            </Card>
-          </Box>
-        </Box>
+        <Card style={{ height: 435 }} alignItems="center" justifyContent="center">
+          <Text fontSize={5}>{formatBTC(account.balance)}</Text>
+        </Card>
         <Card p={0} px={4} title={t('account:lastOperations')}>
           <TransactionsList transactions={account.transactions} />
         </Card>
diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js
index b3e98b59..ff211728 100644
--- a/src/components/TransactionsList/index.js
+++ b/src/components/TransactionsList/index.js
@@ -58,12 +58,17 @@ const TransactionRaw = styled(Box).attrs({
   horizontal: true,
   alignItems: 'center',
 })`
+  cursor: pointer;
   border-bottom: 1px solid ${p => p.theme.colors.fog};
   height: 68px;
 
   &:last-child {
     border-bottom: 0;
   }
+
+  &:hover {
+    background: ${p => p.theme.colors.lightGrey};
+  }
 `
 
 const Cell = styled(Box).attrs({