diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 60c283a29..76e3fafaa 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -909,10 +909,13 @@ "message": "Message" }, "metaMaskConnectStatusParagraphOne": { - "message": "This is the new MetaMask Connect status indicator. From here you can easily see and manage sites you’ve connected to with your MetaMask wallet." + "message": "You now have more control over your account connections in MetaMask." }, "metaMaskConnectStatusParagraphTwo": { - "message": "Click the Connect status to see your connected sites and their permissions." + "message": "The connection status button shows if the website you’re visiting is connected to your currently selected account." + }, + "metaMaskConnectStatusParagraphThree": { + "message": "Click it to manage your connected accounts." }, "metamaskDescription": { "message": "Connecting you to Ethereum and the Decentralized Web." diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js index 4f470ebab..8f942de03 100644 --- a/ui/app/pages/home/home.component.js +++ b/ui/app/pages/home/home.component.js @@ -25,6 +25,8 @@ import { CONNECTED_ACCOUNTS_ROUTE, } from '../../helpers/constants/routes' +const LEARN_MORE_URL = 'https://metamask.zendesk.com/hc/en-us/articles/360045129011-Intro-to-MetaMask-v8-extension' + export default class Home extends PureComponent { static contextTypes = { t: PropTypes.func, @@ -187,17 +189,27 @@ export default class Home extends PureComponent { ) }} footer={( - + <> + + { t('learnMore') } + + + )} >
{ t('metaMaskConnectStatusParagraphOne') }
{ t('metaMaskConnectStatusParagraphTwo') }
+
{ t('metaMaskConnectStatusParagraphThree') }
) diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss index 2aad50ab4..bb2ece13b 100644 --- a/ui/app/pages/home/index.scss +++ b/ui/app/pages/home/index.scss @@ -47,19 +47,24 @@ padding-right: 24px; div { + margin-bottom: 20px; + &:last-child { - margin-top: 26px; + margin-bottom: 0px; } } } &__connected-status-popover { width: 329px; - height: 295px; - margin-top: -12px; + margin-top: -15px; .popover-header { - padding-bottom: 4px; + padding-bottom: 20px; + + &__title { + padding-bottom: 0; + } } .popover-content { @@ -72,7 +77,11 @@ } .popover-footer { - justify-content: flex-end; + border-top: 0; + justify-content: space-between; + align-items: center; + padding-top: 20px; + font-size: 14px; & :only-child { margin: 0; @@ -84,16 +93,20 @@ border-radius: 39px; padding: 0; } + + a, a:hover { + color: $dodger-blue; + cursor: pointer; + } } } &__connected-status-popover-bg { - height: 34px; - width: 110px; + height: 55px; + width: 120px; border-radius: 34px; position: absolute; - top: 82px; - left: 8px; + top: 73px; opacity: 1; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2); background: none;