From 49684eebdce31dda0e2a37827d22841c2eb40e52 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 16 Nov 2021 13:32:40 -0700
Subject: [PATCH] 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                   | 17 +++++++----------
 ui/components/app/dropdowns/network-dropdown.js | 14 ++++++--------
 ui/css/itcss/components/network.scss            |  9 +++++----
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 1c1e21eeb..59f67b50d 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -593,10 +593,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"
   },
@@ -621,9 +617,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"
   },
@@ -775,9 +768,6 @@
   "editPermission": {
     "message": "Edit Permission"
   },
-  "enable": {
-    "message": "enable"
-  },
   "enableFromSettings": {
     "message": " Enable it from Settings."
   },
@@ -2201,6 +2191,9 @@
   "showHexDataDescription": {
     "message": "Select this to show the hex data field on the send screen"
   },
+  "showHide": {
+    "message": "Show/hide"
+  },
   "showIncomingTransactions": {
     "message": "Show Incoming Transactions"
   },
@@ -2759,6 +2752,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"
   },
diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js
index 13b58e0d8..b20cce6f3 100644
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/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>
diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss
index 8772f1c38..79d4e3800 100644
--- a/ui/css/itcss/components/network.scss
+++ b/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;
   }
 }