diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index f1c6f8221..f79c8b29a 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -85,6 +85,17 @@ NetworkDropdown.prototype.render = function () { }, }, [ + h('div.network-dropdown-header', {}, [ + h('div.network-dropdown-title', {}, 'Networks'), + + h('div.network-dropdown-divider'), + + h('div.network-dropdown-content', + {}, + 'The default network for Ether transactions is Main Net.' + ), + ]), + h( DropdownMenuItem, { diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index adc8e4662..6661bf9b2 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -60,3 +60,37 @@ justify-content: center; align-items: center; } + +.network-dropdown-header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.network-dropdown-divider { + width: 100%; + height: 1px; + margin: 10px 0; + background-color: $scorpion; +} + +.network-dropdown-title { + height: 25px; + width: 75px; + color: $white; + font-family: 'DIN OT'; + font-size: 18px; + line-height: 25px; + text-align: center; +} + +.network-dropdown-content { + height: 36px; + width: 265px; + color: $dusty-gray; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 18px; +} +