From ea9d51e427b8e607e612a01629bebf153e516ad9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 22 Jun 2018 23:52:45 -0700
Subject: Refactor and redesign confirm transaction views

---
 .../confirm-detail-row.component.js                | 52 ++++++++++++++++++++++
 .../confirm-detail-row/index.js                    |  1 +
 .../confirm-detail-row/index.scss                  | 43 ++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js
 create mode 100644 ui/app/components/confirm-page-container/confirm-detail-row/index.js
 create mode 100644 ui/app/components/confirm-page-container/confirm-detail-row/index.scss

(limited to 'ui/app/components/confirm-page-container/confirm-detail-row')

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;
+    }
+  }
+}
-- 
cgit 


From d19c42fcaeea933793ed459ab5248b42811a0498 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 14 Jul 2018 13:47:07 -0700
Subject: Add fallback when no function found, fix network colors, add fiat
 values for tokens with contract exchange rates

---
 .../confirm-detail-row/confirm-detail-row.component.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'ui/app/components/confirm-page-container/confirm-detail-row')

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
index 631cf5803..f0703dde2 100644
--- 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
@@ -5,10 +5,10 @@ import classnames from 'classnames'
 const ConfirmDetailRow = props => {
   const {
     label,
-    fiatFee,
-    ethFee,
+    fiatText,
+    ethText,
     onHeaderClick,
-    fiatFeeColor,
+    fiatTextColor,
     headerText,
     headerTextClassName,
   } = props
@@ -27,12 +27,12 @@ const ConfirmDetailRow = props => {
         </div>
         <div
           className="confirm-detail-row__fiat"
-          style={{ color: fiatFeeColor }}
+          style={{ color: fiatTextColor }}
         >
-          { fiatFee }
+          { fiatText }
         </div>
         <div className="confirm-detail-row__eth">
-          { `\u2666 ${ethFee}` }
+          { ethText }
         </div>
       </div>
     </div>
@@ -41,9 +41,9 @@ const ConfirmDetailRow = props => {
 
 ConfirmDetailRow.propTypes = {
   label: PropTypes.string,
-  fiatFee: PropTypes.string,
-  ethFee: PropTypes.string,
-  fiatFeeColor: PropTypes.string,
+  fiatText: PropTypes.string,
+  ethText: PropTypes.string,
+  fiatTextColor: PropTypes.string,
   onHeaderClick: PropTypes.func,
   headerText: PropTypes.string,
   headerTextClassName: PropTypes.string,
-- 
cgit