1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Make account details modal close button easier to click (#7797)

The account details close button is difficult to click from the e2e
tests because it has a size of zero. The actual icon is added via CSS
as an `::after` pseudo-element.

The CSS has been adjusted to give the icon a size, and it the markup
is now a `button` rather than a `div`.
This commit is contained in:
Mark Stacey 2020-01-10 10:43:53 -04:00 committed by GitHub
parent 61ab053bb1
commit dac83f6188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 21 additions and 11 deletions

View File

@ -112,7 +112,8 @@ describe('MetaMask', function () {
publicAddress = await addressInput.getAttribute('value')
const accountModal = await driver.findElement(By.css('span .modal'))
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await driver.wait(until.stalenessOf(accountModal))
await delay(regularDelayMs)

View File

@ -118,7 +118,8 @@ describe('Using MetaMask with an existing account', function () {
const [address] = await findElements(driver, By.css('input.qr-ellip-address'))
assert.equal(await address.getAttribute('value'), testAddress)
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await delay(largeDelayMs)
})
@ -128,7 +129,8 @@ describe('Using MetaMask with an existing account', function () {
const detailModal = await driver.findElement(By.css('span .modal'))
await delay(regularDelayMs)
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await driver.wait(until.stalenessOf(detailModal))
await delay(regularDelayMs)
})

View File

@ -117,7 +117,8 @@ describe('MetaMask', function () {
const accountModal = await driver.findElement(By.css('span .modal'))
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await driver.wait(until.stalenessOf(accountModal))
await delay(regularDelayMs)

View File

@ -148,7 +148,8 @@ describe('MetaMask', function () {
const accountModal = await driver.findElement(By.css('span .modal'))
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await driver.wait(until.stalenessOf(accountModal))
await delay(regularDelayMs)

View File

@ -113,7 +113,8 @@ describe('MetaMask', function () {
publicAddress = await addressInput.getAttribute('value')
const accountModal = await driver.findElement(By.css('span .modal'))
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await driver.wait(until.stalenessOf(accountModal))
await delay(regularDelayMs)

View File

@ -145,7 +145,8 @@ describe('MetaMask', function () {
const newPublicAddress = await addressInput.getAttribute('value')
const accountModal = await driver.findElement(By.css('span .modal'))
await driver.executeScript("document.querySelector('.account-modal-close').click()")
const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
await accountModalClose.click()
await driver.wait(until.stalenessOf(accountModal))
await delay(regularDelayMs)

View File

@ -26,7 +26,7 @@ export default function AccountModalContainer (props, context) {
<span className="account-modal-back__text">{' ' + context.t('back')}</span>
</div>
)}
<div className="account-modal-close" onClick={hideModal} />
<button className="account-modal-close" onClick={hideModal} />
{children}
</div>
</div>

View File

@ -61,14 +61,17 @@
}
}
.account-modal-close::after {
content: '\00D7';
.account-modal-close {
font-size: 40px;
background-color: transparent;
color: $dusty-gray;
position: absolute;
top: 10px;
right: 12px;
cursor: pointer;
}
.account-modal-close::after {
content: '\00D7';
}
.account-modal-container .identicon {