Update settings screen to new UI

1 files changed, 33 insertions, 30 deletions

diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index bef444a48..fe4076ed0 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -1,37 +1,40 @@
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
+const classnames = require('classnames')
 
-module.exports = TabBar
+class TabBar extends Component {
+  constructor (props) {
+    super(props)
+    const { defaultTab, tabs } = props
 
-inherits(TabBar, Component)
-function TabBar () {
-  Component.call(this)
-}
+    this.state = {
+      subview: defaultTab || tabs[0].key,
+    }
+  }
 
-TabBar.prototype.render = function () {
-  const props = this.props
-  const state = this.state || {}
-  const { tabs = [], defaultTab, tabSelected } = props
-  const { subview = defaultTab } = state
+  render () {
+    const { tabs = [], tabSelected } = this.props
+    const { subview } = this.state
 
-  return (
-    h('.flex-row.space-around.text-transform-uppercase', {
-      style: {
-        background: '#EBEBEB',
-        color: '#AEAEAE',
-        paddingTop: '4px',
-        minHeight: '30px',
-      },
-    }, tabs.map((tab) => {
-      const { key, content } = tab
-      return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', {
-        onClick: () => {
-          this.setState({ subview: key })
-          tabSelected(key)
-        },
-      }, content)
-    }))
-  )
+    return (
+      h('.tab-bar', {}, [
+        tabs.map((tab) => {
+          const { key, content } = tab
+          return h('div', {
+            className: classnames('tab-bar__tab pointer', {
+              'tab-bar__tab--active': subview === key,
+            }),
+            onClick: () => {
+              this.setState({ subview: key })
+              tabSelected(key)
+            },
+            key,
+          }, content)
+        }),
+        h('div.tab-bar__tab.tab-bar__grow-tab'),
+      ])
+    )
+  }
 }
 
+module.exports = TabBar