Refactor and redesign confirm transaction views

3 files changed, 48 insertions, 0 deletions

diff --git a/ui/app/components/tabs/tab/index.js b/ui/app/components/tabs/tab/index.js
new file mode 100644
index 000000000..fbc309e8e
--- /dev/null
+++ b/ui/app/components/tabs/tab/index.js
@@ -0,0 +1,2 @@
+import Tab from './tab.component'
+module.exports = Tab
diff --git a/ui/app/components/tabs/tab/index.scss b/ui/app/components/tabs/tab/index.scss
new file mode 100644
index 000000000..1de6ffa0e
--- /dev/null
+++ b/ui/app/components/tabs/tab/index.scss
@@ -0,0 +1,15 @@
+.tab {
+  color: #8C8E94;
+  font-size: .75rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 8px 0;
+  margin: 0 8px;
+  min-width: 50px;
+  text-align: center;
+
+  &--active {
+    color: $black;
+    border-bottom: 2px solid $curious-blue;
+  }
+}
diff --git a/ui/app/components/tabs/tab/tab.component.js b/ui/app/components/tabs/tab/tab.component.js
new file mode 100644
index 000000000..a59da8904
--- /dev/null
+++ b/ui/app/components/tabs/tab/tab.component.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const Tab = props => {
+  const { name, onClick, isActive, tabIndex } = props
+
+  return (
+    <li
+      className={classnames(
+        'tab',
+        isActive && 'tab--active',
+      )}
+      onClick={event => {
+        event.preventDefault()
+        onClick(tabIndex)
+      }}
+    >
+      { name }
+    </li>
+  )
+}
+
+Tab.propTypes = {
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  isActive: PropTypes.bool,
+  tabIndex: PropTypes.number,
+}
+
+export default Tab