diff --git a/public/views/includes/wallets.html b/public/views/includes/wallets.html index 356ce9135..3fa2178ff 100644 --- a/public/views/includes/wallets.html +++ b/public/views/includes/wallets.html @@ -1,16 +1,18 @@
-
- - {{wallet.name || wallet.id}} - - {{wallet.m}}-of-{{wallet.n}} - - - Incomplete - - +
+
+ + {{wallet.name || wallet.id}} + + {{wallet.m}}-of-{{wallet.n}} + + + Incomplete + + +
diff --git a/public/views/tab-receive.html b/public/views/tab-receive.html index 780360ccb..43f3eb9f1 100644 --- a/public/views/tab-receive.html +++ b/public/views/tab-receive.html @@ -1,36 +1,68 @@ - + {{'Receive' | translate}} + + + - -
- -
- Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup. +
+
+
+ +
+ Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup. +
+
-
- -
- No Wallet -
- -
-
- - Share address +
+
+
+ + Share +
+
+
+
+ + Next Address +
+
-
- - Next Address +
+
+
+ + ... + {{addr}} +
+
-
- - ... - {{addr}} + +
+
+ No Wallet
- - -
+
+ + +
+ +
+ +
+

Receive bitcoin by sharing your address

+
+
+

+ Other bitcoin users can scan this code to send you money +

+
+
diff --git a/src/sass/common.scss b/src/sass/common.scss index cb13008c2..fd6679ad0 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -68,3 +68,7 @@ ion-header-bar{ border:none; } } + +.border-top{ + border-top:1px solid rgb(228,228,228); +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 4651a0516..b9b43ab5a 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -772,6 +772,10 @@ ul.wallet-selection.wallets { margin: 30px 0; } +.m15v { + margin: 15px 0; +} + .m10h { margin: 0 10px; } @@ -995,7 +999,9 @@ input[type=number] { @import 'mixins/mixins'; @import "views/add"; @import "views/tab-home"; +@import "views/tab-receive"; @import "views/walletDetails"; @import "views/bitpayCard"; @import 'views/onboarding/onboarding'; @import "views/includes/walletActivity"; +@import "views/includes/wallets"; diff --git a/src/sass/mixins/layout.scss b/src/sass/mixins/layout.scss index 71affb4b8..c55eb4932 100644 --- a/src/sass/mixins/layout.scss +++ b/src/sass/mixins/layout.scss @@ -1,4 +1,8 @@ @mixin center-block($topBottom: 0) { float:none; margin: $topBottom auto; +} + +.center-block{ + @include center-block(); } \ No newline at end of file diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss new file mode 100644 index 000000000..4f73f3ce6 --- /dev/null +++ b/src/sass/views/includes/wallets.scss @@ -0,0 +1,33 @@ +.wallets{ + .slides{ + .swiper-container{ + width:75% !important; + overflow:visible; + } + .card{ + padding: .7rem; + padding-left:.25rem; + padding-right:.25rem; + border-radius: .25rem; + } + .swiper-slide{ + width:100% !important; + &.swiper-slide-prev, &.swiper-slide-next{ + opacity: .2; + } + &.swiper-slide-prev{ + left:-5%; + } + &.swiper-slide-next{ + left:4%; + } + span{ + float:right; + clear:both; + } + } + } + .swiper-pagination{ + visibility: hidden; + } +} \ No newline at end of file diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss new file mode 100644 index 000000000..88fd844ed --- /dev/null +++ b/src/sass/views/tab-receive.scss @@ -0,0 +1,91 @@ +#tab-receive { + ion-header-bar{ + button{ + i{ + color:#fff; + font-size: 1.1rem; + } + } + } + #address { + background: #fff; + .item { + border: none; + font-size: .8rem; + i { + font-size: 1.3rem; + &.ion-social-bitcoin-outline { + border-right: 1px solid rgb(228, 228, 228); + } + } + } + .bit-address { + font-size: .8rem; + .item { + padding-top: 5px; + padding-bottom: 5px; + } + &-gen-address {} + } + } + #wallets { + position: relative; + &:before { + content: ""; + display: inline-block; + width: 0; + height: 0; + border-style: solid; + border-width: 0 20px 20px 20px; + border-color: transparent transparent #f5f5f5 transparent; + top: -9px; + position: absolute; + left: 45%; + } + } + #first-time-tip { + background: rgba(30, 49, 134, 1); + background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(88%, rgba(30, 49, 134, 0)), color-stop(100%, rgba(30, 49, 134, 0))); + background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + animation-name: fadeIn; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: .4s; + animation-delay: 2s; + animation-fill-mode: forwards; + z-index: 10; + text-align: center; + color: #fff; + padding-top: 3rem; + .close { + top: .5rem; + right: 1rem; + position: absolute; + font-size: 1.5rem; + opacity: .5; + } + h3 { + color: #fff; + margin-bottom:1rem; + } + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +}