Minor design fixes

src/components/Breadcrumb/Step.js

@@ -3,6 +3,8 @@
 import React from 'react'
 import styled from 'styled-components'
 
+import { colors } from 'styles/theme'
+
 import Box from 'components/base/Box'
 
 import IconCheck from 'icons/Check'
@@ -33,7 +35,7 @@ const StepNumber = styled(Box).attrs({
   ff: 'Rubik|Regular',
 })`
   border-radius: 50%;
-  border: 1px solid #d8d8d8;
+  border: 1px solid ${p => (['active', 'valid'].includes(p.status) ? colors.wallet : colors.fog)};
   font-size: 10px;
   height: ${RADIUS}px;
   line-height: 10px;

src/components/DeviceConnect/index.js

@@ -111,7 +111,6 @@ const Info = styled(Box).attrs({
   fontSize: 3,
   horizontal: true,
   ml: 1,
-  pt: 1,
 })`
   strong {
     font-weight: 600;
@@ -310,10 +309,8 @@ class DeviceConnect extends PureComponent<Props> {
 
         {appState.fail ? (
           <Info hasErrors>
-            <Box>
-              <IconInfoCircle size={12} />
-            </Box>
-            <Box style={{ userSelect: 'text' }}>
+            <IconInfoCircle size={12} />
+            <Box shrink selectable>
               {accountName ? (
                 <Trans i18nKey="deviceConnect:info" parent="div">
                   {'You must use the device associated to the account '}

src/components/base/Box/index.js

@@ -49,6 +49,13 @@ const Box = styled.div`
   overflow-y: ${p => (p.scroll === true ? 'auto' : '')};
   position: ${p => (p.relative ? 'relative' : p.sticky ? 'absolute' : '')};
 
+  ${p =>
+    p.selectable &&
+    `
+    user-select: text;
+    cursor: text;
+  `};
+
   ${p =>
     p.sticky &&
     `

src/components/modals/AddAccount/index.js

@@ -274,6 +274,7 @@ class AddAccountModal extends PureComponent<Props, State> {
       <Modal
         name={MODAL_ADD_ACCOUNT}
         onHide={this.handleReset}
+        preventBackdropClick
         render={({ onClose }) => (
           <ModalBody onClose={onClose}>
             <ModalTitle>{t('addAccount:title')}</ModalTitle>