aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-01-17 03:58:02 +0800
committerChi Kei Chan <chikeichan@gmail.com>2018-01-18 05:50:16 +0800
commit40e58d31326cc4e759991d15e7e84140e483a791 (patch)
tree9ca849fb759dfbcd8904625dddc7bd3dd8a34014 /ui/app
parentba0762c582be7bdb3706f66300bc3d6a5c832836 (diff)
downloadtangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.tar
tangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.tar.gz
tangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.tar.bz2
tangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.tar.lz
tangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.tar.xz
tangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.tar.zst
tangerine-wallet-browser-40e58d31326cc4e759991d15e7e84140e483a791.zip
Fix tx-list, confirmation screen styling
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/tx-list.js9
-rw-r--r--ui/app/css/itcss/components/confirm.scss17
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss1
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss4
4 files changed, 18 insertions, 13 deletions
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 50e328dac..84cd0f093 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -36,16 +36,15 @@ TxList.prototype.componentWillMount = function () {
}
TxList.prototype.render = function () {
- return h('div.flex-column.tx-list-container', {}, [
-
+ return h('div.flex-column', [
h('div.flex-row.tx-list-header-wrapper', [
h('div.flex-row.tx-list-header', [
h('div', 'transactions'),
]),
]),
-
- this.renderTransaction(),
-
+ h('div.flex-column.tx-list-container', {}, [
+ this.renderTransaction(),
+ ]),
])
}
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index e75a827f9..255f66e66 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -2,13 +2,15 @@
position: relative;
align-items: center;
font-family: Roboto;
- flex: 0 0 auto;
+ flex: 1 0 auto;
flex-flow: column nowrap;
box-shadow: 0 2px 4px 0 rgba($black, .08);
border-radius: 8px;
+ display: flex;
@media screen and (max-width: 575px) {
width: 100%;
+ box-shadow: initial;
}
@media screen and (min-width: 576px) {
@@ -272,8 +274,8 @@ section .confirm-screen-account-number,
}
.confirm-screen-confirm-button {
- height: 62px;
- border-radius: 2px;
+ height: 50px;
+ border-radius: 4px;
background-color: #02c9b1;
font-size: 16px;
color: $white;
@@ -285,11 +287,11 @@ section .confirm-screen-account-number,
box-shadow: none;
flex: 1 0 auto;
font-weight: 300;
- margin: 0 8px;
+ margin: 0 5px;
}
.btn-light.confirm-screen-cancel-button {
- height: 62px;
+ height: 50px;
background: none;
border: none;
opacity: 1;
@@ -298,12 +300,11 @@ section .confirm-screen-account-number,
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
- line-height: 32px;
box-shadow: none;
cursor: pointer;
flex: 1 0 auto;
font-weight: 300;
- margin: 0 8px;
+ margin: 0 5px;
}
#pending-tx-form {
@@ -312,7 +313,7 @@ section .confirm-screen-account-number,
display: flex;
flex-flow: row nowrap;
background-color: $white;
- padding: 12px 18px;
+ padding: 12px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
width: 100%;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 99fd2a96d..ccc9a0118 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -17,6 +17,7 @@
justify-content: flex-start;
align-items: center;
margin: 2.3em 2.37em .8em;
+ flex: 0 0 auto;
}
.balance-container {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 19dadc69a..29001a842 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -6,6 +6,10 @@
}
}
+.tx-list-header-wrapper {
+ flex: 0 0 auto;
+}
+
.tx-list-header {
text-transform: capitalize;
}