Updates to network dropdown test network messaging (#12722)

* Updates to network dropdown test network messaging

* Updating text from Disable/enable -> Show/hide

app/_locales/en/messages.json

@@ -617,10 +617,6 @@
   "decryptRequest": {
     "message": "Decrypt request"
   },
-  "defaultNetwork": {
-    "message": "The default network for Ether transactions is Mainnet. You can also $1 test networks $2.",
-    "description": "$1 is the 'enable' or 'disable' key, depending on whether the display of test networks is enabled or not. $2 is a clickable link with text defined by the 'here' key. The link will open to the advanced settings where users can enable the display of test networks in the network dropdown."
-  },
   "delete": {
     "message": "Delete"
   },
@@ -645,9 +641,6 @@
   "directDepositEtherExplainer": {
     "message": "If you already have some Ether, the quickest way to get Ether in your new wallet by direct deposit."
   },
-  "disable": {
-    "message": "disable"
-  },
   "disconnect": {
     "message": "Disconnect"
   },
@@ -799,9 +792,6 @@
   "editPermission": {
     "message": "Edit Permission"
   },
-  "enable": {
-    "message": "enable"
-  },
   "enableFromSettings": {
     "message": " Enable it from Settings."
   },
@@ -2252,6 +2242,9 @@
   "showHexDataDescription": {
     "message": "Select this to show the hex data field on the send screen"
   },
+  "showHide": {
+    "message": "Show/hide"
+  },
   "showIncomingTransactions": {
     "message": "Show Incoming Transactions"
   },
@@ -2810,6 +2803,10 @@
     "message": "To: $1",
     "description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
   },
+  "toggleTestNetworks": {
+    "message": "$1 test networks",
+    "description": "$1 is a clickable link with text defined by the 'showHide' key. The link will open to the advanced settings where users can enable the display of test networks in the network dropdown."
+  },
   "token": {
     "message": "Token"
   },

ui/components/app/dropdowns/network-dropdown.js

@@ -313,10 +313,7 @@ class NetworkDropdown extends Component {
           <div className="network-dropdown-divider" />
           {showTestnetMessageInDropdown ? (
             <div className="network-dropdown-content">
-              {t('defaultNetwork', [
-                <span key="testNetworksEnabled">
-                  {shouldShowTestNetworks ? t('disable') : t('enable')}
-                </span>,
+              {t('toggleTestNetworks', [
                 <a
                   href="#"
                   key="advancedSettingsLink"
@@ -327,14 +324,15 @@ class NetworkDropdown extends Component {
                     history.push(`${ADVANCED_ROUTE}#show-testnets`);
                   }}
                 >
-                  {t('here')}
+                  {t('showHide')}
                 </a>,
               ])}
               <button
-                title={t('dismiss')}
                 onClick={hideTestNetMessage}
-                className="fas fa-times network-dropdown-content--close"
-              />
+                className="network-dropdown-content--dismiss"
+              >
+                {t('dismiss')}
+              </button>
             </div>
           ) : null}
         </div>

ui/css/itcss/components/network.scss

@@ -166,7 +166,6 @@
   &--link {
     color: $white;
     cursor: pointer;
-    font-weight: bold;
     text-decoration: underline;
 
     &:hover {
@@ -174,12 +173,14 @@
     }
   }
 
-  &--close {
-    color: $white;
+  &--dismiss {
+    color: inherit;
     background: inherit;
     position: absolute;
-    top: 64px;
+    top: 63px;
     right: 10px;
+    border: 1px solid $dusty-gray;
+    border-radius: 10px;
   }
 }