Refine confirmation screen

11 files changed, 15 insertions, 9 deletions

diff --git a/app/images/dexon-invert.svg b/app/images/dexon-invert.svg
new file mode 100644
index 00000000..6462afad
--- /dev/null
+++ b/app/images/dexon-invert.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-1 0 44 40">
+    <g fill="#FFFFFF" fill-rule="evenodd">
+        <path d="M21.095 0l-2.553 4.423-2.22-3.846-.223-.385-2.665 4.616-2.22-3.846-.111-.193-1.11 1.923L0 20l9.992 17.308 1.11 1.923.112-.193 2.22-3.846 2.665 4.616.222-.385 2.22-3.846L21.096 40l2.554-4.423 2.443 4.23.444-.769 2.22-3.846 2.22 3.846.112.193 1.11-1.923L42.191 20 32.198 2.692 31.088.77l-.111.193-2.22 3.846-2.22-3.846-.445-.77-2.443 4.23L21.095 0zm-2.22 5l2.22-3.846L23.315 5l-2.22 3.846L18.875 5zm5.218.192l2.22-3.846 2.221 3.846-2.22 3.846-2.22-3.846zm-10.437 0l2.22-3.846 2.222 3.846-2.221 3.846-2.22-3.846zm16.21 28.078L37.528 20 29.866 6.73l2.222-3.845L41.969 20l-9.881 17.115-2.222-3.845zM.222 20l9.881-17.115 2.221 3.845L4.663 20l7.661 13.27-2.22 3.845L.221 20zM21.54 9.615l2.22-3.846 2.22 3.846-2.22 3.847-2.22-3.847zm-5.33 0l2.22-3.846 2.22 3.846-2.22 3.847-2.22-3.847zm11.214 19.423L32.642 20l-5.218-9.038 2.22-3.847L37.084 20l-7.44 12.884-2.22-3.846zM5.107 20l7.44-12.885 2.22 3.847L9.548 20l5.219 9.038-2.22 3.846L5.106 20zm13.768-5.77l2.22-3.846 2.22 3.847-2.22 3.846-2.22-3.846zm5.995 10.385L27.535 20l-2.665-4.615 2.221-3.847L31.976 20l-4.885 8.462-2.22-3.847zM10.214 20l4.886-8.462 2.22 3.847L14.656 20l2.664 4.615-2.22 3.847L10.214 20zm11.992 0l2.22-3.846L26.646 20l-2.22 3.846L22.206 20zm-6.662 0l2.22-3.846L19.984 20l-2.22 3.846L15.544 20zm3.33 5.77l2.221-3.847 2.22 3.846-2.22 3.846-2.22-3.846zm2.666 4.614l2.22-3.846 2.22 3.846-2.22 3.847-2.22-3.847zm-5.33 0l2.22-3.846 2.22 3.846-2.22 3.847-2.22-3.847zm7.883 4.424l2.22-3.846 2.221 3.846-2.22 3.846-2.22-3.846zm-10.437 0l2.22-3.846 2.222 3.846-2.221 3.846-2.22-3.846zm5.219.192l2.22-3.846L23.315 35l-2.22 3.846L18.875 35zM107.008 11.36l-1.475-2.565-4.968 8.64-4.968-8.64-1.475 2.565L99.09 20l-4.968 8.64 1.475 2.565 4.968-8.64 4.968 8.64 1.475-2.565L102.04 20zM86.418 12.16L84.94 9.6H73.192v20.8H84.94l1.478-2.56H75.752v-6.752h8.216v-2.56h-8.216V12.16zM62.22 15.92v8.16a3.764 3.764 0 0 1-3.76 3.76H54.7V12.16h3.76a3.764 3.764 0 0 1 3.76 3.76M58.46 9.6h-6.32v20.8h6.32a6.327 6.327 0 0 0 6.32-6.32v-8.16a6.327 6.327 0 0 0-6.32-6.32M125.378 15.92v8.16a3.764 3.764 0 0 1-3.76 3.76 3.764 3.764 0 0 1-3.76-3.76v-8.16a3.764 3.764 0 0 1 3.76-3.76 3.764 3.764 0 0 1 3.76 3.76m-3.76-6.32a6.327 6.327 0 0 0-6.32 6.32v8.16a6.327 6.327 0 0 0 6.32 6.32 6.327 6.327 0 0 0 6.32-6.32v-8.16a6.327 6.327 0 0 0-6.32-6.32M146.43 9.6v14.352L138.144 9.6h-1.794v20.8h2.56V16.048l8.287 14.352h1.793V9.6z"/>
+    </g>
+</svg>
diff --git a/app/images/dexon_logo.svg b/app/images/dexon-logo.svg
index 8f5d6edb..8f5d6edb 100644
--- a/app/images/dexon_logo.svg
+++ b/app/images/dexon-logo.svg
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 c7262d2a..6389340a 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
@@ -43,7 +43,7 @@ const ConfirmDetailRow = props => {
                 type={PRIMARY}
                 value={value}
                 showEthLogo
-                ethLogoHeight="18"
+                ethLogoHeight="20"
                 style={{ color: primaryValueTextColor }}
                 hideLabel
               />
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
index 698e624f..2a60839a 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
@@ -21,7 +21,7 @@
   }
 
   &__data-box {
-    background-color: #f9fafa;
+    background-color: $black;
     padding: 12px;
     font-size: .75rem;
     margin-bottom: 16px;
@@ -58,7 +58,7 @@
     font-size: .875rem;
     font-weight: 500;
     text-transform: capitalize;
-    color: $black;
+    color: $white;
     padding-left: 5px;
   }
 }
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index fd28b3fc..334d1ebd 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -57,7 +57,7 @@ IdenticonComponent.prototype.render = function () {
   } else {
     return h('img.balance-icon', {
       className,
-      src: './images/dexon_logo.svg',
+      src: './images/dexon-logo.svg',
       style: {
         ...style,
       },
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
index dfd1cea8..05e03a58 100644
--- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -72,7 +72,7 @@ export default class ConfirmTokenTransactionBase extends Component {
       <div>
         <span>{ `${tokensText} + ` }</span>
         <img
-          src="/images/dexon_logo.svg"
+          src="/images/dexon-logo.svg"
           height="18"
         />
         <span>{ ethTransactionTotal }</span>
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index ada2b5b4..389804d3 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -340,7 +340,7 @@ export default class ConfirmTransactionBase extends Component {
         value={hexTransactionAmount}
         type={PRIMARY}
         showEthLogo
-        ethLogoHeight="26"
+        ethLogoHeight="30"
         hideLabel
       />
     )
diff --git a/ui/app/components/tabs/index.scss b/ui/app/components/tabs/index.scss
index a3b42f8e..866722b9 100644
--- a/ui/app/components/tabs/index.scss
+++ b/ui/app/components/tabs/index.scss
@@ -4,7 +4,7 @@
   &__list {
     display: flex;
     justify-content: flex-start;
-    background-color: #f9fafa;
+    background-color: $dark-gray;
     border-bottom: 1px solid $geyser;
     padding: 0 16px;
   }
diff --git a/ui/app/components/tabs/tab/index.scss b/ui/app/components/tabs/tab/index.scss
index 808e4a1f..1d286739 100644
--- a/ui/app/components/tabs/tab/index.scss
+++ b/ui/app/components/tabs/tab/index.scss
@@ -9,7 +9,7 @@
   text-align: center;
 
   &--active {
-    color: $black;
+    color: $white;
     border-bottom: 2px solid $dexon-purple;
   }
 }
diff --git a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js
index 06d9c146..40158a8d 100644
--- a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js
+++ b/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@@ -29,7 +29,7 @@ export default class UserPreferencedCurrencyDisplay extends PureComponent {
 
     return currency === DEX && showEthLogo && (
       <img
-        src="/images/dexon_logo.svg"
+        src="/images/dexon-invert.svg"
         height={ethLogoHeight}
       />
     )
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index b9dbf497..3464a810 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -63,6 +63,7 @@ $dexon-purple: #954A97;
 $dark-gray: #222222;
 $muddy-gray: #303030;
 $dim-gray: #9b9b9b;
+$curious-blue: #3099f2;
 
 /*
   Z-Indicies