Skip to content

Commit a072f7f

Browse files
bradleySuirabradleySuira
authored
Merge pull request #11 from liquality/feature-ui-changes
Feature UI changes
2 parents 7e5a4f0 + d1c1ed7 commit a072f7f

File tree

17 files changed

+299
-179
lines changed

17 files changed

+299
-179
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "liquality-wallet",
3-
"version": "0.8.5",
3+
"version": "0.8.6",
44
"private": true,
55
"license": "MIT",
66
"author": "Liquality <info@liquality.io>",

‎src/assets/icons/close.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/scss/_overrides.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ $input-padding-x-sm: 0;
6767
$input-font-size-sm: $font-size-base;
6868

6969
$custom-select-border-width: 0;
70-
$form-group-margin-bottom: 10px;
70+
$form-group-margin-bottom: 5px;
7171
$label-margin-bottom: 0;
7272

7373
$wrapper-padding: 20px;

‎src/assets/scss/style.scss‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ textarea {
132132

133133
.form {
134134
label {
135-
font-size: $font-size-sm;
135+
font-size: $font-size-tiny;
136136
font-weight: bold;
137137
text-transform: uppercase;
138138
width: 100%;
@@ -303,22 +303,41 @@ textarea {
303303
color: $color-text-primary;
304304

305305
&.active {
306-
font-weight: $font-weight-base !important;
306+
font-weight: $btn-font-weight !important;
307307
background-color: $dark;
308308
color: #1D1E21;
309309
}
310+
311+
&:focus {
312+
box-shadow: none;
313+
}
314+
315+
input[type=checkbox],
316+
input[type=radio] {
317+
position: absolute;
318+
clip: rect(0,0,0,0);
319+
pointer-events: none;
320+
}
310321
}
311322

312323
.btn-option-lg {
313324
height: 26px;
314325
}
315326

316327
.mt-20 {
317-
margin-top: 20px;
328+
margin-top: 1.25rem;
329+
}
330+
331+
.mt-30 {
332+
margin-top: 1.875rem;
318333
}
319334

320335
.mt-40 {
321-
margin-top: 40px;
336+
margin-top: 2.5rem;
337+
}
338+
339+
.mt-150 {
340+
margin-top: 9.375rem;
322341
}
323342

324343
.details-text {
@@ -330,5 +349,25 @@ textarea {
330349
display: flex;
331350
flex-wrap: wrap;
332351
justify-content: space-between;
352+
333353
}
334354

355+
.detail-group {
356+
margin-top: 0.225rem;
357+
margin-bottom: 0;
358+
}
359+
360+
// remove error icon for all inputs
361+
.was-validated .form-control:invalid, .form-control.is-invalid {
362+
padding-right: 1rem !important;
363+
background-image: none !important;
364+
}
365+
366+
.icon-sm {
367+
width: 10px;
368+
height: 10px;
369+
}
370+
371+
.icon-btn {
372+
cursor: pointer;
373+
}

‎src/assets/scss/tooltip.scss‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11

22
.tooltip {
3+
$borderColor: rgba(0, 0, 0, 0.15);
4+
$bgColor: #ffffff;
5+
$textColor: black;
6+
37
display: block !important;
48
z-index: 10000;
5-
9+
.wrapper {
10+
padding: 0;
11+
}
12+
613
.tooltip-inner {
7-
background: black;
8-
color: white;
9-
border-radius: 16px;
10-
padding: 5px 10px 4px;
14+
background: $bgColor;
15+
color: $textColor;
16+
padding: 10px;
17+
border: 1px solid $borderColor;
18+
border-radius: 5px;
1119
}
1220

1321
.tooltip-arrow {
@@ -16,7 +24,7 @@
1624
border-style: solid;
1725
position: absolute;
1826
margin: 5px;
19-
border-color: black;
27+
border-color: $borderColor;
2028
z-index: 1;
2129
}
2230

@@ -81,20 +89,19 @@
8189
}
8290

8391
&.popover {
84-
$color: #ffffff;
8592
.wrapper {
8693
padding: 0;
8794
}
8895

8996
.popover-inner {
90-
background: $color;
91-
color: black;
97+
background: $bgColor;
98+
color: $textColor;
9299
padding: 10px;
93100
border-radius: 5px;
94101
}
95102

96103
.popover-arrow {
97-
border-color:rgba(0, 0, 0, 0.15);
104+
border-color: $borderColor;
98105
}
99106
}
100107

‎src/components/DetailsContainer.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,14 @@ export default {
4242
align-items: center;
4343
flex-wrap: wrap;
4444
align-content: space-between;
45-
font-size: $font-size-xs;
45+
font-size: $font-size-sm;
46+
line-height: $font-size-sm;
4647
4748
svg {
4849
height: 5px;
4950
margin-right: 10px;
5051
}
52+
5153
svg.right {
5254
transform: rotate(-90deg);
5355
}
@@ -56,12 +58,11 @@ export default {
5658
font-weight: bold;
5759
text-transform: uppercase;
5860
padding-right: 0.5em;
59-
font-size: $font-size-sm;
6061
}
6162
}
6263
6364
.details-content {
64-
65+
padding: 0;
6566
ul {
6667
list-style-type: none;
6768
background: #ffffff;
@@ -73,12 +74,10 @@ export default {
7374
align-items: center;
7475
justify-content: left;
7576
border: none;
76-
font-size: $font-size-xs;
7777
padding-left: 20px;
7878
7979
label {
8080
float: left;
81-
font-size: $font-size-xs !important;
8281
}
8382
}
8483
}

‎src/components/FeeSelector.vue‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,37 @@
33
<label class="btn btn-option btn-option-lg"
44
v-for="name in ['slow', 'average', 'fast']" :key="name"
55
:class="{ active: (name === value)}"
6-
v-tooltip="{content: getTooltip(name)}"
6+
v-tooltip="{ content: getTooltip(name)} "
77
v-on:click="$emit('input', name)">
88
<input type="radio" name="fee" autocomplete="off" :checked="name === value"> {{name}}
99
</label>
1010
</div>
1111
</template>
1212

1313
<script>
14-
import cryptoassets from '@/utils/cryptoassets'
1514
import { getTxFee } from '@/utils/fees'
1615
import BN from 'bignumber.js'
16+
import { prettyFiatBalance } from '@/utils/coinFormatter'
1717
1818
export default {
19-
props: ['asset', 'value', 'fees', 'txTypes'],
19+
props: ['asset', 'value', 'fees', 'txTypes', 'fiatRates'],
2020
methods: {
2121
getTooltip (name) {
22-
const unit = cryptoassets[this.asset].fees.unit
23-
let content = `${this.fees[name].fee} ${unit}`
22+
let content = '<div class="text-right">'
23+
if (this.fees[name].wait) {
24+
content += `${this.fees[name].wait} sec`
25+
}
26+
2427
if (this.txTypes) {
2528
const total = this.txTypes.reduce((accum, tx) => {
2629
return accum.plus(getTxFee(this.asset, tx, this.fees[name].fee))
2730
}, BN(0))
31+
const totalFiat = prettyFiatBalance(total, this.fiatRates[this.asset])
2832
content += `<br />${total} ${this.asset}`
33+
content += `<br />${totalFiat} USD`
2934
}
30-
if (this.fees[name].wait) {
31-
content += `<br />${this.fees[name].wait}s`
32-
}
33-
return content
35+
36+
return `${content}</div>`
3437
}
3538
}
3639
}

‎src/components/NavBar.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<router-link v-if="showBack" class="navbar_prev" v-bind:to="backPath">
55
<div><ChevronLeftIcon class="navbar_prev_icon" />{{ backLabel }}</div>
66
</router-link>
7+
<a v-if="showBackButton" class="navbar_prev" href="" @click="backClick">
8+
<div><ChevronLeftIcon class="navbar_prev_icon" />{{ backLabel }}</div>
9+
</a>
710
<div class="navbar_title">
811
<slot></slot>
912
</div>
@@ -41,7 +44,7 @@ export default {
4144
AssetsIcon,
4245
SettingsIcon
4346
},
44-
props: ['showMenu', 'showBack', 'backPath', 'backLabel'],
47+
props: ['showMenu', 'showBack', 'backPath', 'backLabel', 'showBackButton', 'backClick'],
4548
data () {
4649
return {
4750
showMenuList: false
@@ -76,7 +79,7 @@ export default {
7679
<style lang="scss">
7780
.navbar {
7881
position: relative;
79-
height: 48px;
82+
height: 44px;
8083
padding: 0 !important;
8184
border-bottom: 1px solid $hr-border-color;
8285
@@ -103,7 +106,7 @@ export default {
103106
}
104107
105108
&_menu_list.menu_list {
106-
top: 47px;
109+
top: 44px;
107110
right: 0;
108111
left: auto;
109112

‎src/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"manifest_version": 2,
3-
"version": "0.8.5",
3+
"version": "0.8.6",
44
"name": "Liquality Wallet",
55
"description": "Secure multi-crypto wallet with built-in Atomic Swaps!",
66
"homepage_url": "https://liquality.io",

0 commit comments

Comments
 (0)