diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index d46b16f25..d3f37b7a2 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -1,6 +1,6 @@
.app-header {
align-items: center;
- background: $gallery;
+ background: $Grey-000;
position: relative;
z-index: $header-z-index;
display: flex;
@@ -9,7 +9,7 @@
flex: 0 0 auto;
@media screen and (max-width: 575px) {
- padding: 12px;
+ padding: 1rem;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
z-index: $mobile-header-z-index;
}
@@ -34,6 +34,7 @@
cursor: pointer;
&--icon {
+ height: 32px;
@media screen and (min-width: $break-large) {
display: none;
}
diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss
index f699f4090..eaa50619c 100644
--- a/ui/app/components/app/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
@@ -5,19 +5,28 @@
align-items: center;
flex: 0 0 auto;
margin-bottom: 16px;
- padding: 5px;
- border-bottom: 1px solid #e5e5e5;
+ padding: 0 22px;
+ border-bottom: 1px solid $Grey-100;
&__sidebar-button {
- font-size: 1.25rem;
+ width: 20px;
+ height: 20px;
+ background-image: url(/images/icons/hamburger.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
cursor: pointer;
- padding: 10px;
}
&__open-in-browser {
+ width: 20px;
+ height: 20px;
+ background-image: url(/images/icons/3dots.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
cursor: pointer;
display: flex;
justify-content: center;
- padding: 10px;
}
}
diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js
index e37fddda4..c830d8a19 100644
--- a/ui/app/components/app/menu-bar/menu-bar.component.js
+++ b/ui/app/components/app/menu-bar/menu-bar.component.js
@@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent {
position="bottom"
>
{
this.context.metricsEvent({
eventOpts: {
@@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent {
position="bottom"
>
{
this.context.metricsEvent({
eventOpts: {
diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
index 9ee0a1e17..e778700cd 100644
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@@ -82,7 +82,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('mainnet')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
@@ -92,7 +92,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('ropsten')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'kovan-test-network':
return h('.network-indicator', [
@@ -102,7 +102,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('kovan')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
@@ -112,7 +112,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('rinkeby')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'goerli-test-network':
return h('.network-indicator', [
@@ -122,7 +122,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('goerli')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
default:
return h('.network-indicator', [
@@ -142,7 +142,7 @@ Network.prototype.render = function () {
}),
h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
}
})(),
diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss
index 5339a228b..fa3079d77 100644
--- a/ui/app/components/app/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
@@ -7,15 +7,21 @@
&__name {
max-width: 200px;
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 19px;
+ color: $black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
+ margin-bottom: 4px;
}
&__address {
font-size: .75rem;
- color: $silver-chalice;
+ line-height: .75rem;
+ color: #989a9b;
}
&__clickable {
@@ -23,7 +29,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 5px 15px;
+ margin: 4px 0;
+ padding: 6px 15px;
border-radius: 10px;
cursor: pointer;
diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss
index 9e73a546c..4dba4b2c3 100644
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@@ -1,7 +1,7 @@
.transaction-list-item {
box-sizing: border-box;
min-height: 74px;
- border-bottom: 1px solid $geyser;
+ border-bottom: 1px solid $Grey-100;
display: flex;
justify-content: center;
align-items: center;
@@ -19,7 +19,7 @@
"identicon nonce status secondary-amount";
@media screen and (max-width: $break-small) {
- padding: 8px 20px 12px;
+ padding: .5rem 1rem;
grid-template-columns: 45px 5fr 3fr;
grid-template-areas:
"nonce nonce nonce"
@@ -44,12 +44,13 @@
&__action {
text-transform: capitalize;
- padding: 0 8px 2px 0;
+ padding: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
grid-area: action;
- align-self: end;
+ color: $Grey-800;
+ line-height: 20px;
}
&__status {
@@ -72,7 +73,8 @@
align-self: start;
@media screen and (max-width: $break-small) {
- padding-bottom: 4px;
+ padding-bottom: 8px;
+ line-height: 12px;
}
}
@@ -88,19 +90,22 @@
grid-area: primary-amount;
align-self: end;
justify-self: end;
+ line-height: 20px;
@media screen and (max-width: $break-small) {
- padding-bottom: 2px;
+ padding-bottom: 4px;
+ height: 100%;
+ color: $Grey-800;
}
}
&--secondary {
text-align: end;
font-size: .75rem;
- color: #5e6064;
grid-area: secondary-amount;
align-self: start;
justify-self: end;
+ color: $Grey-500;
}
}
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
index 0d4127b4f..80b26469b 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent {