aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/account-and-transaction-details.js7
-rw-r--r--ui/app/components/token-cell.js29
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss24
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss13
-rw-r--r--ui/app/css/itcss/components/token-list.scss21
5 files changed, 70 insertions, 24 deletions
diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js
index 60293de77..03101d37a 100644
--- a/ui/app/account-and-transaction-details.js
+++ b/ui/app/account-and-transaction-details.js
@@ -13,12 +13,7 @@ function AccountAndTransactionDetails () {
}
AccountAndTransactionDetails.prototype.render = function () {
- return h('div', {
- style: {
- display: 'flex',
- flex: '1 0 auto',
- },
- }, [
+ return h('div.account-and-transaction-details', [
// wallet
h(WalletView, {
style: {
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 59552f4a0..a5d032a0d 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -111,20 +111,25 @@ TokenCell.prototype.render = function () {
network,
}),
- h('h.token-list-item__balance-wrapper', null, [
- h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
+ h('div.token-list-item__balance-ellipsis', [
- showFiat && h('div.token-list-item__fiat-amount', {
- style: {},
- }, formattedFiat),
- ]),
+ h('h.token-list-item__balance-wrapper', null, [
+ h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
- h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
- onClick: (e) => {
- e.stopPropagation()
- this.setState({ tokenMenuOpen: true })
- },
- }),
+ showFiat && h('div.token-list-item__fiat-amount', {
+ style: {},
+ }, formattedFiat),
+ ]),
+
+ h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+ onClick: (e) => {
+ e.stopPropagation()
+ this.setState({ tokenMenuOpen: true })
+ },
+ }),
+
+ ]),
+
tokenMenuOpen && h(TokenMenuDropdown, {
onClose: () => this.setState({ tokenMenuOpen: false }),
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index ccc9a0118..4af0c2c55 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -71,6 +71,22 @@
font-size: 105%;
}
}
+
+ @media #{$sub-mid-size-breakpoint-range} {
+ margin-left: .4em;
+ margin-right: .4em;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+ .token-amount {
+ font-size: 1rem;
+ }
+
+ .fiat-amount {
+ margin-top: .25%;
+ font-size: 1rem;
+ }
+ }
}
.hero-balance-buttons {
@@ -91,4 +107,12 @@
.hero-balance-button {
width: 6rem;
+
+ @media #{$sub-mid-size-breakpoint-range} {
+ padding: 0.4rem;
+ width: 4rem;
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ }
}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 37fabf254..a5e4523b9 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -1,3 +1,6 @@
+$sub-mid-size-breakpoint: 667px;
+$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
+
/*
NewUI Container Elements
*/
@@ -20,6 +23,12 @@ $wallet-view-bg: $alabaster;
display: none;
}
+//Account and transaction details
+.account-and-transaction-details {
+ display: flex;
+ flex: 1 0 auto;
+}
+
// tx view
.tx-view {
@@ -60,6 +69,10 @@ $wallet-view-bg: $alabaster;
overflow-x: hidden;
}
+ @media #{$sub-mid-size-breakpoint-range} {
+ min-width: 160px;
+ }
+
.wallet-view-account-details {
flex: 0 0 auto;
}
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index e24bf812b..e90418c97 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -15,7 +15,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
font-size: 1.5rem;
@media #{$wallet-balance-breakpoint-range} {
- font-size: 105%;
+ font-size: 95%;
}
}
@@ -41,17 +41,22 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
&__identicon {
margin-right: 15px;
border: '1px solid #dedede';
+ min-width: 50px;
@media #{$wallet-balance-breakpoint-range} {
margin-right: 4%;
}
}
+ &__balance-ellipsis {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+
&__ellipsis {
- // position: absolute;
- // top: 20px;
- // right: 24px;
line-height: 45px;
+ margin-left: 5px;
}
&__balance-wrapper {
@@ -61,7 +66,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
.token-menu-dropdown {
height: 55px;
- width: 191px;
+ width: 80%;
border-radius: 4px;
background-color: rgba(0, 0, 0, .82);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
@@ -70,6 +75,10 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
right: 25px;
z-index: 2000;
+ @media #{$wallet-balance-breakpoint-range} {
+ right: 18px;
+ }
+
&__close-area {
position: fixed;
top: 0;
@@ -81,7 +90,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&__container {
- padding: 16px 34px 32px;
+ padding: 16px;
z-index: 2200;
position: relative;
}