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;
|
$subtle-gray: #f5f5f5;
|
||||||
$roboto: "Roboto", sans-serif;
|
$roboto: "Roboto", sans-serif;
|
||||||
$roboto-light: "Roboto-Light", sans-serif-light;
|
$roboto-light: "Roboto-Light", sans-serif-light;
|
||||||
|
$success-green: #17ae8c;
|
||||||
|
$warning-orange: #ffa500;
|
||||||
$dark-gray: #445;
|
$dark-gray: #445;
|
||||||
$mid-gray: #667;
|
$mid-gray: #667;
|
||||||
$light-gray: #9b9bab;
|
$light-gray: #9b9bab;
|
||||||
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
$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);
|
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||||
$visible-radius: 6px;
|
$visible-radius: 6px;
|
||||||
|
$unmistakable-radius: 12px;
|
||||||
|
|
||||||
/* Set ionic variables */
|
/* Set ionic variables */
|
||||||
|
|
||||||
|
|
|
@ -1,54 +1,6 @@
|
||||||
#backup-warning{
|
#backup-warning{
|
||||||
.warning{
|
#cta-buttons {
|
||||||
margin:4rem auto 1rem;
|
@extend %cta-buttons;
|
||||||
height: 11rem;
|
height: 250px;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,16 +7,17 @@
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
border-radius: .25rem;
|
border-radius: $unmistakable-radius;
|
||||||
|
text-align: center;
|
||||||
&-header {
|
&-header {
|
||||||
&-success {
|
&-success {
|
||||||
background: rgb(1, 209, 162);
|
background: $success-green;
|
||||||
}
|
}
|
||||||
&-warning {
|
&-warning {
|
||||||
background: orange;
|
background: $warning-orange;
|
||||||
}
|
}
|
||||||
padding: 1rem;
|
padding: 2rem;
|
||||||
border-radius: .25rem .25rem 0 0;
|
border-radius: $unmistakable-radius $unmistakable-radius 0 0;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
&-img{
|
&-img{
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
|
@ -39,28 +40,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-content {
|
&-content {
|
||||||
padding: .5rem .8rem;
|
padding: 1rem 2rem;
|
||||||
h5,p{
|
|
||||||
margin:0 0 1rem;
|
|
||||||
}
|
}
|
||||||
h5 {
|
&-heading {
|
||||||
color: rgb(74, 74, 74);
|
margin:0 0 1rem;
|
||||||
|
color: $dark-gray;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
margin-top:1rem;
|
margin-top:1rem;
|
||||||
}
|
}
|
||||||
p{
|
&-message {
|
||||||
|
color: $mid-gray;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
.button {
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
&-content-success {
|
&-content-success {
|
||||||
button{
|
.button {
|
||||||
color:rgb(23, 174, 140) !important;
|
color: $success-green !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-content-warning {
|
&-content-warning {
|
||||||
button{
|
.button {
|
||||||
color: orange !important;
|
color: $warning-orange !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -72,6 +72,7 @@
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.onboarding-illustration {
|
.onboarding-illustration {
|
||||||
&-secure {
|
&-secure {
|
||||||
|
@ -90,4 +91,8 @@
|
||||||
@extend %onboarding-illustration;
|
@extend %onboarding-illustration;
|
||||||
background-image: url(../img/onboarding-push-notifications.svg);
|
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-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar>
|
||||||
<ion-nav-buttons side="primary">
|
<ion-nav-buttons side="primary">
|
||||||
<button class="button button-back button-clear" ng-click="goBack()">
|
<button class="button button-back button-clear" ng-click="goBack()">
|
||||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||||
|
@ -7,26 +7,12 @@
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content scroll="false">
|
<ion-content scroll="false">
|
||||||
<div class="row text-center">
|
<div class="onboarding-topic">Are you being watched?</div>
|
||||||
<h3 translate class="col col-80">
|
<div class="onboarding-description">Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</div>
|
||||||
Are you being watched?
|
<div class="onboarding-illustration-backup-warning"></div>
|
||||||
</h3>
|
<div id="cta-buttons">
|
||||||
</div>
|
<div class="onboarding-tldr">Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||||
<div class="row text-center">
|
<button class="button button-block button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||||
<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>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
@ -1,15 +1,12 @@
|
||||||
<div id="screenshot-warning-modal" class="popup-modal">
|
<div id="screenshot-warning-modal" class="popup-modal">
|
||||||
<div class="popup-modal-header-success">
|
<div class="popup-modal-header popup-modal-header-warning">
|
||||||
<div class="popup-modal-header-img"></div>
|
<div class="popup-modal-header-img-warning popup-modal-header-img"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
<div class="popup-modal-content popup-modal-content-warning">
|
||||||
<div class="text-center" ng-show="!backupError">
|
<div>
|
||||||
<h5 translate>Screenshots are <br /> not secure</h5>
|
<div class="popup-modal-heading" translate>Screenshots are not secure</div>
|
||||||
<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>
|
<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
|
<button class="button button-clear" ng-click="close()" translate>I understand
|
||||||
class="button button-clear expand"
|
|
||||||
ng-click="close()"
|
|
||||||
translate>I Understand
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue