mirror of https://github.com/BTCPrivate/copay.git
design(disclaimer): start polishing disclaimer view
This commit is contained in:
parent
926e80fcea
commit
4660683204
|
@ -1,6 +1,21 @@
|
||||||
#onboarding-disclaimer {
|
#onboarding-disclaimer {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
&-container {
|
||||||
|
max-width: 450px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
height: calc(100vh - 210px);
|
||||||
|
}
|
||||||
|
#disclaimer-topic {
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
#disclaimer-description {
|
||||||
|
margin: 1rem 1rem 2rem;
|
||||||
|
}
|
||||||
ion-content{
|
ion-content{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
&.has-header{
|
&.has-header{
|
||||||
|
@ -29,6 +44,7 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
.checkbox .checkbox-icon:before {
|
.checkbox .checkbox-icon:before {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
|
@ -46,13 +62,8 @@
|
||||||
.checkbox input:checked:after,
|
.checkbox input:checked:after,
|
||||||
input:checked + .checkbox-icon:after {
|
input:checked + .checkbox-icon:after {
|
||||||
border-color: rgb(19, 229, 182);
|
border-color: rgb(19, 229, 182);
|
||||||
top:20%;
|
top: 4px;
|
||||||
left:11%;
|
left: 5px;
|
||||||
@media (min-width:450px){
|
|
||||||
&{
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.item-content {
|
.item-content {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
@ -71,7 +82,7 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&.header-present{
|
&.header-present{
|
||||||
bottom:16px;
|
bottom: 38px;
|
||||||
}
|
}
|
||||||
&-content{
|
&-content{
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
@ -87,6 +98,7 @@
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
color:rgb(58,58,58);
|
color:rgb(58,58,58);
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
@media (min-width:450px){
|
@media (min-width:450px){
|
||||||
p{
|
p{
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
.checkbox .checkbox-icon:before {
|
.checkbox .checkbox-icon:before {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
|
|
|
@ -8,23 +8,23 @@
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
|
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
|
||||||
<div class="row text-center">
|
<div id="onboarding-disclaimer-container">
|
||||||
<h3 translate class="col-75 col">Almost done! Let's review</h3>
|
<div class="onboarding-topic" id="disclaimer-topic">Almost done! Let's review.</div>
|
||||||
</div>
|
<div class="onboarding-description" id="disclaimer-description">Bitcoin is different – it cannot be safely held with a bank or web service.</div>
|
||||||
<div class="row text-center tag">
|
|
||||||
<p translate class="col col-75">
|
|
||||||
Bitcoin is different - it cannot be safely held with a bank or web service
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-checkbox ng-model="accept1"><span translate>I understand my funds are held securely on this device, not by a company.</span></ion-checkbox>
|
<ion-checkbox ng-model="accept1">
|
||||||
<ion-checkbox ng-model="accept2"><span translate>I understand if this app moved to another device or deleted, my bitcoin can only be recovered with the backup phrase</span></ion-checkbox>
|
<span translate>I understand that my funds are held securely on this device, not by a company.</span>
|
||||||
|
</ion-checkbox>
|
||||||
|
<ion-checkbox ng-model="accept2">
|
||||||
|
<span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span>
|
||||||
|
</ion-checkbox>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
</div>
|
||||||
<div id="agree-to-terms" ng-if="accept1 && accept2" ng-class="{'header-present': backedUp == 'false'}">
|
<div id="agree-to-terms" ng-if="accept1 && accept2" ng-class="{'header-present': backedUp == 'false'}">
|
||||||
<div id="agree-to-terms-content" class="center-block">
|
<div id="agree-to-terms-content" class="center-block">
|
||||||
<ion-checkbox ng-model="terms.accept3"></ion-checkbox>
|
<ion-checkbox ng-model="terms.accept3"></ion-checkbox>
|
||||||
<p translate>I have read, understood, and agree with the <a ng-click="openTermsModal()" translate>Terms of use</a>.</p>
|
<p translate>I have read, understood, and agree to the <a ng-click="openTermsModal()" translate>Terms of Use</a>.</p>
|
||||||
<button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
<button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
Loading…
Reference in New Issue