From 99047e3ef4650ee982d6c7ed606cdaacd4965d64 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:26:54 -0230
Subject: [PATCH] Adds title, divider and descriptive text to network dropdown.

---
 .../components/dropdowns/network-dropdown.js  | 11 ++++++
 ui/app/css/itcss/components/network.scss      | 34 +++++++++++++++++++
 2 files changed, 45 insertions(+)

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;
+}
+