Merge pull request #763 from meriadec/polish-again

Polish again

src/components/AccountPage/EmptyStateAccount.js

@@ -41,7 +41,7 @@ class EmptyStateAccount extends PureComponent<Props, *> {
         />
         <Box mt={5} alignItems="center">
           <Title>{t('app:account.emptyState.title')}</Title>
-          <Description>
+          <Description mt={3} style={{ display: 'block' }}>
             <Trans i18nKey="app:account.emptyState.desc">
               {'Make sure the'}
               <Text ff="Open Sans|SemiBold" color="dark">
@@ -50,7 +50,7 @@ class EmptyStateAccount extends PureComponent<Props, *> {
               {'app is installed to receive funds.'}
             </Trans>
           </Description>
-          <Button mt={3} padded primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
+          <Button mt={5} padded primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
             <Box horizontal flow={1} alignItems="center">
               <IconReceive size={12} />
               <Box>{t('app:account.emptyState.buttons.receiveFunds')}</Box>

src/components/DashboardPage/EmptyState.js

@@ -46,8 +46,10 @@ class EmptyState extends PureComponent<Props, *> {
         />
         <Box mt={5} alignItems="center">
           <Title>{t('app:emptyState.dashboard.title')}</Title>
-          <Description>{t('app:emptyState.dashboard.desc')}</Description>
-          <Box mt={3} horizontal justifyContent="space-around" style={{ width: 300 }}>
+          <Description mt={3} style={{ maxWidth: 600 }}>
+            {t('app:emptyState.dashboard.desc')}
+          </Description>
+          <Box mt={5} horizontal style={{ width: 300 }} flow={3} justify="center">
             <Button padded primary style={{ minWidth: 120 }} onClick={this.handleInstallApp}>
               {t('app:emptyState.dashboard.buttons.installApp')}
             </Button>
@@ -76,11 +78,9 @@ export const Description = styled(Box).attrs({
   ff: 'Open Sans|Regular',
   fontSize: 4,
   color: p => p.theme.colors.graphite,
-})`
-  margin: 10px auto 25px;
-  display: block;
-  text-align: center;
-`
+  textAlign: 'center',
+})``
+
 export default compose(
   connect(
     null,

src/components/DeviceInteraction/components.js

@@ -100,12 +100,21 @@ export const ErrorDescContainer = ({
   error: Error,
   onRetry: void => void,
 }) => (
-  <Box horizontal fontSize={3} color="alertRed" align="center" cursor="text" {...p}>
+  <Box
+    horizontal
+    fontSize={3}
+    color="alertRed"
+    align="center"
+    cursor="text"
+    ff="Open Sans|SemiBold"
+    style={{ maxWidth: 500 }}
+    {...p}
+  >
     <IconExclamationCircle size={16} />
-    <Box ml={1}>
+    <Box ml={2} mr={1} shrink grow style={{ maxWidth: 300 }}>
       <TranslatedError error={error} />
     </Box>
-    <FakeLink ml={1} underline color="alertRed" onClick={onRetry}>
+    <FakeLink ml="auto" underline color="alertRed" onClick={onRetry}>
       {'Retry'}
     </FakeLink>
   </Box>

src/components/DeviceInteraction/index.js

@@ -107,7 +107,7 @@ class DeviceInteraction extends PureComponent<Props, State> {
           )
         })}
         {error &&
-          shouldRenderRetry && <ErrorDescContainer error={error} onRetry={this.reset} mt={2} />}
+          shouldRenderRetry && <ErrorDescContainer error={error} onRetry={this.reset} mt={4} />}
       </Box>
     )
   }

src/components/DeviceInteraction/stories.js

@@ -34,6 +34,7 @@ class Wrapper extends React.Component<any> {
           {'reset'}
         </button>
         <DeviceInteraction
+          shouldRenderRetry
           ref={n => (this._ref = n)}
           steps={[
             {

src/components/Onboarding/helperComponents.js

@@ -140,7 +140,10 @@ export const GenuineCheckCardWrapper = styled(Box).attrs({
   height: 74px;
   transition: all ease-in-out 0.2s;
   color: ${p => (p.isDisabled ? p.theme.colors.grey : p.theme.colors.black)};
-  border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
+  border: ${p =>
+    `1px ${p.isDisabled ? 'dashed' : 'solid'} ${
+      p.isError ? p.theme.colors.alertRed : p.theme.colors.fog
+    }`};
   pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
   background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};
   opacity: ${p => (p.isDisabled ? 0.7 : 1)};

src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js

@@ -7,7 +7,7 @@ import type { T } from 'types/common'
 import type { OnboardingState } from 'reducers/onboarding'
 
 import FakeLink from 'components/base/FakeLink'
-import IconCross from 'icons/Cross'
+import IconExclamationCircle from 'icons/ExclamationCircle'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import TranslatedError from 'components/TranslatedError'
@@ -57,9 +57,21 @@ export function GenuineCheckUnavailableMessage({
   onboarding: OnboardingState,
 }) {
   return (
-    <Box align="center" flow={1} color={colors.alertRed}>
+    <Box
+      horizontal
+      align="center"
+      flow={2}
+      color={colors.alertRed}
+      ff="Open Sans|SemiBold"
+      fontSize={4}
+    >
+      <IconExclamationCircle size={16} />
+      <span>
+        <TranslatedError error={onboarding.genuine.genuineCheckUnavailable} />
+      </span>
       <FakeLink
-        ff="Open Sans|Regular"
+        color="alertRed"
+        ff="Open Sans|SemiBold"
         fontSize={4}
         underline
         onClick={() => {
@@ -72,14 +84,6 @@ export function GenuineCheckUnavailableMessage({
       >
         {t('app:common.retry')}
       </FakeLink>
-      <Box horizontal justify="center">
-        <Box justifyContent="center">
-          <IconCross size={12} />
-        </Box>
-        <Box ff="Open Sans|Regular" style={{ maxWidth: 150 }} fontSize={2} ml={1}>
-          <TranslatedError error={onboarding.genuine.genuineCheckUnavailable} />
-        </Box>
-      </Box>
     </Box>
   )
 }

src/components/Onboarding/steps/GenuineCheck/index.js

@@ -14,6 +14,7 @@ import Button from 'components/base/Button'
 import RadioGroup from 'components/base/RadioGroup'
 import GenuineCheckModal from 'components/GenuineCheckModal'
 
+import IconCross from 'icons/Cross'
 import IconCheck from 'icons/Check'
 
 import {
@@ -220,7 +221,10 @@ class GenuineCheck extends PureComponent<StepProps, State> {
             </GenuineCheckCardWrapper>
           </Box>
           <Box mt={3}>
-            <GenuineCheckCardWrapper isDisabled={!genuine.recoveryStepPass}>
+            <GenuineCheckCardWrapper
+              isDisabled={!genuine.recoveryStepPass}
+              isError={genuine.genuineCheckUnavailable}
+            >
               <Box justify="center">
                 <Box horizontal>
                   <IconOptionRow color={!genuine.recoveryStepPass ? 'grey' : 'wallet'}>
@@ -239,11 +243,9 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                       </Box>
                     </Box>
                   ) : genuine.genuineCheckUnavailable ? (
-                    <GenuineCheckUnavailableMessage
-                      handleOpenGenuineCheckModal={this.handleOpenGenuineCheckModal}
-                      onboarding={onboarding}
-                      t={t}
-                    />
+                    <Box color="alertRed">
+                      <IconCross size={16} />
+                    </Box>
                   ) : (
                     <Button
                       primary
@@ -256,6 +258,15 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                 </Box>
               )}
             </GenuineCheckCardWrapper>
+            {genuine.genuineCheckUnavailable && (
+              <Box mt={4}>
+                <GenuineCheckUnavailableMessage
+                  handleOpenGenuineCheckModal={this.handleOpenGenuineCheckModal}
+                  onboarding={onboarding}
+                  t={t}
+                />
+              </Box>
+            )}
           </Box>
         </StepContainerInner>
         {genuine.genuineCheckUnavailable ? (

src/components/TopBar/index.js

@@ -119,9 +119,11 @@ class TopBar extends PureComponent<Props> {
                 <Box justifyContent="center">
                   <Bar />
                 </Box>
-                <ItemContainer isInteractive justifyContent="center" onClick={this.handleLock}>
-                  <IconLock size={16} />
-                </ItemContainer>
+                <Tooltip render={() => t('app:common.lock')}>
+                  <ItemContainer isInteractive justifyContent="center" onClick={this.handleLock}>
+                    <IconLock size={16} />
+                  </ItemContainer>
+                </Tooltip>
               </Fragment>
             )}
           </Box>

src/components/base/CopyWithFeedback.js

@@ -0,0 +1,79 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import { darken, lighten } from 'styles/helpers'
+
+import IconCopy from 'icons/Copy'
+import Box from 'components/base/Box'
+
+let clipboard = null
+
+if (!process.env.STORYBOOK_ENV) {
+  const electron = require('electron')
+  clipboard = electron.clipboard // eslint-disable-line
+}
+
+type Props = {
+  t: T,
+  text: string,
+}
+
+type State = {
+  isCopied: boolean,
+}
+
+class CopyWithFeedback extends PureComponent<Props, State> {
+  state = {
+    isCopied: false,
+  }
+
+  componentWillUnmount() {
+    this._isUnmounted = true
+  }
+
+  _isUnmounted = false
+
+  handleCopy = () => {
+    const { text } = this.props
+    clipboard && clipboard.writeText(text)
+    this.setState({ isCopied: true })
+    setTimeout(() => {
+      this.setState({ isCopied: false })
+    }, 1e3)
+  }
+
+  render() {
+    const { t } = this.props
+    const { isCopied } = this.state
+    return (
+      <ClickableWrapper onClick={this.handleCopy}>
+        <IconCopy size={16} />
+        <span>{isCopied ? t('app:common.copied') : t('app:common.copy')}</span>
+      </ClickableWrapper>
+    )
+  }
+}
+
+const ClickableWrapper = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  flow: 1,
+  color: 'wallet',
+  fontSize: 4,
+  ff: 'Open Sans|SemiBold',
+  cursor: 'pointer',
+})`
+  &:hover {
+    color: ${p => lighten(p.theme.colors.wallet, 0.05)};
+  }
+  &:active {
+    color: ${p => darken(p.theme.colors.wallet, 0.1)};
+  }
+`
+
+export default translate()(CopyWithFeedback)

src/components/modals/AccountSettingRenderBody.js

@@ -206,11 +206,11 @@ class HelperComp extends PureComponent<Props, State> {
               </Box>
               <Box>
                 <Input
+                  autoFocus
                   containerProps={{ style: { width: 230 } }}
                   value={account.name}
                   maxLength={MAX_ACCOUNT_NAME_SIZE}
                   onChange={this.handleChangeName}
-                  renderLeft={<InputLeft currency={account.currency} />}
                   onFocus={e => this.handleFocus(e, 'accountName')}
                   error={accountNameError && t('app:account.settings.accountName.error')}
                 />

src/components/modals/OperationDetails.js

@@ -16,7 +16,6 @@ import { MODAL_OPERATION_DETAILS } from 'config/constants'
 import { getMarketColor } from 'styles/helpers'
 
 import Box from 'components/base/Box'
-import CopyToClipboard from 'components/base/CopyToClipboard'
 import GradientBox from 'components/GradientBox'
 import GrowScroll from 'components/base/GrowScroll'
 import Button from 'components/base/Button'
@@ -24,12 +23,12 @@ import Bar from 'components/base/Bar'
 import FormattedVal from 'components/base/FormattedVal'
 import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
 import Text from 'components/base/Text'
+import CopyWithFeedback from 'components/base/CopyWithFeedback'
 
 import { createStructuredSelector, createSelector } from 'reselect'
 import { accountSelector } from 'reducers/accounts'
 import { currencySettingsForAccountSelector, marketIndicatorSelector } from 'reducers/settings'
 
-import IconCopy from 'icons/Copy'
 import IconChevronRight from 'icons/ChevronRight'
 import CounterValue from 'components/CounterValue'
 import ConfirmationCheck from 'components/OperationsList/ConfirmationCheck'
@@ -45,13 +44,9 @@ const OpDetailsTitle = styled(Box).attrs({
   letter-spacing: 2px;
 `
 
-const CopyBtn = styled(Box).attrs({
-  horizontal: true,
-  flow: 1,
+const GradientHover = styled(Box).attrs({
   align: 'center',
   color: 'wallet',
-  cursor: 'pointer',
-  ff: 'Open Sans|SemiBold',
 })`
   background: white;
   position: absolute;
@@ -68,19 +63,15 @@ const OpDetailsData = styled(Box).attrs({
   fontSize: 4,
   relative: true,
 })`
-  ${CopyBtn} {
+  ${GradientHover} {
     display: none;
   }
 
-  &:hover ${CopyBtn} {
+  &:hover ${GradientHover} {
     display: flex;
   }
 `
 
-const CanSelect = styled.div`
-  user-select: text;
-`
-
 const B = styled(Bar).attrs({
   color: 'lightGrey',
   size: 1,
@@ -192,7 +183,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
                 {fee ? (
                   <Fragment>
                     <OpDetailsData>
-                      <FormattedVal unit={unit} showCode val={fee} color="dark" />
+                      <FormattedVal unit={unit} showCode val={fee} color="smoke" />
                     </OpDetailsData>
                   </Fragment>
                 ) : (
@@ -216,16 +207,9 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
               <OpDetailsTitle>{t('app:operationDetails.identifier')}</OpDetailsTitle>
               <OpDetailsData>
                 <Ellipsis canSelect>{hash}</Ellipsis>
-
-                <CopyToClipboard
-                  data={hash}
-                  render={copy => (
-                    <CopyBtn onClick={copy}>
-                      <IconCopy size={16} />
-                      <span>{t('app:common.copy')}</span>
-                    </CopyBtn>
-                  )}
-                />
+                <GradientHover>
+                  <CopyWithFeedback text={hash} />
+                </GradientHover>
               </OpDetailsData>
             </Box>
             <B />
@@ -300,11 +284,14 @@ export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
     const shouldShowMore = recipients.length > 3
     return (
       <Box>
-        <OpDetailsData>
-          {(shouldShowMore ? recipients.slice(0, numToShow) : recipients).map(recipient => (
-            <CanSelect key={recipient}>{recipient}</CanSelect>
-          ))}
-        </OpDetailsData>
+        {(shouldShowMore ? recipients.slice(0, numToShow) : recipients).map(recipient => (
+          <OpDetailsData key={recipient}>
+            {recipient}
+            <GradientHover>
+              <CopyWithFeedback text={recipient} />
+            </GradientHover>
+          </OpDetailsData>
+        ))}
         {shouldShowMore &&
           !showMore && (
             <Box onClick={this.onClick} py={1}>
@@ -314,13 +301,10 @@ export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
               </More>
             </Box>
           )}
-        {showMore && (
-          <OpDetailsData>
-            {recipients
-              .slice(numToShow)
-              .map(recipient => <CanSelect key={recipient}>{recipient}</CanSelect>)}
-          </OpDetailsData>
-        )}
+        {showMore &&
+          recipients
+            .slice(numToShow)
+            .map(recipient => <OpDetailsData key={recipient}>{recipient}</OpDetailsData>)}
         {shouldShowMore &&
           showMore && (
             <Box onClick={this.onClick} py={1}>

static/i18n/en/app.yml

@@ -21,6 +21,7 @@ common:
   save: Save
   password: Password
   editProfile: Preferences
+  lock: Lock
   lockApplication: Lock Ledger Live
   showMore: Show more
   max: Max
@@ -35,6 +36,7 @@ common:
   reverify: Re-verify
   verify: Verify
   copy: Copy
+  copied: Copied!
   addressCopied: Address copied!
   lockScreen:
     title: Welcome back

static/i18n/en/errors.yml

@@ -18,7 +18,7 @@ DisconnectedDevice:
   title: 'The device was disconnected.'
   description: ''
 Error: # as this is a generic unhandled error i think it's ok to have a generic title. but keep description to {{message}}
-  title: 'Oops, an error occurred'
+  title: 'Oops, an error occurred.'
   description: '{{message}}'
 FeeEstimationFailed:
   title: 'Fee estimation error. Try again or set a custom fee (status: {{status}})'

static/i18n/fr/app.yml

@@ -35,6 +35,7 @@ common:
   reverify: Re-verify
   verify: Verify
   copy: Copy
+  copied: Copied!
   addressCopied: Address copied!
   lockScreen:
     title: Welcome back