Merge pull request #123 from meriadec/master

Speed improvements on accounts order, styles fixes

src/components/AccountPage.js

@@ -52,36 +52,31 @@ class AccountPage extends PureComponent<Props> {
       <Box flow={3}>
         <Box horizontal>
           <Box>
-            <Text fontSize={4}>{account.name}</Text>
+            <Text fontSize={8}>{account.name}</Text>
           </Box>
-          <Box horizontal align="center" justify="flex-end" grow flow={20}>
+          <Box horizontal align="center" justify="flex-end" grow flow={2}>
-            <Box>
+            <Button primary onClick={() => openModal(MODAL_SEND, { account })}>
-              <Button primary onClick={() => openModal(MODAL_SEND, { account })}>
+              <Box horizontal flow={2} align="center">
-                <Box horizontal flow={2} align="center">
+                <Box>
-                  <Box>
+                  <Icon name="upload" />
-                    <Icon name="upload" />
-                  </Box>
-                  <Box>{t('send.title')}</Box>
                 </Box>
-              </Button>
+                <Box>{t('send.title')}</Box>
-            </Box>
+              </Box>
-            <Box>
+            </Button>
-              <Button primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
+            <Button primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
-                <Box horizontal flow={2} align="center">
+              <Box horizontal flow={2} align="center">
-                  <Box>
+                <Box>
-                    <Icon name="download" />
+                  <Icon name="download" />
-                  </Box>
-                  <Box>{t('receive.title')}</Box>
                 </Box>
-              </Button>
+                <Box>{t('receive.title')}</Box>
-            </Box>
+              </Box>
-            <Box>
+            </Button>
-              <Button
+            <Button
-                icon="sliders-h"
+              style={{ width: 50 }}
-                color="mouse"
+              icon="sliders-h"
-                onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
+              color="mouse"
-              />
+              onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
-            </Box>
+            />
           </Box>
         </Box>
         {accountData && (

src/components/Breadcrumb/index.js

@@ -10,6 +10,7 @@ const BreadcrumbWrapper = styled(Box).attrs({
   align: 'center',
   relative: true,
 })``
+
 const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
   <Box start={start} end={end} active={active} {...props} />
 )).attrs({
@@ -84,7 +85,7 @@ const Breadcrumb = ({ items, currentStep }: Props) => (
             <BreadcrumbNumberWrapper>
               <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
             </BreadcrumbNumberWrapper>
-            <Box fontSize={0}>{item.label}</Box>
+            <Box fontSize={3}>{item.label}</Box>
           </BreadcrumbStep>
         </Fragment>
       )

src/components/DashboardPage/AccountsOrder.js

@@ -0,0 +1,100 @@
+// @flow
+
+import React, { Component } from 'react'
+import { compose } from 'redux'
+import { translate } from 'react-i18next'
+import { connect } from 'react-redux'
+
+import type { MapStateToProps } from 'react-redux'
+
+import type { T } from 'types/common'
+
+import { getOrderAccounts } from 'reducers/settings'
+
+import { updateOrderAccounts } from 'actions/accounts'
+import { saveSettings } from 'actions/settings'
+
+import Box from 'components/base/Box'
+import DropDown from 'components/base/DropDown'
+import Text from 'components/base/Text'
+import IconAngleDown from 'icons/AngleDown'
+
+const mapStateToProps: MapStateToProps<*, *, *> = state => ({
+  orderAccounts: getOrderAccounts(state),
+})
+
+const mapDispatchToProps = {
+  updateOrderAccounts,
+  saveSettings,
+}
+
+type Props = {
+  t: T,
+  orderAccounts: string,
+  updateOrderAccounts: Function,
+  saveSettings: Function,
+}
+
+type State = {
+  cachedValue: string | null,
+}
+
+class AccountsOrder extends Component<Props, State> {
+  state = {
+    cachedValue: null,
+  }
+
+  componentWillMount() {
+    this.setState({ cachedValue: this.props.orderAccounts })
+  }
+
+  setAccountOrder = order => {
+    const { updateOrderAccounts, saveSettings } = this.props
+    this.setState({ cachedValue: order }, () => {
+      window.requestIdleCallback(() => {
+        updateOrderAccounts(order)
+        saveSettings({ orderAccounts: order })
+      })
+    })
+  }
+
+  render() {
+    const { t } = this.props
+    const { cachedValue } = this.state
+
+    if (!cachedValue) {
+      return null
+    }
+
+    const sortItems = [
+      {
+        key: 'name',
+        label: t('orderAccounts.name'),
+      },
+      {
+        key: 'balance',
+        label: t('orderAccounts.balance'),
+      },
+      {
+        key: 'type',
+        label: t('orderAccounts.type'),
+      },
+    ]
+
+    return (
+      <DropDown
+        onChange={item => this.setAccountOrder(item.key)}
+        items={sortItems}
+        ff="Open Sans|SemiBold"
+        fontSize={4}
+      >
+        <Box horizontal align="center" flow={1} color="dark">
+          <Text color="dark">{t(`orderAccounts.${cachedValue}`)}</Text>
+          <IconAngleDown height={7} width={8} />
+        </Box>
+      </DropDown>
+    )
+  }
+}
+
+export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(AccountsOrder)

src/components/DashboardPage/index.js

@@ -13,12 +13,11 @@ import sortBy from 'lodash/sortBy'
 import takeRight from 'lodash/takeRight'
 
 import type { MapStateToProps } from 'react-redux'
-import type { Accounts, T } from 'types/common'
+import type { Accounts } from 'types/common'
 
 import { space } from 'styles/theme'
 
 import { getVisibleAccounts } from 'reducers/accounts'
-import { getOrderAccounts } from 'reducers/settings'
 
 import { updateOrderAccounts } from 'actions/accounts'
 import { saveSettings } from 'actions/settings'
@@ -28,16 +27,13 @@ import Box, { Card } from 'components/base/Box'
 import Pills from 'components/base/Pills'
 import Text from 'components/base/Text'
 import TransactionsList from 'components/TransactionsList'
-import DropDown from 'components/base/DropDown'
-
-import IconAngleDown from 'icons/AngleDown'
 
 import AccountCard from './AccountCard'
 import BalanceInfos from './BalanceInfos'
+import AccountsOrder from './AccountsOrder'
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getVisibleAccounts(state),
-  orderAccounts: getOrderAccounts(state),
 })
 
 const mapDispatchToProps = {
@@ -49,10 +45,6 @@ const mapDispatchToProps = {
 type Props = {
   accounts: Accounts,
   push: Function,
-  t: T,
-  updateOrderAccounts: Function,
-  saveSettings: Function,
-  orderAccounts: string,
 }
 
 type State = {
@@ -136,12 +128,6 @@ class DashboardPage extends PureComponent<Props, State> {
     return chunk(listAccounts, ACCOUNTS_BY_LINE)
   }
 
-  setAccountOrder = order => {
-    const { updateOrderAccounts, saveSettings } = this.props
-    updateOrderAccounts(order)
-    saveSettings({ orderAccounts: order })
-  }
-
   addFakeDatasOnAccounts = () => {
     const { accounts } = this.props
 
@@ -167,26 +153,11 @@ class DashboardPage extends PureComponent<Props, State> {
   _timeout = undefined
 
   render() {
-    const { push, accounts, t, orderAccounts } = this.props
+    const { push, accounts } = this.props
     const { selectedTime, fakeDatas } = this.state
 
     const totalAccounts = accounts.length
 
-    const sortItems = [
-      {
-        key: 'name',
-        label: t('orderAccounts.name'),
-      },
-      {
-        key: 'balance',
-        label: t('orderAccounts.balance'),
-      },
-      {
-        key: 'type',
-        label: t('orderAccounts.type'),
-      },
-    ]
-
     return (
       <Box flow={7}>
         <Box horizontal align="flex-end">
@@ -249,18 +220,7 @@ class DashboardPage extends PureComponent<Props, State> {
                   <Text ff="Open Sans|SemiBold" fontSize={4}>
                     {'Sort by'}
                   </Text>
-                  <DropDown
+                  <AccountsOrder />
-                    onChange={item => this.setAccountOrder(item.key)}
-                    items={sortItems}
-                    ff="Open Sans|SemiBold"
-                    fontSize={4}
-                    value={sortItems.find(s => s.key === orderAccounts)}
-                  >
-                    <Box horizontal align="center" flow={1} color="dark">
-                      <Text>{t(`orderAccounts.${orderAccounts}`)}</Text>
-                      <IconAngleDown height={7} width={8} />
-                    </Box>
-                  </DropDown>
                 </Box>
               </Box>
               <Box flow={5}>

src/components/SettingsPage/Profile.js

@@ -90,7 +90,7 @@ class TabProfile extends PureComponent<Props, State> {
             <Box
               horizontal
               align="center"
-              flow={1}
+              flow={2}
               style={{ cursor: 'pointer' }}
               onClick={() => this.handleChangeInput('password.state')(!isPasswordChecked)}
             >

src/components/SettingsPage/index.js

@@ -64,8 +64,8 @@ class SettingsPage extends PureComponent<Props, State> {
     }
 
     return (
-      <Box flow={4}>
+      <Box flow={6}>
-        <Text fontSize={5}>{t('settings.title')}</Text>
+        <Text fontSize={7}>{t('settings.title')}</Text>
         <Tabs
           index={tab}
           onTabClick={this.handleChangeTab}

src/components/base/Button/index.js

@@ -41,7 +41,7 @@ function getProps({ disabled, icon, primary }: Object) {
         px: 1,
       },
       {
-        fontSize: 1,
+        fontSize: 4,
         px: 3,
       },
     ),

src/components/base/Label.js

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { fontSize } from 'styled-system'
 
 export default styled.label.attrs({
-  fontSize: 0,
+  fontSize: 3,
 })`
   ${fontSize};
   display: block;

src/components/base/Modal/index.js

@@ -72,7 +72,7 @@ const Backdrop = styled(Box).attrs({
 
 const Wrapper = styled(Tabbable).attrs({
   bg: 'transparent',
-  flow: 20,
+  flow: 4,
   mt: 100,
   mb: 100,
   style: p => ({
@@ -93,7 +93,7 @@ const Body = styled(Box).attrs({
 `
 
 const CloseContainer = styled(Box).attrs({
-  p: 2,
+  p: 4,
   color: 'mouse',
 })`
   cursor: pointer;
@@ -214,10 +214,10 @@ export const ModalBody = ({
   <Body>
     {onClose && (
       <CloseContainer onClick={onClose}>
-        <Icon fontSize={3} name="times" />
+        <Icon fontSize={6} name="times" />
       </CloseContainer>
     )}
-    <Box p={3} {...props}>
+    <Box p={5} {...props}>
       {children}
     </Box>
   </Body>

src/components/base/Tabs/index.js

@@ -12,7 +12,7 @@ const Tab = styled(Tabbable).attrs({
   pb: 2,
   align: 'center',
   justify: 'center',
-  fontSize: 1,
+  fontSize: 3,
 })`
   border-bottom: 2px solid transparent;
   border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};

src/components/modals/AddAccount/index.js

@@ -304,7 +304,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="steel">
+              <Text fontSize={6} color="steel">
                 {t('addAccount.title')}
               </Text>
               <Step {...this.getStepProps()} />

src/components/modals/Send.js

@@ -30,7 +30,7 @@ const Steps = {
       }}
     >
       <Box flow={3}>
-        <Text fontSize={4} color="steel">
+        <Text fontSize={6} color="steel">
           {t('send.title')}
         </Text>
         <Box flow={1}>
@@ -157,7 +157,7 @@ class Send extends PureComponent<Props, State> {
 
           return (
             <Fragment>
-              <ModalBody p={2}>
+              <ModalBody p={3}>
                 <Breadcrumb
                   currentStep={step}
                   items={[