Pixel push session for Settings page and other stuff

src/components/CurrentAddress/index.js

@@ -19,7 +19,6 @@ import QRCode from 'components/base/QRCode'
 import IconCheck from 'icons/Check'
 import IconCopy from 'icons/Copy'
 import IconInfoCircle from 'icons/InfoCircle'
-import IconShare from 'icons/Share'
 import IconShield from 'icons/Shield'
 
 const Container = styled(Box).attrs({
@@ -64,6 +63,8 @@ const Label = styled(Box).attrs({
 `
 
 const Footer = styled(Box).attrs({
+  justify: 'center',
+  flow: 4,
   horizontal: true,
   mt: 4,
 })`
@@ -82,13 +83,17 @@ const FooterButtonWrapper = styled(Box).attrs({
   width: 55px;
 
   &:hover {
-    background-color: rgba(100, 144, 241, 0.1);
+    background-color: ${p => rgba(p.theme.colors.wallet, 0.1)};
     color: ${p => p.theme.colors.dark};
 
     svg {
       color: ${p => p.theme.colors.wallet};
     }
   }
+
+  &:active {
+    background-color: ${p => rgba(p.theme.colors.wallet, 0.15)};
+  }
 `
 
 const FooterButton = ({
@@ -100,7 +105,7 @@ const FooterButton = ({
   label: string,
   onClick: Function,
 }) => (
-  <Box grow alignItems="center" justifyContent="center">
+  <Box alignItems="center" justifyContent="center">
     <FooterButtonWrapper onClick={onClick}>
       {icon}
       <Box fontSize={3} ff="Museo Sans|Bold" mt={1}>
@@ -203,16 +208,13 @@ class CurrentAddress extends PureComponent<Props> {
         )}
         {withFooter && (
           <Footer>
-            {withVerify && (
+            <FooterButton icon={<IconCheck size={16} />} label="Verify" onClick={onVerify} />
-              <FooterButton icon={<IconCheck size={16} />} label="Verify" onClick={onVerify} />
-            )}
             <CopyToClipboard
               data={address}
               render={copy => (
                 <FooterButton icon={<IconCopy size={16} />} label="Copy" onClick={copy} />
               )}
             />
-            <FooterButton icon={<IconShare size={16} />} label="Share" onClick={onShare} />
           </Footer>
         )}
       </Container>

src/components/DeviceConnect/index.js

@@ -202,7 +202,7 @@ class DeviceConnect extends PureComponent<Props> {
     const hasMultipleDevices = devices.length > 1
 
     return (
-      <Box flow={4}>
+      <Box flow={4} ff="Open Sans">
         <Step validated={hasDevice}>
           <StepContent>
             <StepIcon>

src/components/OperationsList/index.js

@@ -13,7 +13,6 @@ import {
 
 import type { Account } from '@ledgerhq/live-common/lib/types'
 
-import noop from 'lodash/noop'
 import keyBy from 'lodash/keyBy'
 
 import type { T } from 'types/common'

src/components/SettingsPage/SettingsSection.js

@@ -62,7 +62,7 @@ export function SettingsSectionHeader({
         <Box ff="Museo Sans|Regular" color="dark">
           {title}
         </Box>
-        <Box ff="Open Sans" fontSize={3}>
+        <Box ff="Open Sans" fontSize={3} mt={1}>
           {desc}
         </Box>
       </Box>
@@ -101,11 +101,11 @@ export function SettingsSectionRow({
 }) {
   return (
     <SettingsSectionRowContainer onClick={onClick}>
-      <Box grow>
+      <Box grow shrink>
         <Box ff="Open Sans|SemiBold" color="dark" fontSize={4}>
           {title}
         </Box>
-        <Box ff="Open Sans" fontSize={3} color="grey">
+        <Box ff="Open Sans" fontSize={3} color="grey" mt={1} mr={1}>
           {desc}
         </Box>
       </Box>

src/components/SettingsPage/sections/Display.js

@@ -13,6 +13,7 @@ import {
 import type { SettingsState as Settings } from 'reducers/settings'
 import type { T } from 'types/common'
 
+import Box from 'components/base/Box'
 import ExchangeSelect from 'components/SelectExchange'
 import Select from 'components/base/Select'
 import RadioGroup from 'components/base/RadioGroup'
@@ -152,29 +153,30 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('settings:display.counterValue')}
             desc={t('settings:display.counterValueDesc')}
           >
-            <Select
+            <Box horizontal flow={2}>
-              small
+              <Select
-              minWidth={250}
+                small
-              onChange={this.handleChangeCounterValue}
+                minWidth={250}
-              itemToString={item => (item ? item.name : '')}
+                onChange={this.handleChangeCounterValue}
-              renderSelected={item => item && item.name}
+                itemToString={item => (item ? item.name : '')}
-              options={fiats}
+                renderSelected={item => item && item.name}
-              value={cvOption}
+                options={fiats}
-            />
+                value={cvOption}
+              />
+              <ExchangeSelect
+                small
+                from={intermediaryCurrency}
+                to={counterValueCurrency}
+                exchangeId={counterValueExchange}
+                onChange={this.handleChangeExchange}
+                minWidth={150}
+              />
+            </Box>
           </Row>
           <Row
             title={`Exchange (${intermediaryCurrency.ticker}${counterValueCurrency.ticker})`}
             desc="The exchange to use for countervalue conversion"
-          >
+          />
-            <ExchangeSelect
-              small
-              from={intermediaryCurrency}
-              to={counterValueCurrency}
-              exchangeId={counterValueExchange}
-              onChange={this.handleChangeExchange}
-              minWidth={200}
-            />
-          </Row>
           <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
             <Select
               small

src/components/SettingsPage/sections/Profile.js

@@ -118,7 +118,7 @@ class TabProfile extends PureComponent<Props, State> {
   }
 
   render() {
-    const { t, settings } = this.props
+    const { t, settings, saveSettings } = this.props
     const {
       isSoftResetModalOpened,
       isHardResetModalOpened,
@@ -150,6 +150,21 @@ class TabProfile extends PureComponent<Props, State> {
           >
             <CheckBox isChecked={settings.developerMode} onChange={this.handleDeveloperMode} />
           </Row>
+          <Row
+            title={t('settings:profile.reportErrors')}
+            desc={t('settings:profile.reportErrorsDesc')}
+          >
+            <CheckBox
+              isChecked={settings.sentryLogs}
+              onChange={sentryLogs => saveSettings({ sentryLogs })}
+            />
+          </Row>
+          <Row title={t('settings:profile.analytics')} desc={t('settings:profile.analyticsDesc')}>
+            <CheckBox
+              isChecked={settings.shareAnalytics}
+              onChange={shareAnalytics => saveSettings({ shareAnalytics })}
+            />
+          </Row>
           <Row
             title={t('settings:profile.softResetTitle')}
             desc={t('settings:profile.softResetDesc')}

src/components/base/SideBar/SideBarListItem.js

@@ -63,7 +63,7 @@ const Container = styled(Tabbable).attrs({
   py: 2,
 })`
   cursor: ${p => (p.isActive ? 'default' : 'pointer')};
-  color: ${p => p.theme.colors.smoke};
+  color: ${p => (p.isActive ? p.theme.colors.dark : p.theme.colors.smoke)};
   background: ${p => (p.isActive ? p.theme.colors.lightGrey : '')};
 
   &:active {

static/i18n/en/settings.yml

@@ -51,6 +51,10 @@ profile:
   hardReset: Hard reset
   developerMode: Developer Mode
   developerModeDesc: Enable visibility of developer apps & currencies like Bitcoin Testnet
+  analytics: Share analytics
+  analyticsDesc: Help Ledger improve its products and services by automatically sending diagnostics and usage data.
+  reportErrors: Sentry Logs
+  reportErrorsDesc: Help Ledger improve its products and services by automatically sending diagnostics and usage data.
 about:
   faq: FAQ
   faqDesc: Lorem ipsum dolor sit amet