From 313e4cd740f6b237582ee97f1c5bb3245fae9410 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 18 May 2018 17:43:36 +0200
Subject: [PATCH 1/2] Minor design updates

- update top bar items container / interactive states
- unify selects in settings
---
 .../SettingsPage/sections/Display.js          |  1 +
 .../{ => TopBar}/ActivityIndicator.js         |  9 +++---
 src/components/TopBar/ItemContainer.js        | 20 ++++++++++++
 src/components/{TopBar.js => TopBar/index.js} | 31 +++++++------------
 4 files changed, 37 insertions(+), 24 deletions(-)
 rename src/components/{ => TopBar}/ActivityIndicator.js (92%)
 create mode 100644 src/components/TopBar/ItemContainer.js
 rename src/components/{TopBar.js => TopBar/index.js} (81%)

diff --git a/src/components/SettingsPage/sections/Display.js b/src/components/SettingsPage/sections/Display.js
index 2a34beb1..f2056439 100644
--- a/src/components/SettingsPage/sections/Display.js
+++ b/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}
diff --git a/src/components/ActivityIndicator.js b/src/components/TopBar/ActivityIndicator.js
similarity index 92%
rename from src/components/ActivityIndicator.js
rename to src/components/TopBar/ActivityIndicator.js
index 3e27561c..39290a5d 100644
--- a/src/components/ActivityIndicator.js
+++ b/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>
     )
   }
 }
diff --git a/src/components/TopBar/ItemContainer.js b/src/components/TopBar/ItemContainer.js
new file mode 100644
index 00000000..a4019dde
--- /dev/null
+++ b/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)};
+  }
+`
diff --git a/src/components/TopBar.js b/src/components/TopBar/index.js
similarity index 81%
rename from src/components/TopBar.js
rename to src/components/TopBar/index.js
index e1aeb9da..303e661c 100644
--- a/src/components/TopBar.js
+++ b/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>

From 5d6a9602a07824ad6ae0b57b7f9b292fd9d8042b Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 18 May 2018 17:53:29 +0200
Subject: [PATCH 2/2] Update README.md

---
 README.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a024deb4..dc29aa6a 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,16 @@
 
 #### Requirements
 
-Project has been tested under [NodeJS](https://nodejs.org) v9.3.0, with [Yarn](https://yarnpkg.com) v1.3.0 and [Python](https://www.python.org/) v2.7.10 (used by [node-gyp](https://github.com/nodejs/node-gyp) to build native addons). You will also need a C++ compiler.
+Project has been tested with
+
+- [NodeJS](https://nodejs.org) v9.3.0
+- [Yarn](https://yarnpkg.com) v1.3.0
+- [Python](https://www.python.org/) v2.7.10 (used by [node-gyp](https://github.com/nodejs/node-gyp) to build native addons)
+- You will also need a C++ compiler
+
+#### Optional
+
+- `Museo Sans` font - for Ledger guys, [follow that link](https://drive.google.com/drive/folders/14R6kGFtx53DuqTyIOjnT7BGogzeyMSzN), download `museosans.zip` and extract it inside the `static/fonts/museosans` directory
 
 #### Setup