diff --git a/source/components/IDInput/index.jsx b/source/components/IDInput/index.jsx index 3f564da5..165f9821 100644 --- a/source/components/IDInput/index.jsx +++ b/source/components/IDInput/index.jsx @@ -34,12 +34,12 @@ const IDInput = ({ () => [principalId, accountId].includes(value), [principalId, accountId, value], ); - const notInContacts = useMemo(() => !contacts + const inContacts = useMemo(() => contacts .flatMap((c) => c.contacts) .map((c) => c.id) .includes(value), [contacts, value]); - const shouldDisplayContacts = value !== null && isValid && notInContacts && !isUserAddress; + const shouldDisplayAddToContacts = value !== null && isValid && !inContacts && !isUserAddress; const handleSelectedContact = (contact) => setSelectedContact(contact); @@ -93,7 +93,7 @@ const IDInput = ({ input: clsx( classes.input, isValid === false && classes.inputInvalid, - shouldDisplayContacts && classes.paddingRight, + !!contacts.length && classes.paddingRight, ), }} fullWidth @@ -127,7 +127,7 @@ const IDInput = ({ )} - {shouldDisplayContacts && ( + {shouldDisplayAddToContacts && (
diff --git a/source/components/IDInput/styles.js b/source/components/IDInput/styles.js index 2d88f699..8eb435b5 100644 --- a/source/components/IDInput/styles.js +++ b/source/components/IDInput/styles.js @@ -41,7 +41,6 @@ export default makeStyles((theme) => ({ backgroundClip: 'padding-box, border-box', }, '&:focus': { - padding: '0px 11px', border: 'double 2px transparent', backgroundImage: 'linear-gradient(white, white), radial-gradient(circle at top left,#FFE701,#FA51D3,#10D9ED,#53FF54)', @@ -50,15 +49,12 @@ export default makeStyles((theme) => ({ }, }, inputInvalid: { - padding: '0px 11px', border: `2px solid ${theme.palette.danger.main}`, '&:hover': { - padding: '0px 11px', border: `2px solid ${theme.palette.danger.main}`, }, '&:focus': { - padding: '0px 11px', border: `2px solid ${theme.palette.danger.main}`, }, },