From 2c032e0df44a2d589aae62d3fc532df82441580b Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sun, 22 Oct 2017 22:40:03 -0700
Subject: Update settings screen to new UI

---
 ui/app/components/tab-bar.js | 63 +++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 30 deletions(-)

(limited to 'ui/app/components/tab-bar.js')

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
-- 
cgit 


From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 00:00:33 -0230
Subject: Lint fixes for NewUI-flat.

---
 ui/app/components/tab-bar.js | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'ui/app/components/tab-bar.js')

diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index fe4076ed0..0edced119 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -1,5 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
+const PropTypes = require('react').PropTypes
 const classnames = require('classnames')
 
 class TabBar extends Component {
@@ -37,4 +38,10 @@ class TabBar extends Component {
   }
 }
 
+TabBar.propTypes = {
+  defaultTab: PropTypes.string,
+  tabs: PropTypes.array,
+  tabSelected: PropTypes.func,
+}
+
 module.exports = TabBar
-- 
cgit