BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
parent 550d1c0630
commit 6dcf78256e
6 changed files with 50 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/sass/variables.scss
View File

@ -5,12 +5,15 @@ $fill-blue: #D5DFFF;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$success-green: #17ae8c;
$warning-orange: #ffa500;
$dark-gray: #445;
$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);
$visible-radius: 6px;
$unmistakable-radius: 12px;
/* Set ionic variables */

54
src/sass/views/backup-warning.scss
View File

@ -1,54 +1,6 @@
#backup-warning{
.warning{
margin:4rem auto 1rem;
height: 11rem;
}
button{
color:#fff;
}
#arrow-down{
font-size: 4.2rem;
}
.cta-buttons{
float:none;
bottom:67px;
position: absolute;
width:100%;
button{
max-width: 400px;
}
}
}
@media (max-width: 400px){
#backup-warning{
.warning{
margin: 2rem auto 1rem;
height: 8rem;
}
h3{
font-size:1.3rem;
}
p{
font-size:.9rem;
max-width: 80%;
flex: 0 0 80%;
}
.warning-image{
height: 11rem;
}
.cta-buttons{
float:none;
bottom:65px;
position: absolute;
}
}
}
@media (max-height: 540px){
#backup-warning{
.cta-buttons{
float:left;
position: relative;
}
#cta-buttons {
@extend %cta-buttons;
height: 250px;
}
}

47
src/sass/views/includes/modals/modals.scss
View File

@ -7,16 +7,17 @@
width: 90%;
max-width: 350px;
transform: translate(-50%, -50%);
border-radius: .25rem;
border-radius: $unmistakable-radius;
text-align: center;
&-header {
&-success {
background: rgb(1, 209, 162);
background: $success-green;
}
&-warning {
background: orange;
background: $warning-orange;
}
padding: 1rem;
border-radius: .25rem .25rem 0 0;
padding: 2rem;
border-radius: $unmistakable-radius $unmistakable-radius 0 0;
min-height: 120px;
&-img{
height: 6rem;
@ -39,28 +40,30 @@
}
}
&-content {
padding: .5rem .8rem;
h5,p{
margin:0 0 1rem;
}
h5 {
color: rgb(74, 74, 74);
font-weight: bold;
font-size: 1.3rem;
margin-top:1rem;
}
p{
font-weight: 200;
}
padding: 1rem 2rem;
}
&-heading {
margin:0 0 1rem;
color: $dark-gray;
font-weight: bold;
font-size: 1.3rem;
margin-top:1rem;
}
&-message {
color: $mid-gray;
font-weight: 200;
}
.button {
margin-top: 1rem;
}
&-content-success {
button{
color:rgb(23, 174, 140) !important;
.button {
color: $success-green !important;
}
}
&-content-warning {
button{
color: orange !important;
.button {
color: $warning-orange !important;
}
}
}

5
src/sass/views/onboarding/onboarding.scss
View File

@ -72,6 +72,7 @@
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
.onboarding-illustration {
&-secure {
@ -90,4 +91,8 @@
@extend %onboarding-illustration;
background-image: url(../img/onboarding-push-notifications.svg);
}
&-backup-warning {
@extend %onboarding-illustration;
background-image: url(../img/backup-warning.svg);
}
}

28
www/views/backupWarning.html
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>

17
www/views/includes/screenshotWarningModal.html
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>