design(onboarding): polish backup warning screen and screenshot warning modal

This commit is contained in:
Jason Dreyzehner 2016-10-06 22:42:45 -04:00
commit 6dcf78256e
6 changed files with 50 additions and 104 deletions

View file

@ -1,5 +1,5 @@
<ion-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
<ion-nav-bar class="bar-royal">
<ion-nav-bar>
<ion-nav-buttons side="primary">
<button class="button button-back button-clear" ng-click="goBack()">
<i class="icon ion-ios-arrow-thin-left"></i>
@ -7,26 +7,12 @@
</ion-nav-buttons>
</ion-nav-bar>
<ion-content scroll="false">
<div class="row text-center">
<h3 translate class="col col-80">
Are you being watched?
</h3>
</div>
<div class="row text-center">
<p class="col col-75 tagline">
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
</p>
</div>
<div class="row">
<img src="img/backup-warning.svg" class="col col-60 warning-image">
</div>
<div class="row text-center">
<p class="col col-60">
Anyone with your backup phrase can access or spend your bitcoin.
</p>
</div>
<div class="cta-buttons">
<button class="button button-block button-primary col col-75" ng-click="openPopup()" translate>All clear, let's do this</button>
<div class="onboarding-topic">Are you being watched?</div>
<div class="onboarding-description">Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</div>
<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>
</div>
</ion-content>
</ion-view>

View file

@ -1,15 +1,12 @@
<div id="screenshot-warning-modal" class="popup-modal">
<div class="popup-modal-header-success">
<div class="popup-modal-header-img"></div>
<div class="popup-modal-header popup-modal-header-warning">
<div class="popup-modal-header-img-warning 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>Screenshots are <br /> not secure</h5>
<p 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.</p>
<button
class="button button-clear expand"
ng-click="close()"
translate>I Understand
<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>
</div>