Refactor and redesign confirm transaction views

3 files changed, 96 insertions, 0 deletions

diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
new file mode 100644
index 000000000..631cf5803
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const ConfirmDetailRow = props => {
+  const {
+    label,
+    fiatFee,
+    ethFee,
+    onHeaderClick,
+    fiatFeeColor,
+    headerText,
+    headerTextClassName,
+  } = props
+
+  return (
+    <div className="confirm-detail-row">
+      <div className="confirm-detail-row__label">
+        { label }
+      </div>
+      <div className="confirm-detail-row__details">
+        <div
+          className={classnames('confirm-detail-row__header-text', headerTextClassName)}
+          onClick={() => onHeaderClick && onHeaderClick()}
+        >
+          { headerText }
+        </div>
+        <div
+          className="confirm-detail-row__fiat"
+          style={{ color: fiatFeeColor }}
+        >
+          { fiatFee }
+        </div>
+        <div className="confirm-detail-row__eth">
+          { `\u2666 ${ethFee}` }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ConfirmDetailRow.propTypes = {
+  label: PropTypes.string,
+  fiatFee: PropTypes.string,
+  ethFee: PropTypes.string,
+  fiatFeeColor: PropTypes.string,
+  onHeaderClick: PropTypes.func,
+  headerText: PropTypes.string,
+  headerTextClassName: PropTypes.string,
+}
+
+export default ConfirmDetailRow
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.js b/ui/app/components/confirm-page-container/confirm-detail-row/index.js
new file mode 100644
index 000000000..056afff04
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-detail-row/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-detail-row.component'
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss
new file mode 100644
index 000000000..84d0d56ed
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss
@@ -0,0 +1,43 @@
+.confirm-detail-row {
+  padding: 14px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  &__label {
+    font-size: .75rem;
+    font-weight: 500;
+    color: $scorpion;
+    text-transform: uppercase;
+  }
+
+  &__details {
+    flex: 1;
+    text-align: end;
+  }
+
+  &__fiat {
+    font-size: 1.5rem;
+  }
+
+  &__eth {
+    color: $oslo-gray;
+  }
+
+  &__header-text {
+    font-size: .75rem;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+    color: $scorpion;
+
+    &--edit {
+      color: $curious-blue;
+      cursor: pointer;
+    }
+
+    &--total {
+      font-size: .625rem;
+    }
+  }
+}