aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/tx-list.js11
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss4
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss46
3 files changed, 45 insertions, 16 deletions
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 39cf7de79..74d46728c 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -22,12 +22,7 @@ function TxList () {
}
const contentDivider = h('div.tx-list-content-divider', {
- style: {
- marginLeft: '1.3em',
- marginRight: '1.3em',
- height:'1px',
- background:'#E7E7E7', // TODO: make custom color
- },
+ style: {},
})
TxList.prototype.render = function () {
@@ -38,11 +33,11 @@ TxList.prototype.render = function () {
return h('div.flex-column.tx-list-container', {}, [
- h('div.flex-row.tx-list-header', {
+ h('div.flex-row.tx-list-header-wrapper', {
style: {},
}, [
- h('div.flex-row', {
+ h('div.flex-row.tx-list-header', {
}, [
h('div', {
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 2dd9bf973..463a124fb 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -5,7 +5,9 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
- margin: 0.3em 0.9em 0.8em 0.9em;
+ margin: 0.3em 0.9em 0em 0.9em;
+ height: 80vh;
+ max-height: 225px;
}
@media screen and (min-width: $break-large) {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 41543c347..02409fb3e 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -1,23 +1,54 @@
-.tx-list-header {
- margin: 1.8em 1.3em 1.8em 1.3em;
+.tx-list-container {
+ height: 87.5%;
+ @media screen and (min-width: $break-large) {
+ overflow-y: scroll;
+ }
+}
+
+@media screen and (max-width: $break-small) {
+ .tx-list-header-wrapper {
+ margin-top: 1em;
+ margin-bottom: 1.4em;
+ justify-content: center;
+ }
+
+ .tx-list-header {
+ align-self: center;
+ font-size: 12px;
+ color: $dusty-gray;
+ }
+}
+
+@media screen and (min-width: $break-large) {
+ .tx-list-header-wrapper {
+ flex: 0 0 55px;
+ }
+
+ .tx-list-header {
+ font-size: 16px;
+ margin: 1.8em 1.3em 1.8em 1.3em;
+ }
}
.tx-list-content-divider {
- margin: 0.1em 1.3em 0.1em 1.3em;
height: 1px;
background: rgb(231, 231, 231);
flex: 0 0 1px;
-}
-.tx-list-container {
- height: 87.5%;
- overflow-y: scroll;
+ @media screen and (max-width: $break-small) {
+ margin: 0.1em 0em 0.1em 0em;
+ }
+
+ @media screen and (min-width: $break-large) {
+ margin: 0.1em 1.3em 0.1em 1.3em;
+ }
}
.tx-list-item-wrapper {
flex: 0 0 70px;
align-items: stretch;
justify-content: flex-start;
+
@media screen and (max-width: $break-small) {
margin: 0em 1.3em 0.95em 1.3em;
}
@@ -31,6 +62,7 @@
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
+
@media screen and (max-width: $break-small) {
margin-top: 6px;
margin-bottom: 20px;