Settings Tab (#42)

* Settings tab

packages/frontend/src/components/Chain/Chain.css

@@ -0,0 +1,117 @@
+.Chain-header {
+  width: 100%;
+  height: 108px;
+  overflow: hidden;
+  background: #fff;
+  color: #000;
+  min-width: 1350px;
+  position: relative;
+}
+
+
+.Chain-tabs {
+  position: absolute;
+  right: 10px;
+  bottom: 0;
+  height: 40px;
+  width: 200px;
+  text-align: right;
+}
+
+.Chain-tab-unit {
+  display: inline-block;
+}
+
+.Chain-tab-unit .Icon {
+  margin-right: 10px;
+  font-size: 26px;
+  padding: 6px;
+  background: #222;
+  color: #aaa;
+  cursor: pointer;
+  border-top: 2px solid #5e5e5e;
+  border-radius: 4px 4px 0 0;
+}
+
+.Chain-tab-unit-on .Icon {
+  color: #fff;
+}
+
+.Chain-content-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 148px;
+}
+
+.Chain-content {
+  width: 100%;
+  min-width: 1350px;
+  min-height: 100%;
+  background: #222;
+  color: #fff;
+  box-shadow: rgba(0,0,0,0.5) 0 3px 30px;
+}
+
+.Chain-map {
+  min-width: 1350px;
+  background: url('../../assets/world-map.svg') no-repeat;
+  background-size: contain;
+  background-position: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.Chain-node-list {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.Chain-node-list thead {
+  background: #3c3c3b;
+}
+
+.Chain-node-list tbody {
+  font-family: monospace, sans-serif;
+}
+
+.Chain-node-list th, .Chain-node-list td {
+  text-align: left;
+  padding: 0.5em 1em;
+}
+
+.Chain-settings {
+  text-align: center;
+}
+
+.Chain-settings-category {
+  text-align: left;
+  width: 500px;
+  margin: 0 auto;
+  padding: 2em 0;
+}
+
+.Chain-settings-category h2 {
+  padding: 0;
+  margin: 0 0 0.5em 0;
+  font-size: 20px;
+  font-weight: 100;
+}
+
+.Chain-settings-category p {
+  padding: 0;
+  margin: 0 0 0.1em 0;
+  cursor: pointer;
+}
+
+.Chain-settings-category .Icon {
+  margin-right: 10px;
+}
+
+.Chain-settings-disabled {
+  color: #666;
+}