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

design(backup): polish backup flow (via onboarding process)

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-07 02:10:30 -04:00
commit 926e80fcea
22 changed files with 237 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/js/controllers/backup.js
View file

@ -72,8 +72,8 @@ angular.module('copayApp.controllers').controller('backupController',
var showBackupResult = function() {
if ($scope.backupError) {
var title = gettextCatalog.getString('uh oh...');
var message = gettextCatalog.getString("It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money Please review your backup and try again");
var title = gettextCatalog.getString('Uh oh...');
var message = gettextCatalog.getString("It's important that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money. Please review your backup and try again.");
popupService.showAlert(title, message, function() {
$scope.goToStep(1);
})
@ -205,4 +205,4 @@ angular.module('copayApp.controllers').controller('backupController',
});
});
});
});

58
src/sass/buttons.scss Normal file
View file

@ -0,0 +1,58 @@
// white on $positive
$button-primary-bg: $positive;
$button-primary-text: #fff;
$button-primary-border: transparent;
$button-primary-active-bg: darken($positive, 5%);
$button-primary-active-border: transparent;
//white on translucent-white
$button-secondary-onboarding-bg: rgba($light-gray, 0.1); // rgba(215, 215, 215, 0.1);
$button-secondary-onboarding-text: #fff;
$button-secondary-onboarding-border: transparent;
$button-secondary-onboarding-active-bg: rgba($light-gray, 0.2); // rgba(215, 215, 215, 0.2);
$button-secondary-onboarding-active-border: transparent;
//dark-gray on translucent-gray
$button-secondary-bg: $subtle-gray;
$button-secondary-text: $dark-gray;
$button-secondary-border: transparent;
$button-secondary-active-bg: darken($subtle-gray, 5%);
$button-secondary-active-border: transparent;
%button-standard {
width: 85%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
}
.button,
.onboarding .button {
&.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
@include button-clear($button-primary-bg);
@include button-outline($button-primary-bg);
}
&.button-primary,
&.button-secondary {
&.button-standard {
@extend %button-standard;
}
}
}
.onboarding .button {
&.button-secondary {
@include button-style($button-secondary-onboarding-bg, $button-secondary-onboarding-border, $button-secondary-onboarding-active-bg, $button-secondary-onboarding-active-border, $button-secondary-onboarding-text);
@include button-clear($button-secondary-onboarding-text);
@include button-outline($button-secondary-onboarding-text);
}
}
.button {
&.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
@include button-clear($button-secondary-text);
@include button-outline($button-secondary-text);
}
}

1
src/sass/main.scss
View file

@ -2,6 +2,7 @@
@import "variables";
@import "ionic";
@import "icons";
@import "buttons";
@import "forms";
@import "mixins/mixins";
@import "views/views";

3
src/sass/variables.scss
View file

@ -2,7 +2,7 @@
$royal: #1e3186;
$soft-blue: #647ce8;
$fill-blue: #D5DFFF;
$subtle-gray: #f5f5f5;
$subtle-gray: #f7f7f7;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$success-green: #17ae8c;
@ -12,6 +12,7 @@ $mid-gray: #667;
$light-gray: #9b9bab;
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
$subtle-radius: 3px;
$visible-radius: 6px;
$unmistakable-radius: 12px;

2
src/sass/views/backup-warning.scss
View file

@ -1,6 +1,6 @@
#backup-warning{
#cta-buttons {
@extend %cta-buttons;
height: 250px;
padding-bottom: 10vh;
}
}

3
src/sass/views/includes/modals/modals.scss
View file

@ -47,7 +47,8 @@
color: $dark-gray;
font-weight: bold;
font-size: 1.3rem;
margin-top:1rem;
margin-top: 1rem;
line-height: 1.3;
}
&-message {
color: $mid-gray;

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

@ -26,6 +26,6 @@
}
.cta-buttons {
@extend %cta-buttons;
padding-bottom: 10px;
padding-bottom: 4vw;
}
}

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

@ -4,6 +4,6 @@
}
#cta-buttons {
@extend %cta-buttons;
height: 210px;
padding-bottom: 1rem;
}
}

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

@ -6,7 +6,7 @@
}
.cta-buttons {
@extend %cta-buttons;
padding-bottom: 100px;
padding-bottom: 12vh;
}
#onboarding-illustration-currency-exchange-rate {
background-color: $soft-blue;

2
src/sass/views/onboarding/onboard-welcome.scss
View file

@ -31,6 +31,6 @@
}
#cta-buttons {
@extend %cta-buttons;
padding-bottom: 1rem;
padding-bottom: 4vw;
}
}

33
src/sass/views/onboarding/onboarding-buttons.scss
View file

@ -1,33 +0,0 @@
$button-primary-bg: $positive;
$button-primary-text: #fff;
$button-primary-border: transparent;
$button-primary-active-bg: darken($positive, 5%);
$button-primary-active-border: transparent;
$button-secondary-bg: rgba(215, 215, 215, 0.1);
$button-secondary-text: #fff;
$button-secondary-border: transparent;
$button-secondary-active-bg: rgba(215, 215, 215, 0.2);
$button-secondary-active-border: transparent;
.onboarding .button {
&.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
@include button-clear($button-primary-bg);
@include button-outline($button-primary-bg);
}
&.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
@include button-clear($button-secondary-text);
@include button-outline($button-secondary-text);
}
&.button-primary,
&.button-secondary {
&.button-block {
width: 85%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
}
}

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

@ -12,12 +12,6 @@
color: #fff;
}
}
ion-content {
height: 100%;
.scroll{
height: 100%;
}
}
.onboarding-topic,
.onboarding-description,
.onboarding-tldr {
@ -43,10 +37,6 @@
}
}
@media (min-width: 415px){
//
}
%cta-buttons {
position: absolute;
bottom: 0;
@ -54,7 +44,6 @@
}
@import "terms-of-use";
@import "onboarding-buttons";
@import "onboard-welcome";
@import "onboard-tour";
@import "onboard-collect-email";

236
src/sass/views/wallet-backup-phrase.scss
View file

@ -1,140 +1,112 @@
#wallet-backup-phrase {
&,
& ion-content,
& ion-content .scroll {
height: 100%;
overflow-y: hidden;
#wallet-backup-phrase {
.bar.bar-royal .title {
font-size: 1rem;
}
background: #fff;
text-align: center;
.backup-phrase {
background-color: $subtle-gray;
padding: 12px;
border: 2px dashed darken($subtle-gray, 10%);
border-radius: $subtle-radius;
color: #2b2b2b;
text-align: center;
max-width: 500px;
min-height: 10rem;
width: 85%;
display: flex;
justify-content: center;
align-items: center;
&-content {
font-weight: bold;
line-height: 2;
font-size: 16px;
letter-spacing: 1px;
@media (min-width: 575px) {
font-size: 18px;
padding: 3rem;
}
.bar.bar-royal {
.title {
font-size: 1rem;
}
}
background: #fff;
.backup-phrase {
background: rgba(246, 246, 246, 0.87);
padding: .5rem .5rem 1.7rem;
border: 2px dashed rgb(206, 206, 206);
width: 95%;
margin: 1rem auto;
color: rgb(43, 43, 43);
text-align: center;
span {
line-height: 2rem;
font-weight: bold;
max-width: 400px;
color: rgb(43, 43, 43);
}
}
.bold-text {
font-weight: bold !important;
}
p {
color: rgb(58, 58, 58);
font-weight: 200;
}
.cta-buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 45px;
button {
max-width: 400px;
}
}
.select-word {
background: #fff;
box-shadow: $hovering-box-shadow;
margin: .1rem 0;
display: inline-block;
padding: 0 5px;
}
#select-phrase {
background: rgba(246, 246, 246, 0.87);
width: 100%;
text-align: center;
position: absolute;
bottom: 45px;
padding-bottom: 20px;
padding: .5rem .5rem .9rem;
p {
font-weight: bold;
font-weight: bold;
padding-top: .7rem;
margin-bottom: 0.3rem;
float: left;
width: 100%;
}
.select-word {
&.button[disabled] {
background: transparent !important;
box-shadow: none !important;
color: transparent;
border: 1px solid rgb(211, 211, 211);
}
}
#confirm-phrase {
margin: 5px auto 0;
}
}
ion-content.has-tabs{
.cta-buttons{
bottom:110px;
}
.cta-buttons, #select-phrase{
bottom:110px;
&-word-readonly {
padding: 0 1px;
@media (min-width: 575px) {
padding: 0 6px;
}
}
}
}
&-step-1,
&-step-2 {
display: flex;
flex-direction: column;
height: 70%;
width: 100%;
justify-content: center;
align-items: center;
}
&-step-1 {
height: 70%;
}
&-step-2 {
height: 60%
}
&-step-3 {
@media (min-width : 320px) and (max-width : 415px) and (orientation : portrait), (min-width : 650px) and (max-width : 770px) and (orientation : portrait){
#wallet-backup-phrase{
.cta-buttons,#select-phrase{
bottom: 64px;
}
}
.initial-prompt,
.confirmation-prompt,
.tldr-prompt {
color: $dark-gray;
padding-bottom: 1.5rem;
}
.initial-prompt,
.confirmation-prompt {
padding-top: 1.5rem;
}
.tldr-prompt {
font-weight: bold;
}
.cta-buttons {
@extend %cta-buttons;
padding-bottom: 5vh;
}
.select-word {
background: #fff;
box-shadow: $subtle-box-shadow;
display: inline-block;
margin: 3px 0;
min-height: 38px;
line-height: 33px;
padding: 0 8px;
@media (min-width: 400px) {
margin: 4px 3px;
padding: 0 16px;
}
}
#select-phrase {
background: $subtle-gray;
padding: 5% 0;
.select-word {
&.button[disabled] {
background: transparent !important;
box-shadow: none !important;
color: transparent;
border: 1px solid rgb(211, 211, 211);
}
}
@media (max-width: 400px) {
#wallet-backup-phrase {
ion-content {
h2 {
font-size: 1.2rem;
}
p,
h2,
h3 {
max-width: 600px !important;
}
button {
max-width: 400px !important;
}
}
}
&-content {
max-width: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
@media (max-height: 560px) {
#wallet-backup-phrase {
&,
& ion-content,
& ion-content .scroll {
overflow-y:visible;
}
#select-phrase {
float: left;
position: relative;
}
.backup-phrase {
margin-bottom: 5rem;
}
}
}
@media (max-height: 379px) {
#wallet-backup-phrase {
.cta-buttons {
float: left;
position: relative;
bottom: 0;
}
}
}
}
ion-content.has-tabs{
// TODO: review
.cta-buttons{
bottom:110px;
}
.cta-buttons, #select-phrase{
bottom:110px;
}
}
}