From d257dfd91a3efdc8e097d8c3419ba10d571d2863 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 15 Feb 2018 12:13:28 +0100
Subject: [PATCH] Fix dropdown display issues

---
 src/components/DashboardPage/AccountsOrder.js | 15 ++++++---------
 src/components/TopBar.js                      | 11 +++++++----
 src/components/base/DropDown/index.js         | 10 ++--------
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/components/DashboardPage/AccountsOrder.js b/src/components/DashboardPage/AccountsOrder.js
index 4d6b3e5b..f52d6ebd 100644
--- a/src/components/DashboardPage/AccountsOrder.js
+++ b/src/components/DashboardPage/AccountsOrder.js
@@ -14,7 +14,6 @@ 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'
@@ -62,10 +61,6 @@ class AccountsOrder extends Component<Props, State> {
     const { t } = this.props
     const { cachedValue } = this.state
 
-    if (!cachedValue) {
-      return null
-    }
-
     const sortItems = [
       {
         key: 'name',
@@ -87,11 +82,13 @@ class AccountsOrder extends Component<Props, State> {
         items={sortItems}
         ff="Open Sans|SemiBold"
         fontSize={4}
+        flow={1}
+        color="dark"
+        horizontal
+        align="center"
       >
-        <Box horizontal align="center" flow={1} color="dark">
-          <Text color="dark">{t(`orderAccounts.${cachedValue}`)}</Text>
-          <IconAngleDown height={7} width={8} />
-        </Box>
+        <Text color="dark">{t(`orderAccounts.${cachedValue || 'balance'}`)}</Text>
+        <IconAngleDown height={7} width={8} />
       </DropDown>
     )
   }
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 24ca53e2..d66928b3 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -158,11 +158,14 @@ class TopBar extends PureComponent<Props, State> {
               ff="Open Sans|SemiBold"
               fontSize={4}
               offsetTop={-2}
+              align="center"
+              justify="center"
+              flow={1}
+              color="warmGrey"
+              horizontal
             >
-              <Box horizontal align="center" flow={1} color="warmGrey">
-                <Box>{'Khalil Benihoud'}</Box>
-                <IconAngleDown height={7} width={8} />
-              </Box>
+              <Box>{'Khalil Benihoud'}</Box>
+              <IconAngleDown height={7} width={8} />
             </DropDown>
           </Box>
         </Inner>
diff --git a/src/components/base/DropDown/index.js b/src/components/base/DropDown/index.js
index f6608038..1ff0d50a 100644
--- a/src/components/base/DropDown/index.js
+++ b/src/components/base/DropDown/index.js
@@ -98,14 +98,8 @@ class DropDown extends PureComponent<Props> {
           selectedItem,
           ...downshiftProps
         }) => (
-          <Box
-            {...getRootProps({ refKey: 'innerRef' })}
-            horizontal
-            align="center"
-            relative
-            {...props}
-          >
-            <Trigger {...getButtonProps()} tabIndex={0}>
+          <Box {...getRootProps({ refKey: 'innerRef' })} horizontal relative>
+            <Trigger {...getButtonProps()} tabIndex={0} {...props}>
               {children}
             </Trigger>
             {isOpen && this.renderItems(items, selectedItem, downshiftProps)}