diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js
index 9c763607..54fd8fdb 100644
--- a/src/components/inputs/Input/index.js
+++ b/src/components/inputs/Input/index.js
@@ -25,6 +25,7 @@ const InputIconWrapper = styled.div`
flex: 1;
position: relative;
display: inline-block;
+ background: white;
`;
const TopLabel = styled.span`
@@ -43,10 +44,12 @@ const StyledInput = styled.input`
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
border-radius: 2px;
+
${props => props.hasAddon && css`
border-top-right-radius: 0;
border-bottom-right-radius: 0;
`}
+
border: 1px solid ${colors.DIVIDER};
border-color: ${props => props.borderColor};
@@ -72,6 +75,20 @@ const BottomText = styled.span`
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
`;
+const Overlay = styled.div`
+ ${props => props.isPartiallyHidden && css`
+ bottom: 0;
+ border: 1px solid ${colors.DIVIDER};
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-image: linear-gradient(to right,
+ rgba(0,0,0, 0) 0%,
+ rgba(255,255,255, 1) 220px
+ );
+ `}
+`;
+
class Input extends PureComponent {
getIcon(inputState) {
let icon = [];
@@ -113,6 +130,8 @@ class Input extends PureComponent {
color={this.getColor(this.props.state)}
/>
)}
+
+ {this.props.icon}
0}
innerRef={this.props.innerRef}
@@ -131,6 +150,7 @@ class Input extends PureComponent {
name={this.props.name}
data-lpignore="true"
/>
+
{this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
@@ -154,6 +174,7 @@ Input.propTypes = {
autocomplete: PropTypes.string,
autocorrect: PropTypes.string,
autocapitalize: PropTypes.string,
+ icon: PropTypes.node,
spellCheck: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
@@ -163,6 +184,7 @@ Input.propTypes = {
sideAddons: PropTypes.arrayOf(PropTypes.node),
isDisabled: PropTypes.bool,
name: PropTypes.string,
+ isPartiallyHidden: PropTypes.bool,
};
Input.defaultProps = {
diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js
index 0ab6b908..a0eba06a 100644
--- a/src/views/Wallet/views/Account/Receive/index.js
+++ b/src/views/Wallet/views/Account/Receive/index.js
@@ -7,6 +7,7 @@ import { H2 } from 'components/Heading';
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
+import Input from 'components/inputs/Input';
import ICONS from 'config/icons';
import colors from 'config/colors';
@@ -37,39 +38,7 @@ const StyledQRCode = styled(QRCode)`
border: 1px solid ${colors.BODY};
`;
-const ValueWrapper = styled.div`
- font-size: ${FONT_SIZE.SMALL};
- height: 40px;
- font-weight: ${FONT_WEIGHT.SMALLEST};
- line-height: 1.42857143;
- font-family: ${FONT_FAMILY.MONOSPACE};
- color: ${colors.TEXT_PRIMARY};
- border: 1px solid ${colors.DIVIDER};
- border-radius: 3px;
- padding: 10px 12px;
- padding-right: 38px;
- position: relative;
- flex: 1;
- user-select: all;
-
- ${props => props.isHidden && css`
- padding-right: 6px;
- user-select: none;
- border-radius: 3px 0px 0px 3px;
- &:after {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- background: linear-gradient(to right,
- rgba(255,255,255, 0) 0%,
- rgba(255,255,255, 1) 220px
- );
- pointer-events: none; /* so the text is still selectable */
- }
- `};
+const StyledInput = styled.div`
${props => props.isVerifying && css`
z-index: 10001; /* bigger than modal container */
@@ -130,6 +99,7 @@ const EyeButton = styled(Button)`
z-index: 10001;
padding: 0;
width: 30px;
+ background: white;
top: 5px;
position: absolute;
right: 10px;
@@ -168,36 +138,37 @@ const AccountReceive = (props: Props) => {
{isAddressVerifying && (
Confirm address on Trezor
)}
- {((addressVerified || addressUnverified) && !isAddressVerifying) && (
-
- )}
- >
- props.showAddress(account.addressPath)}
- >
-
-
-
-
-
- )}
- Address
+
- {address}
-
+ icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
+
+ )}
+ >
+ props.showAddress(account.addressPath)}
+ >
+
+
+
+
+
+ )}
+ />
{isAddressVerifying && (