1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00

Ensure method of adding contact when contacts exist (#10963)

This commit is contained in:
David Walsh 2021-04-30 20:15:19 -05:00 committed by GitHub
parent 7c602266cc
commit bc24d9e696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 14 deletions

View File

@ -5,6 +5,7 @@ import {
CONTACT_ADD_ROUTE, CONTACT_ADD_ROUTE,
CONTACT_VIEW_ROUTE, CONTACT_VIEW_ROUTE,
} from '../../../helpers/constants/routes'; } from '../../../helpers/constants/routes';
import Button from '../../../components/ui/button';
import EditContact from './edit-contact'; import EditContact from './edit-contact';
import AddContact from './add-contact'; import AddContact from './add-contact';
import ViewContact from './view-contact'; import ViewContact from './view-contact';
@ -66,6 +67,25 @@ export default class ContactListTab extends Component {
); );
} }
renderAddButton() {
const { history } = this.props;
return (
<div className="address-book-add-button">
<Button
className="address-book-add-button__button"
type="secondary"
rounded
onClick={() => {
history.push(CONTACT_ADD_ROUTE);
}}
>
{this.context.t('addContact')}
</Button>
</div>
);
}
renderContactContent() { renderContactContent() {
const { const {
viewingContact, viewingContact,
@ -106,10 +126,13 @@ export default class ContactListTab extends Component {
} }
render() { render() {
const { addingContact, addressBook } = this.props;
return ( return (
<div className="address-book-wrapper"> <div className="address-book-wrapper">
{this.renderAddressBookContent()} {this.renderAddressBookContent()}
{this.renderContactContent()} {this.renderContactContent()}
{!addingContact && addressBook.length > 0 && this.renderAddButton()}
</div> </div>
); );
} }

View File

@ -250,23 +250,14 @@
.address-book-add-button { .address-book-add-button {
&__button { &__button {
position: absolute; position: absolute;
top: 80px; top: 85px;
right: 16px; right: 16px;
height: 56px; width: auto;
width: 56px; border-radius: 100px;
border-radius: 18px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border-width: 1px;
background: $primary-blue;
margin-right: 5px;
cursor: pointer;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
@media screen and (max-width: 576px) { @media screen and (max-width: 576px) {
top: 10px; top: 16px;
right: 60px;
} }
} }
} }