mirror of https://github.com/BTCPrivate/copay.git
design(backup): polish backup flow (via onboarding process)
This commit is contained in:
Jason Dreyzehner
parent
6dcf78256e
commit
926e80fcea
|
|
@ -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',
|
|||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import "variables";
|
||||
@import "ionic";
|
||||
@import "icons";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "mixins/mixins";
|
||||
@import "views/views";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#backup-warning{
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
height: 250px;
|
||||
padding-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,6 @@
|
|||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 4vw;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
}
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
height: 210px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 100px;
|
||||
padding-bottom: 12vh;
|
||||
}
|
||||
#onboarding-illustration-currency-exchange-rate {
|
||||
background-color: $soft-blue;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@
|
|||
}
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 1rem;
|
||||
padding-bottom: 4vw;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,73 +6,68 @@
|
|||
<ion-nav-back-button>
|
||||
</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
<ion-content>
|
||||
<ion-content scroll="false">
|
||||
<div class="ng-hide" ng-show="deleted">
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75 center-block">
|
||||
You can still export it from Advanced > Export.
|
||||
</p>
|
||||
</div>
|
||||
<div class="phrase-unavailable" translate>Wallet recovery phrase not available.</div>
|
||||
<div class="phrase-unavailable-instructions" translate>You can still export it from Advanced > Export.</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 1
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<div id="wallet-backup-phrase-step-1" class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<div class="initial-prompt" translate>Please carefully write down this phrase.</div>
|
||||
<div class="backup-phrase" ng-class="{'enable_text_select': wallet.network == 'testnet'}">
|
||||
<span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">　</span> </span>
|
||||
<div class="backup-phrase-content">
|
||||
<span class="backup-phrase-content-word-readonly" ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">　</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-70" translate>
|
||||
Please carefully write down this phrase
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center" ng-show="mnemonicHasPassphrase">
|
||||
<p class="bold-text col col-80 center-block">
|
||||
<span translate>
|
||||
<div class="password-required" ng-show="mnemonicHasPassphrase" translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-block button-positive" ng-click="goToStep(2);" translate>I've written it down
|
||||
</button>
|
||||
<div class="tldr-prompt" translate>We'll confirm on the next screen.</div>
|
||||
<button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-standard button-primary" ng-click="goToStep(2);" translate>I've written it down</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 2
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 2">
|
||||
<div id="wallet-backup-phrase-step-2" class="ng-hide" ng-show="step == 2">
|
||||
<div class="confirmation-prompt" translate>Let's verify your backup phrase.</div>
|
||||
<div class="backup-phrase">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
<div class="backup-phrase-content">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="select-phrase" class="cta-buttons">
|
||||
<div id="select-phrase-content">
|
||||
<div ng-show="!selectComplete" class="tldr-prompt" translate>Please tap each word in the correct order.</div>
|
||||
<div ng-show="selectComplete" class="tldr-prompt" translate>Is this correct?</div>
|
||||
<span ng-show="!selectComplete" ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button select-word" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
<button ng-show="selectComplete" class="button button-standard button-primary" ng-click="goToStep(3);" translate>Confirm</button>
|
||||
<!-- TODO: implement -->
|
||||
<button ng-show="selectComplete" class="button button-standard button-secondary button-clear" ng-click="clearAll();" translate>Clear</button>
|
||||
</div>
|
||||
<div id="select-phrase">
|
||||
<p translate>
|
||||
Please tap each word in the correct order.
|
||||
</p>
|
||||
<span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button select-word" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
<button ng-show="selectComplete" id="confirm-phrase" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 3
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 3">
|
||||
<h5 translate>Enter your password</h5>
|
||||
<label class="item item-input item-stacked-label">
|
||||
<span class="input-label" transalate>In order to verify your wallet backup, please type your password:</span>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
<div id="wallet-backup-phrase-step-3" class="ng-hide" ng-show="step == 3">
|
||||
<div class="password-prompt" translate>Enter your password</h5>
|
||||
<label class="item item-input item-stacked-label">
|
||||
<div class="input-label" translate>In order to verify your wallet backup, please type your password.</div>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="onboarding-illustration-backup-warning"></div>
|
||||
<div id="cta-buttons">
|
||||
<div class="onboarding-tldr">Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||
<button class="button button-block button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
<button class="button button-standard button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<div id="backup-confirm-modal" class="popup-modal">
|
||||
<div class="popup-modal-header">
|
||||
<div ng-class="{'popup-modal-header-img-success': !backupError, 'popup-modal-header-img-fail': backupError}" class="popup-modal-header-img"></div>
|
||||
<div class="popup-modal-header popup-modal-header-success">
|
||||
<div class="popup-modal-header-img-success popup-modal-header-img"></div>
|
||||
</div>
|
||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
||||
<div class="text-center" ng-show="!backupError">
|
||||
<h5 translate>Your bitcoin wallet is backed up!</h5>
|
||||
<p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money cannot be recoved with out it.</p>
|
||||
<button
|
||||
class="button button-clear expand"
|
||||
ng-click="closeBackupResultModal()"
|
||||
translate>I Understand
|
||||
</button>
|
||||
</div>
|
||||
<div class="popup-modal-content popup-modal-content-success">
|
||||
<div class="popup-modal-heading" translate>Your bitcoin wallet is backed up!</div>
|
||||
<div class="popup-modal-message" translate>Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recoved without it.</div>
|
||||
<button class="button button-clear" ng-click="closeBackupResultModal()" translate>Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@
|
|||
<div class="popup-modal-content popup-modal-content-warning">
|
||||
<div>
|
||||
<div class="popup-modal-heading" translate>Screenshots are not secure</div>
|
||||
<div class="popup-modal-message"> If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</div>
|
||||
<button class="button button-clear" ng-click="close()" translate>I understand
|
||||
</button>
|
||||
<div class="popup-modal-message" translate>If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</div>
|
||||
<button class="button button-clear" ng-click="close()" translate>I understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<div class="cta-buttons">
|
||||
<i class="ion-ios-arrow-thin-down" id="arrow-down"></i>
|
||||
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
|
||||
<button class="button button-block button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
<button class="button button-block button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
<button class="button button-standard button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
<button class="button button-standard button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<input type="email" name="email" ng-model="email" placeholder="email address" required></input>
|
||||
</label>
|
||||
<ion-checkbox ng-model="data.accept"><span translate>Get news and updates from BitPay</span></ion-checkbox>
|
||||
<button class="button button-block button-primary" disabled>
|
||||
<button class="button button-standard button-primary" disabled>
|
||||
Continue →
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="onboarding-description" translate>Would you like to receive push notifications about payments?</div>
|
||||
<div class="onboarding-illustration-notifications"></div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-block button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-block button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
<button class="button button-standard button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-standard button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="onboarding-illustration-secure"></div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>Just scan the code to pay.</div>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||
Got it →
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>The exchange rate changes with the market.</div>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||
Makes sense →
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<div class="onboarding-illustration-control"></div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>Not even BitPay can access it.</div>
|
||||
<button class="button button-block button-primary" ng-click="createDefaultWallet()">
|
||||
<button class="button button-standard button-primary" ng-click="createDefaultWallet()">
|
||||
Create bitcoin wallet
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<p id="lead" translate>Take control of your money,<br />get started with bitcoin.</p>
|
||||
</div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-block button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||
<button class="button button-standard button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
<button class="button button-standard button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
Loading…
Reference in New Issue