Refine confirmation screen

9 files changed, 10 insertions, 9 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
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