Update settings screen to new UI

2 files changed, 124 insertions, 30 deletions

diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
new file mode 100644
index 000000000..8cea78518
--- /dev/null
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -0,0 +1,91 @@
+const { Component, PropTypes } = require('react')
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+const R = require('ramda')
+
+class SimpleDropdown extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isOpen: false,
+    }
+  }
+
+  getDisplayValue () {
+    const { selectedOption, options } = this.props
+    const matchesOption = option => option.value === selectedOption
+    const matchingOption = R.find(matchesOption)(options)
+    return matchingOption
+      ? matchingOption.displayValue || matchingOption.value
+      : selectedOption
+  }
+
+  handleClose () {
+    this.setState({ isOpen: false })
+  }
+
+  toggleOpen () {
+    const { isOpen } = this.state
+    this.setState({ isOpen: !isOpen })
+  }
+
+  renderOptions () {
+    const { options, onSelect, selectedOption } = this.props
+
+    return h('div', [
+      h('div.simple-dropdown__close-area', {
+        onClick: event => {
+          event.stopPropagation()
+          this.handleClose()
+        },
+      }),
+      h('div.simple-dropdown__options', [
+        ...options.map(option => {
+          return h(
+            'div.simple-dropdown__option',
+            {
+              className: classnames({
+                'simple-dropdown__option--selected': option.value === selectedOption,
+              }),
+              key: option.value,
+              onClick: () => {
+                if (option.value !== selectedOption) {
+                  onSelect(option.value)
+                }
+
+                this.handleClose()
+              },
+            },
+            option.displayValue || option.value,
+          )
+        }),
+      ]),
+    ])
+  }
+
+  render () {
+    const { placeholder } = this.props
+    const { isOpen } = this.state
+
+    return h(
+      'div.simple-dropdown',
+      {
+        onClick: () => this.toggleOpen(),
+      },
+      [
+        h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'),
+        h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'),
+        isOpen && this.renderOptions(),
+      ]
+    )
+  }
+}
+
+SimpleDropdown.propTypes = {
+  options: PropTypes.array.isRequired,
+  placeholder: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedOption: PropTypes.string,
+}
+
+module.exports = SimpleDropdown
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