mirror of https://github.com/BTCPrivate/copay.git
design(onboarding): polish backup warning screen and screenshot warning modal
This commit is contained in:
parent
550d1c0630
commit
6dcf78256e
|
@ -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 */
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue