Update connected status popover content (#8834)

* update connected status popover content

* update highlight styling

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."

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={(
-          <Button
-            type="primary"
-            onClick={setConnectedStatusPopoverHasBeenShown}
-          >
-            { t('dismiss') }
-          </Button>
+          <>
+            <a
+              href={LEARN_MORE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              { t('learnMore') }
+            </a>
+            <Button
+              type="primary"
+              onClick={setConnectedStatusPopoverHasBeenShown}
+            >
+              { t('dismiss') }
+            </Button>
+          </>
         )}
       >
         <main className="home__connect-status-text">
           <div>{ t('metaMaskConnectStatusParagraphOne') }</div>
           <div>{ t('metaMaskConnectStatusParagraphTwo') }</div>
+          <div>{ t('metaMaskConnectStatusParagraphThree') }</div>
         </main>
       </Popover>
     )

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;