Fix dropdown display issues

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 || 'balance'}`)}</Text>
-          <Text color="dark">{t(`orderAccounts.${cachedValue}`)}</Text>
+        <IconAngleDown height={7} width={8} />
-          <IconAngleDown height={7} width={8} />
-        </Box>
       </DropDown>
     )
   }

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>
-                <Box>{'Khalil Benihoud'}</Box>
+              <IconAngleDown height={7} width={8} />
-                <IconAngleDown height={7} width={8} />
-              </Box>
             </DropDown>
           </Box>
         </Inner>

src/components/base/DropDown/index.js

@@ -98,14 +98,8 @@ class DropDown extends PureComponent<Props> {
           selectedItem,
           ...downshiftProps
         }) => (
-          <Box
+          <Box {...getRootProps({ refKey: 'innerRef' })} horizontal relative>
-            {...getRootProps({ refKey: 'innerRef' })}
+            <Trigger {...getButtonProps()} tabIndex={0} {...props}>
-            horizontal
-            align="center"
-            relative
-            {...props}
-          >
-            <Trigger {...getButtonProps()} tabIndex={0}>
               {children}
             </Trigger>
             {isOpen && this.renderItems(items, selectedItem, downshiftProps)}