From ec99cc82b8a46864e59de236061e252c8897b5f7 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Wed, 20 May 2020 15:42:18 -0500 Subject: [PATCH] Design QA fixes for v8 (#8630) --- app/_locales/en/messages.json | 17 ++++++---- app/images/icons/connected-sites-white.svg | 3 ++ app/images/icons/disconnect.svg | 3 ++ test/e2e/permissions.spec.js | 4 +-- .../unconnected-account-alert.js | 8 ++++- ...ted-accounts-list-permissions.component.js | 34 +++++++++---------- .../connected-accounts-list.component.js | 2 +- .../app/connected-accounts-list/index.scss | 14 ++++++++ .../connected-status-indicator.component.js | 4 ++- .../app/connected-status-indicator/index.scss | 23 ++++++++++--- .../account-details-dropdown.component.js | 2 +- .../components/app/token-cell/token-cell.scss | 1 - ui/app/components/ui/menu/menu.scss | 12 +++++++ .../connected-accounts.component.js | 5 --- 14 files changed, 91 insertions(+), 41 deletions(-) create mode 100644 app/images/icons/connected-sites-white.svg create mode 100644 app/images/icons/disconnect.svg diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 19314d0be..7ddaba250 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1,6 +1,6 @@ { "connectedSites": { - "message": "Connected Sites" + "message": "Connected sites" }, "connectedSitesDescription": { "message": "$1 is connected to these sites. They can view your account address.", @@ -32,9 +32,6 @@ "disconnectThisAccount": { "message": "Disconnect this account" }, - "viewConnectedSites": { - "message": "View connected sites" - }, "permissions": { "message": "Permissions" }, @@ -132,7 +129,7 @@ "message": "Account" }, "accountDetails": { - "message": "Account Details" + "message": "Account details" }, "accountName": { "message": "Account Name" @@ -632,7 +629,7 @@ "message": "Estimated Processing Times" }, "expandView": { - "message": "Expand View" + "message": "Expand view" }, "exportPrivateKey": { "message": "Export Private Key" @@ -1594,7 +1591,7 @@ "message": "Unapproved" }, "unconnectedAccountAlertDescription": { - "message": "This account is not connected to this site." + "message": "$1 is not connected to $2." }, "unconnectedAccountAlertDisableTooltip": { "message": "This can be changed in \"Settings > Alerts\"" @@ -1734,5 +1731,11 @@ "encryptionPublicKeyNotice": { "message": "$1 would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.", "description": "$1 is website or dapp name" + }, + "thisSite": { + "message": "this site" + }, + "thisAccount": { + "message": "This account" } } diff --git a/app/images/icons/connected-sites-white.svg b/app/images/icons/connected-sites-white.svg new file mode 100644 index 000000000..8a4421938 --- /dev/null +++ b/app/images/icons/connected-sites-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/disconnect.svg b/app/images/icons/disconnect.svg new file mode 100644 index 000000000..c51387353 --- /dev/null +++ b/app/images/icons/disconnect.svg @@ -0,0 +1,3 @@ + + + diff --git a/test/e2e/permissions.spec.js b/test/e2e/permissions.spec.js index b94e2014d..cfdcd22ee 100644 --- a/test/e2e/permissions.spec.js +++ b/test/e2e/permissions.spec.js @@ -132,9 +132,9 @@ describe('MetaMask', function () { }) it('shows connected sites', async function () { - await driver.clickElement(By.xpath(`//button[contains(text(), 'Connected Sites')]`)) + await driver.clickElement(By.xpath(`//button[contains(text(), 'Connected sites')]`)) - await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected Sites')]`)) + await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected sites')]`)) const domains = await driver.findClickableElements(By.css('.connected-sites-list__domain-name')) assert.equal(domains.length, 1) diff --git a/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js b/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js index 653a69b18..81ad93c02 100644 --- a/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js +++ b/ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js @@ -13,6 +13,7 @@ import Popover from '../../../ui/popover' import Button from '../../../ui/button' import Checkbox from '../../../ui/check-box' import Tooltip from '../../../ui/tooltip-v2' +import { getSelectedIdentity, getOriginOfCurrentTab } from '../../../../selectors' const { ERROR, @@ -23,6 +24,8 @@ const SwitchToUnconnectedAccountAlert = () => { const t = useContext(I18nContext) const dispatch = useDispatch() const alertState = useSelector(getAlertState) + const origin = useSelector(getOriginOfCurrentTab) + const selectedIdentity = useSelector(getSelectedIdentity) const [dontShowThisAgain, setDontShowThisAgain] = useState(false) const onClose = async () => { @@ -31,11 +34,14 @@ const SwitchToUnconnectedAccountAlert = () => { : dispatch(dismissAlert()) } + const accountName = selectedIdentity?.name || t('thisAccount') + const siteName = origin || t('thisSite') + return ( diff --git a/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js b/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js index 92215a1d7..40e8763e4 100644 --- a/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js +++ b/ui/app/components/app/connected-accounts-list/connected-accounts-list-permissions/connected-accounts-list-permissions.component.js @@ -39,7 +39,7 @@ export default class ConnectedAccountsListPermissions extends PureComponent { return (
-

+

{t('permissions')}

) } diff --git a/ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js b/ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js index 99cae3168..6f3b5f7e4 100644 --- a/ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js +++ b/ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js @@ -121,7 +121,7 @@ export default class ConnectedAccountsList extends PureComponent { ) } {t('disconnectThisAccount')} diff --git a/ui/app/components/app/connected-accounts-list/index.scss b/ui/app/components/app/connected-accounts-list/index.scss index 0333e13a3..0e610b1c6 100644 --- a/ui/app/components/app/connected-accounts-list/index.scss +++ b/ui/app/components/app/connected-accounts-list/index.scss @@ -92,6 +92,7 @@ flex-direction: row; justify-content: space-between; align-items: center; + cursor: pointer; font-size: 14px; line-height: 20px; @@ -115,6 +116,19 @@ i { padding-right: 8px; font-size: 18px; + color: $Grey-800; + } + } + + &__list-container { + max-height: 0px; + overflow: hidden; + height: auto; + transition: max-height 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); + + &--expanded { + // arbitrarily set hard coded value for effect to work + max-height: 100px; } } } diff --git a/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js b/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js index 88dad4968..5954565b5 100644 --- a/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js +++ b/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js @@ -32,7 +32,9 @@ export default class ConnectedStatusIndicator extends Component { 'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT, 'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED, })} - /> + > + + ) } diff --git a/ui/app/components/app/connected-status-indicator/index.scss b/ui/app/components/app/connected-status-indicator/index.scss index d7e60430c..cc7f1d397 100644 --- a/ui/app/components/app/connected-status-indicator/index.scss +++ b/ui/app/components/app/connected-status-indicator/index.scss @@ -16,22 +16,37 @@ background-color: #EDEDED; } + &__inner-circle { + border-radius: 4px; + height: 4px; + width: 4px; + background-color: transparent; + } + &__green-circle, &__yellow-circle, &__grey-circle { border-radius: 4px; height: 8px; width: 8px; + border: 1px solid transparent; + display: flex; + align-items: center; + justify-content: center; } &__green-circle { - background: #4CD964; + border-color: #4CD964; + } + + &__green-circle &__inner-circle { + background-color: #4CD964; } &__yellow-circle { - background: #FFD33D; + border-color: #FFD33D; } &__grey-circle { - background: $Grey-100; + border-color: $Grey-500; } &__text { @@ -40,4 +55,4 @@ margin-left: 6px; white-space: nowrap; } -} \ No newline at end of file +} diff --git a/ui/app/components/app/dropdowns/account-details-dropdown/account-details-dropdown.component.js b/ui/app/components/app/dropdowns/account-details-dropdown/account-details-dropdown.component.js index 5970d66b7..d4ea34165 100644 --- a/ui/app/components/app/dropdowns/account-details-dropdown/account-details-dropdown.component.js +++ b/ui/app/components/app/dropdowns/account-details-dropdown/account-details-dropdown.component.js @@ -127,7 +127,7 @@ export default class AccountDetailsDropdown extends Component { }} text={this.context.t('connectedSites')} icon={( - + )} /> { diff --git a/ui/app/components/app/token-cell/token-cell.scss b/ui/app/components/app/token-cell/token-cell.scss index 0498353fd..fd8ad42cb 100644 --- a/ui/app/components/app/token-cell/token-cell.scss +++ b/ui/app/components/app/token-cell/token-cell.scss @@ -16,7 +16,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__token-balance, &__token-symbol { font-size: 16px; flex: 0 0 auto; - height: 16px; color: $Black-100; } diff --git a/ui/app/components/ui/menu/menu.scss b/ui/app/components/ui/menu/menu.scss index de6dc6108..d552c66b4 100644 --- a/ui/app/components/ui/menu/menu.scss +++ b/ui/app/components/ui/menu/menu.scss @@ -43,4 +43,16 @@ &__icon { margin-right: 8px; } + + .disconnect-icon { + &:before { + content: ""; + background-image: url(/images/icons/disconnect.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + padding: 8px; + display: flex; + } + } } diff --git a/ui/app/pages/connected-accounts/connected-accounts.component.js b/ui/app/pages/connected-accounts/connected-accounts.component.js index 1e5ae6e65..6b1aec158 100644 --- a/ui/app/pages/connected-accounts/connected-accounts.component.js +++ b/ui/app/pages/connected-accounts/connected-accounts.component.js @@ -54,11 +54,6 @@ export default class ConnectedAccounts extends PureComponent { subtitle={connectedAccounts.length ? connectedAccountsDescription : t('connectedAccountsEmptyDescription')} onClose={() => history.push(DEFAULT_ROUTE)} footerClassName="connected-accounts__footer" - footer={ - connectedAccounts.length - ? null - : {t('viewConnectedSites')} - } >