Minor design updates

- update top bar items container / interactive states
- unify selects in settings

src/components/SettingsPage/sections/Display.js

@@ -165,6 +165,7 @@ class TabProfile extends PureComponent<Props, State> {
           <Row title={t('settings:display.region')} desc={t('settings:display.regionDesc')}>
             <Select
               style={{ minWidth: 250 }}
+              small
               onChange={this.handleChangeRegion}
               renderSelected={item => item && item.name}
               value={currentRegion}

src/components/ActivityIndicator.js → src/components/TopBar/ActivityIndicator.js

@@ -3,11 +3,12 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { createStructuredSelector } from 'reselect'
+
 import { globalSyncStateSelector } from 'reducers/bridgeSync'
 import { BridgeSyncConsumer } from 'bridge/BridgeSyncContext'
 import CounterValues from 'helpers/countervalues'
 import IconActivity from 'icons/Activity'
-import Box from './base/Box'
+import ItemContainer from './ItemContainer'
 
 const Activity = styled.div`
   background: ${p =>
@@ -20,7 +21,7 @@ const Activity = styled.div`
   bottom: 20px;
   height: 4px;
   position: absolute;
-  right: -2px;
+  right: 8px;
   width: 4px;
   cursor: pointer;
 `
@@ -31,10 +32,10 @@ class ActivityIndicatorUI extends Component<*> {
   render() {
     const { pending, error, onClick } = this.props
     return (
-      <Box justifyContent="center" relative cursor="pointer" onClick={onClick}>
+      <ItemContainer relative onClick={onClick}>
         <IconActivity size={16} />
         <Activity pending={pending} error={error} />
-      </Box>
+      </ItemContainer>
     )
   }
 }

src/components/TopBar/ItemContainer.js

@@ -0,0 +1,20 @@
+// @flow
+
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+export default styled(Box).attrs({
+  px: 2,
+  ml: 0,
+  justifyContent: 'center',
+  cursor: p => (p.interactive ? 'pointer' : 'default'),
+})`
+  opacity: 0.7;
+  &:hover {
+    opacity: ${p => (p.interactive ? 0.85 : 0.7)};
+  }
+  &:active {
+    opacity: ${p => (p.interactive ? 1 : 0.7)};
+  }
+`

src/components/TopBar.js → src/components/TopBar/index.js

@@ -10,7 +10,7 @@ import { withRouter } from 'react-router'
 import type { Location, RouterHistory } from 'react-router'
 import type { T } from 'types/common'
 
-import { rgba, darken } from 'styles/helpers'
+import { rgba } from 'styles/helpers'
 import { lock } from 'reducers/application'
 import { hasPassword } from 'reducers/settings'
 
@@ -22,6 +22,7 @@ import Box from 'components/base/Box'
 import GlobalSearch from 'components/GlobalSearch'
 
 import ActivityIndicator from './ActivityIndicator'
+import ItemContainer from './ItemContainer'
 
 const Container = styled(Box).attrs({
   px: 6,
@@ -43,23 +44,13 @@ const Inner = styled(Box).attrs({
 `
 
 const Bar = styled.div`
+  margin-left: 5px;
+  margin-right: 5px;
   height: 15px;
   width: 1px;
   background: ${p => p.theme.colors.fog};
 `
 
-const SettingButtonContainer = styled(Box).attrs({
-  px: 4,
-  ml: 0,
-  justifyContent: 'center',
-  cursor: 'pointer',
-})`
-  &:hover > * {
-    color: ${p => darken(p.theme.colors.graphite, 0.15)};
-    cursor: pointer;
-  }
-`
-
 const mapStateToProps = state => ({
   hasPassword: hasPassword(state),
 })
@@ -93,26 +84,26 @@ class TopBar extends PureComponent<Props> {
     return (
       <Container bg="lightGrey" color="graphite">
         <Inner>
-          <Box grow horizontal flow={4}>
+          <Box grow horizontal>
             <GlobalSearch t={t} isHidden />
-            <Box justifyContent="center">
+            <ItemContainer justifyContent="center">
               <IconDevices size={16} />
-            </Box>
+            </ItemContainer>
             <ActivityIndicator />
             <Box justifyContent="center">
               <Bar />
             </Box>
-            <SettingButtonContainer onClick={this.navigateToSettings}>
+            <ItemContainer interactive onClick={this.navigateToSettings}>
               <IconSettings size={16} />
-            </SettingButtonContainer>
+            </ItemContainer>
             {hasPassword && ( // FIXME this should be a dedicated component. therefore this component don't need to connect()
               <Fragment>
                 <Box justifyContent="center">
                   <Bar />
                 </Box>
-                <Box justifyContent="center" onClick={this.handleLock}>
+                <ItemContainer interactive justifyContent="center" onClick={this.handleLock}>
                   <IconLock size={16} />
-                </Box>
+                </ItemContainer>
               </Fragment>
             )}
           </Box>