aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-01-11 13:09:09 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-01-11 13:09:09 +0800
commit208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b (patch)
treecb3580f55af74228f97c50714bbb517331b445f2 /ui
parent3b2a519d46b44b819c799741d44bc94022f4b6ed (diff)
downloadtangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.tar
tangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.tar.gz
tangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.tar.bz2
tangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.tar.lz
tangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.tar.xz
tangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.tar.zst
tangerine-wallet-browser-208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b.zip
Update main view styling
Diffstat (limited to 'ui')
-rw-r--r--ui/app/app.js14
-rw-r--r--ui/app/components/balance-component.js2
-rw-r--r--ui/app/components/token-cell.js2
-rw-r--r--ui/app/components/tx-view.js14
-rw-r--r--ui/app/css/itcss/components/header.scss8
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss30
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss29
-rw-r--r--ui/app/css/itcss/components/token-list.scss6
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss6
-rw-r--r--ui/app/css/itcss/components/wallet-balance.scss20
-rw-r--r--ui/app/css/itcss/settings/variables.scss1
11 files changed, 64 insertions, 68 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index c6fce0e47..73e5c06db 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -253,19 +253,13 @@ App.prototype.renderAppBar = function () {
}, [
// mini logo
h('img.metafox-icon', {
- height: 29,
- width: 29,
- src: '/images/icon-128.png',
+ height: 42,
+ width: 42,
+ src: '/images/metamask-fox.svg',
}),
// metamask name
- h('h1', {
- style: {
- position: 'relative',
- paddingLeft: '9px',
- color: '#5B5D67',
- },
- }, 'MetaMask'),
+ h('h1', 'MetaMask'),
]),
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index 50007ce14..d591ab455 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () {
// style: {},
// }),
h(Identicon, {
- diameter: 45,
+ diameter: 50,
address: token && token.address,
network,
}),
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 677b66830..59552f4a0 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -106,7 +106,7 @@ TokenCell.prototype.render = function () {
h(Identicon, {
className: 'token-list-item__identicon',
- diameter: 45,
+ diameter: 50,
address,
network,
}),
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index e42a20c85..7bddbbef4 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () {
return !selectedToken
? (
h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-clear', {
- style: {
- textAlign: 'center',
- },
+ h('button.hero-balance-button', {
onClick: () => showModal({
name: 'BUY',
}),
}, 'DEPOSIT'),
- h('button.btn-clear', {
+ h('button.hero-balance-button', {
style: {
- textAlign: 'center',
marginLeft: '0.8em',
},
onClick: showSendPage,
@@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () {
)
: (
h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-clear', {
- style: {
- textAlign: 'center',
- marginLeft: '0.8em',
- },
+ h('button.hero-balance-button', {
onClick: showSendTokenPage,
}, 'SEND'),
])
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index a6332f819..2a1f7abc7 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -53,7 +53,7 @@
}
@media screen and (min-width: 1281px) {
- width: 65vw;
+ width: 62vw;
}
}
@@ -61,8 +61,10 @@
font-family: Roboto;
text-transform: uppercase;
font-weight: 400;
- color: #22232c; // $shark
- line-height: 29px;
+ font-size: 1.1rem;
+ position: relative;
+ padding-left: 15px;
+ color: #5b5d67;
@media screen and (max-width: 575px) {
display: none;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index bdbdd2645..643363f95 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -16,7 +16,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
- margin: 2.8em 2.37em .8em;
+ margin: 2.3em 2.37em .8em;
}
.balance-container {
@@ -42,8 +42,9 @@
text-align: center;
.token-amount {
- font-size: 175%;
- margin-top: 12.5%;
+ font-size: 1.75rem;
+ margin-top: 1rem;
+ font-weight: 400;
}
.fiat-amount {
@@ -54,12 +55,13 @@
}
@media screen and (min-width: $break-large) {
- margin-left: 3%;
+ margin-left: .8em;
justify-content: flex-start;
align-items: flex-start;
.token-amount {
- font-size: 135%;
+ font-size: 1.5rem;
+ font-weight: 400;
}
.fiat-amount {
@@ -69,13 +71,6 @@
}
}
- .balance-icon {
- border-radius: 25px;
- width: 45px;
- height: 45px;
- border: 1px solid $alto;
- }
-
.hero-balance-buttons {
@media screen and (max-width: $break-small) {
@@ -112,3 +107,14 @@
}
}
}
+
+.hero-balance-button {
+ text-align: center;
+ padding: .9rem 1rem;
+ color: $white;
+ background: $curious-blue;
+ border-radius: 2px;
+ font-size: .85rem;
+ width: 6rem;
+ font-weight: 300;
+}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 61dfbd176..3ae47cb35 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -4,7 +4,7 @@
// Component Colors
$tx-view-bg: $white;
-$wallet-view-bg: $wild-sand;
+$wallet-view-bg: $alabaster;
// Main container
.main-container {
@@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand;
.wallet-view {
display: flex;
flex-direction: column;
- flex: 33.5 1 33.5%;
+ flex: 32 1 32%;
width: 0;
background: $wallet-view-bg;
z-index: 200;
@@ -69,22 +69,21 @@ $wallet-view-bg: $wild-sand;
}
&__keyring-label {
- height: 40px;
+ height: 50px;
color: $dusty-gray;
font-family: Roboto;
font-size: 10px;
- line-height: 40px;
text-align: right;
- padding: 0 20px;
+ padding: 17px 20px 0;
+ box-sizing: border-box;
}
&__details-button {
color: $curious-blue;
font-size: 10px;
- line-height: 13px;
text-align: center;
border: 1px solid $curious-blue;
- border-radius: 10.5px;
+ border-radius: 17px;
background-color: transparent;
margin: 0 auto;
padding: 4px 12px;
@@ -121,12 +120,12 @@ $wallet-view-bg: $wild-sand;
&__add-token-button {
flex: 0 0 auto;
- color: $dusty-gray;
+ color: $curious-blue;
font-size: 14px;
line-height: 19px;
text-align: center;
margin: 36px auto;
- border: 1px solid $dusty-gray;
+ border: 1px solid $curious-blue;
border-radius: 2px;
font-weight: 300;
background: none;
@@ -199,7 +198,7 @@ $wallet-view-bg: $wild-sand;
.main-container {
// margin-top: 6.9vh;
- width: 85%;
+ width: 85vw;
height: 90vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@@ -208,7 +207,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 769px) {
.main-container {
// margin-top: 6.9vh;
- width: 80%;
+ width: 80vw;
height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@@ -217,7 +216,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 1281px) {
.main-container {
// margin-top: 6.9vh;
- width: 65%;
+ width: 62vw;
height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@@ -252,11 +251,11 @@ $wallet-view-bg: $wild-sand;
// wallet view
.account-name {
font-size: 24px;
- font-weight: 300;
+ font-weight: 400;
line-height: 20px;
- color: $scorpion;
+ color: $black;
margin-top: 8px;
- margin-bottom: 24px;
+ margin-bottom: .9rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index d4add71b1..5cd5b3807 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -12,7 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
position: relative;
&__token-balance {
- font-size: 130%;
+ font-size: 1.5rem;
+ font-weight: 400;
@media #{$wallet-balance-breakpoint-range} {
font-size: 105%;
@@ -34,7 +35,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&--active {
- background-color: rgba($wallet-balance-bg, 1);
+ background-color: $manatee;
+ color: $white;
}
&__identicon {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index a5d508f11..0ff0b3dda 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -32,13 +32,9 @@
}
@media screen and (min-width: $break-large) {
- .tx-list-header-wrapper {
- flex: 0 0 55px;
- }
-
.tx-list-header {
font-size: 16px;
- margin: 1.5em 2.37em;
+ margin: 1.1em 2.37em .8em;
}
.tx-list-container::-webkit-scrollbar {
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 64b291b89..44f405e08 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
background: rgba($wallet-balance-bg, 0);
&--active {
- background: rgba($wallet-balance-bg, 1);
+ background: $manatee;
+ color: $white;
}
}
@@ -41,7 +42,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
align-items: flex-start;
.token-amount {
- font-size: 135%;
+ font-size: 1.5rem;
+ font-weight: 400;
}
.fiat-amount {
@@ -61,11 +63,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
}
}
+}
- .balance-icon {
- border-radius: 25px;
- width: 45px;
- height: 45px;
- border: 1px solid $alto;
- }
+.balance-icon {
+ border-radius: 25px;
+ width: 50px;
+ height: 50px;
+ border: 1px solid $alto;
+ padding: 5px;
+ background: $white;
}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 387d14b5f..7e723966b 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -42,6 +42,7 @@ $malibu-blue: #7ac9fd;
$athens-grey: #e9edf0;
$jaffa: #f28930;
$geyser: #d2d8dd;
+$manatee: #93949d;
/*
Z-Indicies