Replace logo and main theme

14 files changed, 250 insertions, 226 deletions

diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
index b7c01154..b799ba9f 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@@ -120,14 +120,14 @@ export default class AppHeader extends PureComponent {
           >
             <img
               className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
+              src="/images/dekusan.svg"
+              height={40}
             />
             <img
               className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/cobinhood.svg"
-              height={42}
-              width={42}
+              src="/images/dekusan.svg"
+              height={36}
+              width={36}
             />
           </div>
           <div className="app-header__account-menu-container">
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 2d7413b5..fc37fd66 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { GWEI } from '../../constants/common'
+import { ETH, DEX, GWEI } from '../../constants/common'
 
 export default class CurrencyDisplay extends PureComponent {
   static propTypes = {
@@ -12,7 +12,7 @@ export default class CurrencyDisplay extends PureComponent {
     style: PropTypes.object,
     suffix: PropTypes.string,
     // Used in container
-    currency: PropTypes.string,
+    currency: PropTypes.oneOf([ETH, DEX]),
     denomination: PropTypes.oneOf([GWEI]),
     value: PropTypes.string,
     numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index d4cc695a..28e3a5cf 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -126,7 +126,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#29B6AF', // $java
+          backgroundColor: '#954A97', // $dexon-purple
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -140,66 +140,22 @@ NetworkDropdown.prototype.render = function () {
     h(
       DropdownMenuItem,
       {
-        key: 'ropsten',
+        key: 'testnet',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setProviderType('ropsten'),
+        onClick: () => props.setProviderType('testnet'),
         style: dropdownMenuItemStyle,
       },
       [
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#ff4a8d', // $wild-strawberry
-          isSelected: providerType === 'ropsten',
+          backgroundColor: '#aeaeae', // $silver-chalice
+          isSelected: providerType === 'testnet',
         }),
         h('span.network-name-item', {
           style: {
-            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
+            color: providerType === 'testnet' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.context.t('ropsten')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'kovan',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setProviderType('kovan'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#7057ff', // $cornflower-blue
-          isSelected: providerType === 'kovan',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('kovan')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'rinkeby',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setProviderType('rinkeby'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#f6c343', // $saffron
-          isSelected: providerType === 'rinkeby',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('rinkeby')),
+        }, this.context.t('testnet')),
       ]
     ),
 
@@ -261,12 +217,8 @@ NetworkDropdown.prototype.getNetworkName = function () {
 
   if (providerName === 'mainnet') {
     name = this.context.t('mainnet')
-  } else if (providerName === 'ropsten') {
-    name = this.context.t('ropsten')
-  } else if (providerName === 'kovan') {
-    name = this.context.t('kovan')
-  } else if (providerName === 'rinkeby') {
-    name = this.context.t('rinkeby')
+  } else if (providerName === 'testnet') {
+    name = this.context.t('testnet')
   } else {
     name = provider.nickname || this.context.t('unknownNetwork')
   }
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
new file mode 100644
index 00000000..48de233a
--- /dev/null
+++ b/ui/app/components/identicon.js
@@ -0,0 +1,124 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const isNode = require('detect-node')
+const findDOMNode = require('react-dom').findDOMNode
+const jazzicon = require('jazzicon')
+const iconFactoryGen = require('../../lib/icon-factory')
+const iconFactory = iconFactoryGen(jazzicon)
+const { toDataUrl } = require('../../lib/blockies')
+
+module.exports = connect(mapStateToProps)(IdenticonComponent)
+
+inherits(IdenticonComponent, Component)
+function IdenticonComponent () {
+  Component.call(this)
+
+  this.defaultDiameter = 46
+}
+
+function mapStateToProps (state) {
+  return {
+    useBlockie: state.metamask.useBlockie,
+  }
+}
+
+IdenticonComponent.prototype.render = function () {
+  var props = this.props
+  const { className = '', address, image } = props
+  var diameter = props.diameter || this.defaultDiameter
+  const style = {
+    height: diameter,
+    width: diameter,
+    borderRadius: diameter / 2,
+  }
+  if (image) {
+    return h('img', {
+      className: `${className} identicon`,
+      src: image,
+      style: {
+        ...style,
+      },
+    })
+  } else if (address) {
+    return h('div', {
+      className: `${className} identicon`,
+      key: 'identicon-' + address,
+      style: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style,
+        overflow: 'hidden',
+      },
+    })
+  } else {
+    return h('img.balance-icon', {
+      className,
+      src: './images/dexon_logo.svg',
+      style: {
+        ...style,
+      },
+    })
+  }
+}
+
+IdenticonComponent.prototype.componentDidMount = function () {
+  var props = this.props
+  const { address, useBlockie } = props
+
+  if (!address) return
+
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
+  }
+}
+
+IdenticonComponent.prototype.componentDidUpdate = function () {
+  var props = this.props
+  const { address, useBlockie } = props
+
+  if (!address) return
+
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    var children = container.children
+    for (var i = 0; i < children.length; i++) {
+      container.removeChild(children[i])
+    }
+
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
+  }
+}
+
+function _generateBlockie (container, address, diameter) {
+  const img = new Image()
+  img.src = toDataUrl(address)
+  img.height = diameter
+  img.width = diameter
+  container.appendChild(img)
+}
+
+function _generateJazzicon (container, address, diameter) {
+  const img = iconFactory.iconForAddress(address, diameter)
+  container.appendChild(img)
+}
diff --git a/ui/app/components/menu-bar/index.scss b/ui/app/components/menu-bar/index.scss
index f699f409..13cbbe69 100644
--- a/ui/app/components/menu-bar/index.scss
+++ b/ui/app/components/menu-bar/index.scss
@@ -6,7 +6,7 @@
   flex: 0 0 auto;
   margin-bottom: 16px;
   padding: 5px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid $geyser;
 
   &__sidebar-button {
     font-size: 1.25rem;
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
index 9d9a127d..873eb9ff 100644
--- a/ui/app/components/modal/index.scss
+++ b/ui/app/components/modal/index.scss
@@ -1,23 +1,28 @@
-@import './modal-content/index';
+@import "./modal-content/index";
+
 .modal-container {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: $dark-gray;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
+
   @media screen and (max-width: 575px) {
     max-height: 450px;
   }
+
   &__content {
     overflow-y: auto;
     flex: 1;
     padding: 16px 32px;
+
     @media screen and (max-width: 575px) {
       justify-content: center;
       padding: 28px 20px;
     }
   }
+
   &__header {
     position: relative;
     display: flex;
@@ -26,6 +31,7 @@
     border-bottom: 1px solid $geyser;
     flex: 0 0 auto;
   }
+
   &__header-close::after {
     content: '\00D7';
     font-size: 40px;
@@ -35,6 +41,7 @@
     right: 10px;
     cursor: pointer;
   }
+
   &__footer {
     display: flex;
     flex-flow: row;
@@ -42,12 +49,14 @@
     border-top: 1px solid $geyser;
     padding: 16px;
     flex: 0 0 auto;
+
     &-button {
       min-width: 0;
       margin-right: 16px;
+
       &:last-of-type {
         margin-right: 0;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 09137d39..99e79a42 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -133,7 +133,7 @@ DepositEtherModal.prototype.render = function () {
 
     h('div.page-container__header', [
 
-      h('div.page-container__title', [this.context.t('depositEther')]),
+      h('div.page-container__title', [this.context.t('depositDex')]),
 
       h('div.page-container__subtitle', [
         this.context.t('needEtherInWallet'),
@@ -172,41 +172,6 @@ DepositEtherModal.prototype.render = function () {
           onButtonClick: () => toFaucet(network),
           hide: !isTestNetwork || buyingWithShapeshift,
         }),
-
-        this.renderRow({
-          logo: h('div.deposit-ether-modal__logo', {
-            style: {
-              backgroundImage: 'url(\'./images/coinbase logo.png\')',
-              height: '40px',
-            },
-          }),
-          title: COINBASE_ROW_TITLE,
-          text: COINBASE_ROW_TEXT,
-          buttonLabel: this.context.t('continueToCoinbase'),
-          onButtonClick: () => toCoinbase(address),
-          hide: isTestNetwork || buyingWithShapeshift,
-        }),
-
-        this.renderRow({
-          logo: h('div.deposit-ether-modal__logo', {
-            style: {
-              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
-            },
-          }),
-          title: SHAPESHIFT_ROW_TITLE,
-          text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: this.context.t('shapeshiftBuy'),
-          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-          hide: isTestNetwork,
-          hideButton: buyingWithShapeshift,
-          hideTitle: buyingWithShapeshift,
-          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-          showBackButton: this.state.buyingWithShapeshift,
-          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-        }),
-
-        buyingWithShapeshift && h(ShapeshiftForm),
-
       ]),
 
     ]),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 071bc706..8227fec3 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -34,7 +34,7 @@ const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
   border: '1px solid #CCCFD1',
   borderRadius: '8px',
-  backgroundColor: '#FFFFFF',
+  backgroundColor: '#222222',
   boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
 }
 
diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss
index 6fa81d51..c882d940 100644
--- a/ui/app/components/modals/qr-scanner/index.scss
+++ b/ui/app/components/modals/qr-scanner/index.scss
@@ -1,7 +1,7 @@
 .qr-scanner {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: $dark-gray;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
@@ -80,4 +80,3 @@
     font-weight: 300;
   }
 }
-
diff --git a/ui/app/components/network-display/index.scss b/ui/app/components/network-display/index.scss
index e9f2f205..970fde30 100644
--- a/ui/app/components/network-display/index.scss
+++ b/ui/app/components/network-display/index.scss
@@ -12,19 +12,11 @@
     }
 
     &--mainnet {
-      background-color: lighten($blue-lagoon, 68%);
+      background-color: lighten($dexon-purple, 68%);
     }
 
-    &--ropsten {
-      background-color: lighten($crimson, 45%);
-    }
-
-    &--kovan {
-      background-color: lighten($purple, 65%);
-    }
-
-    &--rinkeby {
-      background-color: lighten($tulip-tree, 35%);
+    &--testnet {
+      background-color: lighten($silver-chalice, 68%);
     }
   }
 
@@ -39,19 +31,11 @@
     border-radius: 10px;
 
     &--mainnet {
-      background-color: $blue-lagoon;
-    }
-
-    &--ropsten {
-      background-color: $crimson;
-    }
-
-    &--kovan {
-      background-color: $purple;
+      background-color: $dexon-purple;
     }
 
-    &--rinkeby {
-      background-color: $tulip-tree;
+    &--testnet {
+      background-color: $silver-chalice;
     }
   }
 }
diff --git a/ui/app/components/network-display/network-display.component.js b/ui/app/components/network-display/network-display.component.js
index 22d61709..c9a9162a 100644
--- a/ui/app/components/network-display/network-display.component.js
+++ b/ui/app/components/network-display/network-display.component.js
@@ -3,16 +3,12 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
   MAINNET_CODE,
-  ROPSTEN_CODE,
-  RINKEYBY_CODE,
-  KOVAN_CODE,
+  TESTNET_CODE,
 } from '../../../../app/scripts/controllers/network/enums'
 
 const networkToClassHash = {
   [MAINNET_CODE]: 'mainnet',
-  [ROPSTEN_CODE]: 'ropsten',
-  [RINKEYBY_CODE]: 'rinkeby',
-  [KOVAN_CODE]: 'kovan',
+  [TESTNET_CODE]: 'testnet',
 }
 
 export default class NetworkDisplay extends Component {
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 611aadb7..2c73496a 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -51,19 +51,10 @@ Network.prototype.render = function () {
     ])
   } else if (providerName === 'mainnet') {
     hoverText = context.t('mainnet')
-    iconName = 'ethereum-network'
-  } else if (providerName === 'ropsten') {
-    hoverText = context.t('ropsten')
-    iconName = 'ropsten-test-network'
-  } else if (parseInt(networkNumber) === 3) {
-    hoverText = context.t('ropsten')
-    iconName = 'ropsten-test-network'
-  } else if (providerName === 'kovan') {
-    hoverText = context.t('kovan')
-    iconName = 'kovan-test-network'
-  } else if (providerName === 'rinkeby') {
-    hoverText = context.t('rinkeby')
-    iconName = 'rinkeby-test-network'
+    iconName = 'dexon-network'
+  } else if (providerName === 'testnet') {
+    hoverText = context.t('testnet')
+    iconName = 'dexon-test-network'
   } else {
     hoverText = context.t('unknownNetwork')
     iconName = 'unknown-private-network'
@@ -73,10 +64,8 @@ Network.prototype.render = function () {
     h('div.network-component.pointer', {
       className: classnames({
         'network-component--disabled': this.props.disabled,
-        'ethereum-network': providerName === 'mainnet',
-        'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
-        'kovan-test-network': providerName === 'kovan',
-        'rinkeby-test-network': providerName === 'rinkeby',
+        'dexon-network': providerName === 'mainnet',
+        'dexon-test-network': providerName === 'testnet',
       }),
       title: hoverText,
       onClick: (event) => {
@@ -87,40 +76,22 @@ Network.prototype.render = function () {
     }, [
       (function () {
         switch (iconName) {
-          case 'ethereum-network':
+          case 'dexon-network':
             return h('.network-indicator', [
               h(NetworkDropdownIcon, {
-                backgroundColor: '#038789', // $blue-lagoon
-                nonSelectBackgroundColor: '#15afb2',
+                backgroundColor: '#954A97', // $blue-lagoon
+                nonSelectBackgroundColor: '#954A97',
               }),
               h('.network-name', context.t('mainnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
-          case 'ropsten-test-network':
+          case 'dexon-test-network':
             return h('.network-indicator', [
               h(NetworkDropdownIcon, {
-                backgroundColor: '#e91550', // $crimson
-                nonSelectBackgroundColor: '#ec2c50',
+                backgroundColor: '#aeaeae', // $crimson
+                nonSelectBackgroundColor: '#aeaeae',
               }),
-              h('.network-name', context.t('ropsten')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
-            ])
-          case 'kovan-test-network':
-            return h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#690496', // $purple
-                nonSelectBackgroundColor: '#b039f3',
-              }),
-              h('.network-name', context.t('kovan')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
-            ])
-          case 'rinkeby-test-network':
-            return h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#ebb33f', // $tulip-tree
-                nonSelectBackgroundColor: '#ecb23e',
-              }),
-              h('.network-name', context.t('rinkeby')),
+              h('.network-name', context.t('testnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index c929f61f..1a2db5f9 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -1,52 +1,57 @@
 .page-container {
   width: 408px;
   background-color: $dark-gray;
-  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   z-index: 25;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
-  overflow-y: auto;
 
   &__header {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 16px;
+    padding: 24px;
     flex: 0 0 auto;
     position: relative;
+
     &--no-padding-bottom {
       padding-bottom: 0;
     }
   }
+
   &__header-close {
-    color: $tundora;
+    color: $white;
     position: absolute;
     top: 16px;
     right: 16px;
     cursor: pointer;
     overflow: hidden;
+
     &::after {
       content: '\00D7';
       font-size: 40px;
       line-height: 20px;
     }
   }
+
   &__header-row {
     padding-bottom: 10px;
     display: flex;
     justify-content: space-between;
   }
+
   &__footer {
     display: flex;
     flex-flow: column;
     justify-content: center;
     border-top: 1px solid $geyser;
     flex: 0 0 auto;
+
     .btn-default,
     .btn-confirm {
       font-size: 1rem;
     }
+
     header {
       display: flex;
       flex-flow: row;
@@ -54,12 +59,14 @@
       padding: 16px;
       flex: 0 0 auto;
     }
+
     footer {
       display: flex;
       flex-flow: row;
       justify-content: space-around;
       padding: 0 16px 16px;
       flex: 0 0 auto;
+
       a,
       a:hover {
         text-decoration: none;
@@ -70,38 +77,44 @@
       }
     }
   }
+
   &__footer-button {
     height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 16px;
+
     &:last-of-type {
       margin-right: 0;
     }
   }
+
   &__back-button {
     color: #2f9ae0;
     font-size: 1rem;
     cursor: pointer;
     font-weight: 400;
   }
+
   &__title {
-    color: $black;
-    font-size: 2rem;
-    font-weight: 500;
-    line-height: 2rem;
-    margin-right: 1.5rem;
+    color: $dexon-purple;
+    font-size: 1.5rem;
+    font-weight: 800;
+    line-height: 1.5rem;
   }
+
   &__subtitle {
     padding-top: .5rem;
     line-height: initial;
     font-size: .9rem;
-    color: $gray;
+    color: $gallery;
   }
+
   &__tabs {
     display: flex;
     margin-top: 16px;
   }
+
   &__tab {
     min-width: 5rem;
     padding: 8px;
@@ -112,38 +125,47 @@
     cursor: pointer;
     border-bottom: none;
     margin-right: 16px;
+
     &:last-of-type {
       margin-right: 0;
     }
+
     &--selected {
       color: $curious-blue;
       border-bottom: 2px solid $curious-blue;
     }
   }
+
   &--full-width {
     width: 100% !important;
   }
+
   &--full-height {
     height: 100% !important;
     max-height: initial !important;
     min-height: initial !important;
   }
+
   &__content {
     overflow-y: auto;
     flex: 1;
   }
+
   &__warning-container {
     background: $linen;
     padding: 20px;
     display: flex;
     align-items: start;
   }
+
   &__warning-message {
     padding-left: 15px;
   }
+
   &__warning-title {
     font-weight: 500;
   }
+
   &__warning-icon {
     padding-top: 5px;
   }
@@ -154,10 +176,12 @@
     &__footer {
       flex-flow: column-reverse;
     }
+
     &__footer-button {
       width: 100%;
       margin-bottom: 1rem;
       margin-right: 0;
+
       &:first-of-type {
         margin-bottom: 0;
       }
@@ -184,4 +208,4 @@
     margin-right: auto;
     margin-left: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index ab36b5b8..846f68ab 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -1,50 +1,50 @@
 .transaction-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: hidden;
+  margin-top: 8px;
+  border-top: 1px solid $geyser;
+
+  &__completed-transactions {
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow-y: hidden;
-    margin-top: 8px;
-    border-top: 1px solid $geyser;
-
-    &__completed-transactions {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-    }
+  }
 
-    &__header {
-        flex: 0 0 auto;
-        font-size: .875rem;
-        text-align: center;
-        color: $white;
-        border-bottom: 1px solid $geyser;
-        padding: 8px 0 8px 20px;
+  &__header {
+    flex: 0 0 auto;
+    font-size: .875rem;
+    text-align: center;
+    color: $white;
+    border-bottom: 1px solid $geyser;
+    padding: 8px 0 8px 20px;
 
-        @media screen and (max-width: $break-small) {
-            padding: 8px 0 8px 16px;
-        }
+    @media screen and (max-width: $break-small) {
+      padding: 8px 0 8px 16px;
     }
+  }
 
-    &__transactions {
-        flex: 1;
-        overflow-y: auto;
-    }
+  &__transactions {
+    flex: 1;
+    overflow-y: auto;
+  }
 
-    &__pending-transactions {
-        margin-bottom: 16px;
-    }
+  &__pending-transactions {
+    margin-bottom: 16px;
+  }
 
-    &__empty {
-        flex: 1;
-        display: grid;
-        grid-template-rows: 35% 1fr;
-        padding-top: 8px;
-    }
+  &__empty {
+    flex: 1;
+    display: grid;
+    grid-template-rows: 35% 1fr;
+    padding-top: 8px;
+  }
 
-    &__empty-text {
-        grid-row-start: 2;
-        display: flex;
-        justify-content: center;
-        color: $geyser;
-    }
+  &__empty-text {
+    grid-row-start: 2;
+    display: flex;
+    justify-content: center;
+    color: $geyser;
+  }
 }