anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

design(onboarding): polish the notification and backupRequest views

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-06 21:12:24 -04:00
commit 550d1c0630
8 changed files with 90 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/js/controllers/onboarding/backupRequest.js
View file

@ -7,7 +7,7 @@ angular.module('copayApp.controllers').controller('backupRequestController', fun
$scope.openPopup = function() {
var title = gettextCatalog.getString('Without a backup, you could lose money.');
var message = gettextCatalog.getString('If this device is damaged, this app is delted, or you migrate to another device, neither you nor BitPay can recover your funds.');
var message = gettextCatalog.getString('If this device is replaced or this app is deleted, neither you nor BitPay can recover your funds without a backup.');
var okText = gettextCatalog.getString('I understand');
var cancelText = gettextCatalog.getString('Go back');
popupService.showConfirm(title, message, okText, cancelText, function(val) {

80
src/sass/views/onboarding/onboard-backup-request.scss
View file

@ -1,63 +1,31 @@
#onboarding-backup-request{
.warning{
margin:4rem auto 1rem;
height: 11rem;
#onboarding-backup-request {
#warning {
display: flex;
flex-direction: column;
height: calc(100vh - 320px);
justify-content: center;
align-content: center;
}
button{
color:#fff;
#alert-icon {
margin: 20px auto 5px;
height: 10vh;
}
#arrow-down{
@media (min-width: 570px){
#backup-description {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
#arrow-down {
font-size: 4.2rem;
color: $soft-blue;
}
.cta-buttons{
width:100%;
float:none;
position: absolute;
bottom: 0;
#backup-tldr {
font-size: 16px;
}
@media (min-width: 415px){
.warning{
height:16rem;
}
.cta-buttons {
@extend %cta-buttons;
padding-bottom: 10px;
}
}
@media (max-width: 399px){
#onboarding-backup-request{
.warning{
margin: 2rem auto 1rem;
height: 8rem;
}
h3{
font-size:1.3rem;
}
p{
font-size:.9rem;
max-width: 80%;
flex: 0 0 80%;
}
.cta-buttons{
float:none;
bottom:0;
position: absolute;
button{
max-width: 400px;
}
}
}
}
@media (max-height: 540px){
#onboarding-backup-request{
.cta-buttons{
float:left;
position: relative;
}
}
}
@media (min-height: 980px){
#onboarding-backup-request{
#arrow-down{
margin-top: 7rem;
}
}
}

50
src/sass/views/onboarding/onboard-push-notifications.scss
View file

@ -1,49 +1,9 @@
#onboarding-push-notifications {
h2 {
margin-top: 2rem;
#notifications-topic {
margin-top: 3rem;
}
#cta {
background-image: url('../img/onboarding-push-notifications.svg');
height: 15rem;
margin-top: .75rem;
}
.cta-buttons {
float: none;
bottom: 0;
position: absolute;
width: 100%;
button {
max-width: 400px;
}
}
}
@media (max-width: 400px) {
#onboarding-push-notifications {
.cta-buttons {
float: none;
bottom: 0;
position: absolute;
}
}
}
@media (max-height: 540px) {
#onboarding-push-notifications {
#cta {
margin-bottom: 0;
}
.cta-buttons {
float: left;
position: relative;
}
}
}
@media (min-width: 450px) {
#onboarding-push-notifications {
#cta {
height: 26rem;
}
#cta-buttons {
@extend %cta-buttons;
height: 210px;
}
}

28
src/sass/views/onboarding/onboard-tour.scss
View file

@ -8,26 +8,6 @@
@extend %cta-buttons;
padding-bottom: 100px;
}
.onboarding-topic,
.onboarding-description,
.onboarding-tldr {
margin-left: 3rem;
margin-right: 3rem;
}
.onboarding-topic {
font-size: 24px;
margin-top: .5rem;
}
.onboarding-description {
margin-top: 1rem;
font-size: 16px;
color: rgba(255,255,255,0.5);
}
.onboarding-tldr {
font-size: 18px;
margin-top: 1rem;
margin-bottom: 1em;
}
#onboarding-illustration-currency-exchange-rate {
background-color: $soft-blue;
border-radius: $button-border-radius;
@ -41,4 +21,12 @@
width: 140px;
z-index: 1;
}
.swiper-pagination {
&-bullet {
background: $soft-blue;
&-active {
background: $soft-blue;
}
}
}
}

82
src/sass/views/onboarding/onboarding.scss
View file

@ -1,5 +1,6 @@
.onboarding {
background: #1e3186;
color: #fff;
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
height: 100%;
text-align: center;
@ -10,71 +11,40 @@
button {
color: #fff;
}
.secondary-buttons {
button {
color: rgba(255, 255, 255, .5);
}
}
}
ion-content {
height: 100%;
.scroll{
height: 100%;
}
color: #fff;
h2, h3{color:#fff;}
h2 {
font-size: 1.4rem;
}
p {
&.tagline {
color: rgba(255, 255, 255, .5);
}
}
#cta {
background-size: contain;
width: 100%;
clear: both;
height: 23rem;
margin-bottom: -3rem;
background-position: center;
background-repeat: no-repeat;
img {
height: 16rem;
}
}
button {
color:#fff;
}
@media (min-width: 450px){
p{
font-size: 1.1rem;
line-height: 1.6;
}
}
}
.swiper-pagination {
&-bullet {
background: $soft-blue;
&-active {
background: $soft-blue;
}
}
.onboarding-topic,
.onboarding-description,
.onboarding-tldr {
margin-left: 3rem;
margin-right: 3rem;
}
.onboarding-topic {
font-size: 24px;
margin-top: .5rem;
line-height: 1.3;
}
.onboarding-description {
margin-top: 1rem;
font-size: 16px;
color: rgba(255,255,255,0.5);
line-height: 1.5;
}
.onboarding-tldr {
font-size: 18px;
margin-top: 1rem;
margin-bottom: 1em;
line-height: 1.3;
}
}
@media (min-width: 415px){
.onboarding{
ion-content{
h2{
font-size: 2rem;
}
p{
font-size: 1.4rem;
line-height: 1.6;
}
}
}
//
}
%cta-buttons {
@ -116,4 +86,8 @@
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-control.svg);
}
&-notifications {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-push-notifications.svg);
}
}