mirror of https://github.com/BTCPrivate/copay.git
Fix onboarding. Clear styling
This commit is contained in:
Gustavo Maximiliano Cortez
parent
21d7647f0a
commit
7455440abf
|
|
@ -1,47 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="247px" height="247px" viewBox="0 0 247 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>tour-control</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-1">
|
||||
<stop stop-color="#192C3A" offset="0%"></stop>
|
||||
<stop stop-color="#192C3A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="tour-control">
|
||||
<g id="Onboarding">
|
||||
<g id="0.2.3---Tour-3">
|
||||
<g id="bg-3">
|
||||
<path d="M123.5,247 C191.707167,247 247,191.707167 247,123.5 C247,55.2928334 191.707167,1.42108547e-14 123.5,1.42108547e-14 C55.2928334,1.42108547e-14 1.42108547e-14,55.2928334 1.42108547e-14,123.5 C1.42108547e-14,191.707167 55.2928334,247 123.5,247 Z" id="Oval-2" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.300000012"></path>
|
||||
<rect id="Combined-Shape" stroke="#707D89" stroke-width="2" fill-opacity="0.65" fill="#192C3A" fill-rule="nonzero" x="63" y="24" width="99.8310062" height="183.875349" rx="8"></rect>
|
||||
<path d="M63.5199532,180.634556 L162.311053,180.634556" id="Line" stroke="#707D89" stroke-width="2" stroke-linecap="square"></path>
|
||||
<path d="M104.076299,194.254952 L122.794613,194.254952" id="Line" stroke="#707D89" stroke-width="2" stroke-linecap="square"></path>
|
||||
<g id="Group-4" transform="translate(98.000000, 79.000000)" stroke="#FFFFFF">
|
||||
<g id="top-up">
|
||||
<g id="shopping-48px-outline_bitcoin" transform="translate(0.666667, 0.180606)">
|
||||
<g id="Group" transform="translate(0.619048, 0.627502)">
|
||||
<path d="M12.3809524,0 L12.3809524,7.5300202" id="Shape"></path>
|
||||
<path d="M17.3333333,0 L17.3333333,7.5300202" id="Shape"></path>
|
||||
<path d="M12.3809524,47.6901279 L12.3809524,55.2201481" id="Shape"></path>
|
||||
<path d="M17.3333333,47.6901279 L17.3333333,55.2201481" id="Shape"></path>
|
||||
<path d="M0,47.6901279 L7.42857143,47.6901279" id="Shape-Copy"></path>
|
||||
<path d="M0,7.5300202 L7.42857143,7.5300202" id="Shape-Copy-2"></path>
|
||||
<path d="M7.42857143,25.1000673 L7.42857143,7.5300202 L21.8042328,7.5300202 C26.9010582,7.5300202 30.952381,11.4205306 30.952381,16.3150438 C30.952381,21.2095569 26.9010582,25.1000673 21.8042328,25.1000673" id="Shape"></path>
|
||||
<path d="M7.42857143,47.6901279 L7.42857143,25.1000673 L23.6785714,25.1000673 C29.0952381,25.1000673 33.4285714,30.1200808 33.4285714,36.3950976 C33.4285714,42.6701145 29.0952381,47.6901279 23.6785714,47.6901279 L7.42857143,47.6901279 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Group-3" transform="translate(125.000000, 122.000000)" stroke="#12E5B6" stroke-width="2">
|
||||
<rect id="Rectangle-path" fill="#192C3A" fill-rule="nonzero" x="0.00547760651" y="37.6483369" width="74.7600358" height="65.7214967" rx="4"></rect>
|
||||
<path d="M18.6954866,37.6483369 L18.6954866,18.8707664 C18.6954866,8.54310266 27.1059906,0.0931959432 37.3854955,0.0931959432 L37.3854955,0.0931959432 C47.6650004,0.0931959432 56.0755044,8.54310266 56.0755044,18.8707664 L56.0755044,37.6483369" id="Shape"></path>
|
||||
<path d="M36.6300769,65.8146926 L36.6300769,75.2034779" id="Shape" fill="#F9F9F9" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,33 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="377px" height="247px" viewBox="0 0 377 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>tour-currency</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50.0034413%" y1="0.00943319838%" x2="50.0034413%" y2="89.4694332%" id="linearGradient-1">
|
||||
<stop stop-color="#192C3A" offset="0%"></stop>
|
||||
<stop stop-color="#192C3A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="100.020333%" x2="50%" y2="0.0203333333%" id="linearGradient-2">
|
||||
<stop stop-color="#192C3A" offset="0%"></stop>
|
||||
<stop stop-color="#192C3A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="tour-currency" transform="translate(-1.000000, 0.000000)">
|
||||
<path d="M189.5,247 C257.7,247 313,191.7 313,123.5 C313,55.3 257.7,0 189.5,0 C121.3,0 66,55.3 66,123.5 C66,191.7 121.3,247 189.5,247 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.3"></path>
|
||||
<polygon id="Shape" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.3" points="56.3 127.3 99.7 97.8 142.1 119.9 186.6 80.7 224.9 80.7 249.7 47.5 282.8 67.2 323.2 56.1 377 35 377 185 152.1 185 2.4 185 2 133.5"></polygon>
|
||||
<g id="Group" opacity="0.3" transform="translate(76.000000, 61.000000)" fill-rule="nonzero" fill="#13E5B6">
|
||||
<path d="M226.2,124 L225.7,124 L225.7,120 L226.2,120 L226.2,124 Z M226.2,116 L225.7,116 L225.7,112 L226.2,112 L226.2,116 Z M226.2,108 L225.7,108 L225.7,104 L226.2,104 L226.2,108 Z M226.2,100 L225.7,100 L225.7,96 L226.2,96 L226.2,100 Z M226.2,92 L225.7,92 L225.7,88 L226.2,88 L226.2,92 Z M226.2,84 L225.7,84 L225.7,80 L226.2,80 L226.2,84 Z M226.2,76 L225.7,76 L225.7,72 L226.2,72 L226.2,76 Z M226.2,68 L225.7,68 L225.7,64 L226.2,64 L226.2,68 Z M226.2,60 L225.7,60 L225.7,56 L226.2,56 L226.2,60 Z M226.2,52 L225.7,52 L225.7,48 L226.2,48 L226.2,52 Z M226.2,44 L225.7,44 L225.7,40 L226.2,40 L226.2,44 Z M226.2,36 L225.7,36 L225.7,32 L226.2,32 L226.2,36 Z M226.2,28 L225.7,28 L225.7,24 L226.2,24 L226.2,28 Z M226.2,20 L225.7,20 L225.7,16 L226.2,16 L226.2,20 Z M226.2,12 L225.7,12 L225.7,8 L226.2,8 L226.2,12 Z M226.2,4 L225.7,4 L225.7,0 L226.2,0 L226.2,4 Z" id="Shape"></path>
|
||||
<path d="M151.2,124 L150.7,124 L150.7,120 L151.2,120 L151.2,124 Z M151.2,116 L150.7,116 L150.7,112 L151.2,112 L151.2,116 Z M151.2,108 L150.7,108 L150.7,104 L151.2,104 L151.2,108 Z M151.2,100 L150.7,100 L150.7,96 L151.2,96 L151.2,100 Z M151.2,92 L150.7,92 L150.7,88 L151.2,88 L151.2,92 Z M151.2,84 L150.7,84 L150.7,80 L151.2,80 L151.2,84 Z M151.2,76 L150.7,76 L150.7,72 L151.2,72 L151.2,76 Z M151.2,68 L150.7,68 L150.7,64 L151.2,64 L151.2,68 Z M151.2,60 L150.7,60 L150.7,56 L151.2,56 L151.2,60 Z M151.2,52 L150.7,52 L150.7,48 L151.2,48 L151.2,52 Z M151.2,44 L150.7,44 L150.7,40 L151.2,40 L151.2,44 Z M151.2,36 L150.7,36 L150.7,32 L151.2,32 L151.2,36 Z M151.2,28 L150.7,28 L150.7,24 L151.2,24 L151.2,28 Z M151.2,20 L150.7,20 L150.7,16.8 L151.2,16.8 L151.2,20 Z" id="Shape"></path>
|
||||
<path d="M76.2,124 L75.7,124 L75.7,120 L76.2,120 L76.2,124 Z M76.2,116 L75.7,116 L75.7,112 L76.2,112 L76.2,116 Z M76.2,108 L75.7,108 L75.7,104 L76.2,104 L76.2,108 Z M76.2,100 L75.7,100 L75.7,96 L76.2,96 L76.2,100 Z M76.2,92 L75.7,92 L75.7,88 L76.2,88 L76.2,92 Z M76.2,84 L75.7,84 L75.7,80 L76.2,80 L76.2,84 Z M76.2,76 L75.7,76 L75.7,72 L76.2,72 L76.2,76 Z M76.2,68 L75.7,68 L75.7,64 L76.2,64 L76.2,68 Z M76.2,60 L75.7,60 L75.7,56 L76.2,56 L76.2,60 Z M76.2,52 L75.7,52 L75.7,50 L76.2,50 L76.2,52 Z" id="Shape"></path>
|
||||
<path d="M1.2,124 L0.7,124 L0.7,120 L1.2,120 L1.2,124 Z M1.2,116 L0.7,116 L0.7,112 L1.2,112 L1.2,116 Z M1.2,108 L0.7,108 L0.7,104 L1.2,104 L1.2,108 Z M1.2,100 L0.7,100 L0.7,96 L1.2,96 L1.2,100 Z M1.2,92 L0.7,92 L0.7,88 L1.2,88 L1.2,92 Z M1.2,84 L0.7,84 L0.7,80 L1.2,80 L1.2,84 Z M1.2,76 L0.7,76 L0.7,72 L1.2,72 L1.2,76 Z M1.2,68 L0.7,68 L0.7,64 L1.2,64 L1.2,68 Z M1.2,60 L0.7,60 L0.7,56 L1.2,56 L1.2,60 Z" id="Shape"></path>
|
||||
</g>
|
||||
<path d="M2,134.5 C1.5,134.5 1.1,134.1 1,133.6 C0.9,133.1 1.3,132.6 1.9,132.5 L56,126.3 L99.1,97 C99.4,96.8 99.8,96.8 100.1,96.9 L141.9,118.7 L185.9,80 C186.1,79.8 186.3,79.8 186.6,79.8 L224.4,79.8 L248.9,47 C249.2,46.6 249.8,46.5 250.2,46.7 L282.9,66.2 L322.8,55.2 L376.6,34.1 C377.1,33.9 377.7,34.2 377.9,34.7 C378.1,35.2 377.8,35.8 377.3,36 L323.5,57.1 L323.4,57.1 L283,68.2 C282.7,68.3 282.5,68.2 282.2,68.1 L250,48.9 L225.7,81.4 C225.5,81.7 225.2,81.8 224.9,81.8 L187,81.8 L142.8,120.8 C142.5,121.1 142,121.1 141.7,120.9 L99.8,99 L56.9,128.2 C56.8,128.3 56.6,128.3 56.5,128.4 L2.2,134.6 C2.1,134.5 2,134.5 2,134.5 Z" id="Shape" fill="#13E5B6" fill-rule="nonzero"></path>
|
||||
<g id="Group" transform="translate(185.000000, 38.000000)">
|
||||
<path d="M4.5,0.5 L4.5,146.5" id="Line_1_" stroke="#0085FF" stroke-width="2" stroke-linecap="square" opacity="0.64"></path>
|
||||
<circle id="dot" stroke="#FFFFFF" stroke-width="3" fill="#1A2A71" fill-rule="nonzero" cx="4.5" cy="41.5" r="4.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.3 KiB |
|
|
@ -1,39 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="247px" height="247px" viewBox="0 0 247 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>onboarding-tour-phone</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50.0034413%" y1="-0.00291497976%" x2="50.0034413%" y2="75.267085%" id="linearGradient-1">
|
||||
<stop stop-color="#192C3A" offset="0%"></stop>
|
||||
<stop stop-color="#192C3A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="onboarding-tour-phone">
|
||||
<path d="M123.5,247 C191.7,247 247,191.7 247,123.5 C247,55.3 191.7,0 123.5,0 C55.3,0 0,55.3 0,123.5 C0,191.7 55.3,247 123.5,247 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.3"></path>
|
||||
<g id="Group" transform="translate(69.000000, 32.000000)" stroke="#707D89" stroke-width="2">
|
||||
<path d="M8,0 L91.8,0 C96.2,0 99.8,3.6 99.8,8 L99.8,175.9 C99.8,180.3 96.2,183.9 91.8,183.9 L8,183.9 C3.6,183.9 0,180.3 0,175.9 L0,8 C0,3.6 3.6,0 8,0 Z" id="Shape" fill-opacity="0.6548" fill="#192C3A" fill-rule="nonzero"></path>
|
||||
<path d="M0.5,156 L99.3,156" id="Shape" stroke-linecap="square"></path>
|
||||
<path d="M44.1,170.3 L62.8,170.3" id="Shape" stroke-linecap="square"></path>
|
||||
</g>
|
||||
<g id="Group" transform="translate(102.000000, 66.000000)" fill-rule="nonzero" fill="#5BC2A7">
|
||||
<path d="M31.8,0 L0,0 L0,31.8 L31.8,31.8 L31.8,0 L31.8,0 Z M27.3,27.3 L4.6,27.3 L4.6,4.5 L27.3,4.5 L27.3,27.3 L27.3,27.3 Z" id="Shape"></path>
|
||||
<polygon id="Shape" points="65.9 90.9 61.4 90.9 61.4 100 100 100 100 95.5 65.9 95.5"></polygon>
|
||||
<rect id="Rectangle-path" x="9.1" y="9.1" width="13.6" height="13.6"></rect>
|
||||
<path d="M0,100 L31.8,100 L31.8,68.2 L0,68.2 L0,100 L0,100 Z M4.5,72.7 L27.2,72.7 L27.2,95.4 L4.5,95.4 L4.5,72.7 L4.5,72.7 Z" id="Shape"></path>
|
||||
<rect id="Rectangle-path" x="9.1" y="77.3" width="13.6" height="13.6"></rect>
|
||||
<path d="M68.2,0 L68.2,31.8 L100,31.8 L100,0 L68.2,0 L68.2,0 Z M95.5,27.3 L72.8,27.3 L72.8,4.5 L95.5,4.5 L95.5,27.3 L95.5,27.3 Z" id="Shape"></path>
|
||||
<rect id="Rectangle-path" x="77.3" y="9.1" width="13.6" height="13.6"></rect>
|
||||
<rect id="Rectangle-path" x="90.9" y="36.4" width="9.1" height="9.1"></rect>
|
||||
<rect id="Rectangle-path" x="0" y="54.5" width="9.1" height="9.1"></rect>
|
||||
<polygon id="Shape" points="47.7 36.4 29.5 36.4 29.5 40.9 52.3 40.9 52.3 31.8 52.3 27.3 56.8 27.3 56.8 18.2 52.3 18.2 47.7 18.2 43.2 18.2 43.2 9.1 47.7 9.1 47.7 13.6 63.6 13.6 63.6 0 59.1 0 59.1 9.1 52.3 9.1 52.3 0 50 0 40.9 0 38.6 0 38.6 22.7 47.7 22.7 47.7 27.3 38.6 27.3 38.6 31.8 47.7 31.8"></polygon>
|
||||
<polygon id="Shape" points="6.8 50 15.9 50 20.5 50 22.7 50 22.7 54.5 13.6 54.5 13.6 59.1 22.7 59.1 22.7 63.6 40.9 63.6 40.9 59.1 27.3 59.1 27.3 54.5 27.3 45.5 20.5 45.5 20.5 38.6 15.9 38.6 15.9 45.5 11.4 45.5 11.4 36.4 0 36.4 0 40.9 6.8 40.9"></polygon>
|
||||
<polygon id="Shape" points="50 90.9 50 79.5 40.9 79.5 40.9 70.5 36.4 70.5 36.4 84.1 45.5 84.1 45.5 90.9 36.4 90.9 36.4 95.5 45.5 95.5 45.5 100 56.8 100 56.8 95.5 50 95.5"></polygon>
|
||||
<polygon id="Shape" points="72.7 45.5 63.6 45.5 63.6 34.1 59.1 34.1 59.1 50 81.8 50 81.8 45.5 77.3 45.5 77.3 40.9 84.1 40.9 84.1 36.4 77.3 36.4 72.7 36.4 68.2 36.4 68.2 40.9 72.7 40.9"></polygon>
|
||||
<polygon id="Shape" points="68.2 86.4 75 86.4 75 90.9 84.1 90.9 84.1 86.4 84.1 81.8 84.1 75 75 75 75 81.8 68.2 81.8 68.2 75 63.6 75 63.6 81.8 59.1 81.8 59.1 63.6 54.5 63.6 54.5 59.1 50 59.1 50 45.5 34.1 45.5 34.1 54.5 38.6 54.5 38.6 50 45.5 50 45.5 59.1 45.5 68.2 54.5 68.2 54.5 81.8 54.5 86.4 59.1 86.4 63.6 86.4"></polygon>
|
||||
<polygon id="Shape" points="95.5 56.8 88.6 56.8 84.1 56.8 72.7 56.8 72.7 65.9 68.2 65.9 68.2 56.8 63.6 56.8 63.6 70.5 77.3 70.5 77.3 61.4 84.1 61.4 84.1 68.2 88.6 68.2 88.6 61.4 95.5 61.4 95.5 75 88.6 75 88.6 88.6 100 88.6 100 84.1 93.2 84.1 93.2 79.5 100 79.5 100 61.4 100 56.8 100 50 95.5 50"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB |
|
|
@ -1,13 +1,13 @@
|
|||
<ion-content class="backup-request">
|
||||
<div id="warning">
|
||||
<img class="svg" src="assets/img/warning.svg" id="alert-icon" />
|
||||
<div class="onboarding-topic" translate>No backup, no bitcoin.</div>
|
||||
<div class="onboarding-description" id="backup-description" translate>Since only you control your money, you’ll need to save your backup phrase in case this app is deleted.</div>
|
||||
<ion-content>
|
||||
<div class="header">
|
||||
<img src="assets/img/warning.svg" />
|
||||
<p translate>No backup, no bitcoin.</p>
|
||||
<p translate>Since only you control your money, you’ll need to save your backup phrase in case this app is deleted.</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<ion-icon name="arrow-round-down"></ion-icon>
|
||||
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
|
||||
<p translate>Your wallet is never saved to cloud storage or standard device backups.</p>
|
||||
<button class="primary" ion-button block (click)="initBackupFlow()" translate>Backup wallet</button>
|
||||
<button class="secondary" ion-button block outline (click)="later()" translate>Do it later</button>
|
||||
<button class="secondary" ion-button block outline (click)="doBackupLater()" translate>Do it later</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,17 @@
|
|||
page-backup-request {
|
||||
.backup-request {
|
||||
#warning {
|
||||
padding-top: 15%;
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 320px);
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
#alert-icon {
|
||||
margin: 20px auto 5px;
|
||||
height: 10vh;
|
||||
}
|
||||
#arrow-down {
|
||||
font-size: 4.2rem;
|
||||
color: $v-accent-color;
|
||||
}
|
||||
#backup-tldr {
|
||||
font-size: 16px;
|
||||
}
|
||||
#backup-description {
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
padding: 1rem 0.5rem 0 1rem;
|
||||
@media (max-height: 480px) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px;
|
||||
}
|
||||
@media (max-height: 568px) {
|
||||
#warning {
|
||||
padding-top: 5%;
|
||||
}
|
||||
#backup-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
#backup-tldr {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 480px) {
|
||||
#warning {
|
||||
padding-top: 5%;
|
||||
}
|
||||
#backup-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
#backup-tldr {
|
||||
font-size: 14px;
|
||||
}
|
||||
#arrow-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 4vh 15px;
|
||||
}
|
||||
.header-md::after {
|
||||
background: none;
|
||||
.header {
|
||||
margin: 5vh 3vh;
|
||||
text-align: center;
|
||||
font-size: 3vh;
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams, AlertController} from 'ionic-angular';
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
|
||||
import { DisclaimerPage } from '../disclaimer/disclaimer';
|
||||
|
||||
|
|
@ -10,7 +11,12 @@ import { DisclaimerPage } from '../disclaimer/disclaimer';
|
|||
export class BackupRequestPage {
|
||||
private opts: any;
|
||||
|
||||
constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public navParams: NavParams,
|
||||
public alertCtrl: AlertController,
|
||||
private log: Logger
|
||||
) {
|
||||
this.opts = {
|
||||
title: '',
|
||||
message: '',
|
||||
|
|
@ -19,13 +25,14 @@ export class BackupRequestPage {
|
|||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.log.info('ionViewDidLoad BackupRequestPage');
|
||||
}
|
||||
|
||||
initBackupFlow() {
|
||||
// TODO navigate to backupFlow
|
||||
}
|
||||
|
||||
later(confirmed: boolean) {
|
||||
doBackupLater(confirmed: boolean) {
|
||||
this.opts.title = !confirmed ? '¡Watch Out!' : 'Are you sure you want to skip it?';
|
||||
this.opts.message = !confirmed ? 'If this device is replaced or this app is deleted, neither you nor BitPay can recover your funds without a backup.' : 'You can create a backup later from your wallet settings.';
|
||||
this.opts.buttons = [{
|
||||
|
|
@ -37,7 +44,7 @@ export class BackupRequestPage {
|
|||
handler: () => {
|
||||
if (!confirmed) {
|
||||
setTimeout(() => {
|
||||
this.later(true);
|
||||
this.doBackupLater(true);
|
||||
}, 300);
|
||||
} else {
|
||||
this.navCtrl.push(DisclaimerPage);
|
||||
|
|
|
|||
|
|
@ -1,35 +1,27 @@
|
|||
<ion-header>
|
||||
|
||||
<ion-navbar transparent class="navbarc">
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content class="onboarding disclaimer">
|
||||
<div id="onboarding-disclaimer-container">
|
||||
<div *ngIf="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
|
||||
<div *ngIf="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
|
||||
<div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different – it cannot be safely held with a bank or web service.</div>
|
||||
<div class="options">
|
||||
<ion-item>
|
||||
<ion-label>I understand that my funds are held securely on this device, not by a company.</ion-label>
|
||||
<ion-checkbox [(ngModel)]="accepted.first"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</ion-label>
|
||||
<ion-checkbox [(ngModel)]="accepted.second"></ion-checkbox>
|
||||
</ion-item>
|
||||
</div>
|
||||
</div>
|
||||
<div id="agree-to-terms" *ngIf="accepted.first && accepted.second">
|
||||
<div class="terms-check">
|
||||
<ion-checkbox [(ngModel)]="terms.accepted"></ion-checkbox>
|
||||
<div class="modal-text">
|
||||
<label (click)="selectTerms()" translate>I have read, understood, and agree to the </label>
|
||||
<a (click)="openDisclaimer()" translate>Terms of Use.</a>
|
||||
<ion-content>
|
||||
<div class="content">
|
||||
<div *ngIf="resume" translate>Quick review!</div>
|
||||
<div *ngIf="!resume" translate>Almost done! Let's review.</div>
|
||||
<p translate>Bitcoin is different – it cannot be safely held with a bank or web service.</p>
|
||||
<ion-item>
|
||||
<ion-label>I understand that my funds are held securely on this device, not by a company.</ion-label>
|
||||
<ion-checkbox [(ngModel)]="accepted.first"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</ion-label>
|
||||
<ion-checkbox [(ngModel)]="accepted.second"></ion-checkbox>
|
||||
</ion-item>
|
||||
<div *ngIf="accepted.first && accepted.second">
|
||||
<div class="terms">
|
||||
<a class="link" (click)="openDisclaimer()" translate>Terms of Use</a>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<span translate>I have read, understood, and agree to the </span>
|
||||
</ion-label>
|
||||
<ion-checkbox [(ngModel)]="terms.accepted"></ion-checkbox>
|
||||
</ion-item>
|
||||
<button ion-button block [disabled]="!accepted.first || !accepted.second || !terms.accepted" (click)="confirm()" translate>Confirm & Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary" ion-button block [disabled]="!accepted.first || !accepted.second || !terms.accepted" (click)="confirm()" translate>Confirm & Finish</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,17 @@
|
|||
page-disclaimer {
|
||||
.disclaimer {
|
||||
.options {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.item {
|
||||
background-color: transparent;
|
||||
color: $v-onboarding-color;
|
||||
}
|
||||
.item-md.item-block .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
ion-label {
|
||||
white-space: normal;
|
||||
}
|
||||
#agree-to-terms {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
.item {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.terms-check {
|
||||
text-align: left;
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
label {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox {
|
||||
margin: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
.modal-text {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
.terms {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 4vh 15px;
|
||||
.link {
|
||||
font-size: 2vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.navbarc {
|
||||
.bar-button {
|
||||
color: $v-accent-color;
|
||||
}
|
||||
}
|
||||
.header-md::after {
|
||||
background: none;
|
||||
.content {
|
||||
padding-top: 5vh;
|
||||
text-align: center;
|
||||
font-size: 3vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams} from 'ionic-angular';
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
|
||||
import { TermsOfUsePage } from '../../settings/about/terms-of-use/terms-of-use';
|
||||
import { TabsPage } from '../../tabs/tabs';
|
||||
|
|
@ -12,7 +13,11 @@ export class DisclaimerPage {
|
|||
public accepted: any;
|
||||
public terms: any;
|
||||
|
||||
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public navParams: NavParams,
|
||||
private log: Logger
|
||||
) {
|
||||
this.accepted = {
|
||||
first: false,
|
||||
second: false,
|
||||
|
|
@ -23,6 +28,7 @@ export class DisclaimerPage {
|
|||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.log.info('ionViewDidLoad DisclaimerPage');
|
||||
}
|
||||
|
||||
selectTerms() {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,45 @@
|
|||
<ion-content class="email">
|
||||
<div id="success-container">
|
||||
<img src="assets/img/onboarding-success.svg" id="success-image" />
|
||||
<div id="success-message" translate>Wallet Created</div>
|
||||
</div>
|
||||
<ion-header>
|
||||
|
||||
<div id="collect-email">
|
||||
<div id="collect-email-inner" *ngIf="!showConfirmForm">
|
||||
<div class="heading" translate>Notifications by email</div>
|
||||
<div class="prompt" translate>Where would you like to receive email notifications about payments?</div>
|
||||
<ion-navbar hideBackButton="true" transparent>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-only (click)="skip()">
|
||||
Skip
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
|
||||
<form id="email-form" name="emailForm" (ngSubmit)="showConfirm()" novalidate>
|
||||
<label class="item item-input" id="email-label">
|
||||
<ion-input type="email" placeholder="Email Input" name="email" [(ngModel)]="data.email"></ion-input>
|
||||
</label>
|
||||
<ion-item>
|
||||
<ion-label class="prompt">Get news and updates from BitPay</ion-label>
|
||||
<ion-checkbox name="accept" [(ngModel)]="data.accept"></ion-checkbox>
|
||||
</ion-item>
|
||||
<button class="primary" ion-button block type="submit">Continue →</button>
|
||||
</form>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="email-title" translate>Wallet Created</div>
|
||||
|
||||
<div *ngIf="!showConfirmForm">
|
||||
<div class="email-content">
|
||||
<p translate>Notifications by email</p>
|
||||
<p translate>Where would you like to receive email notifications about payments?</p>
|
||||
</div>
|
||||
|
||||
<div id="collect-email-confirm" *ngIf="showConfirmForm">
|
||||
<p translate class="confirm">Is this email address correct?</p>
|
||||
<p class="user-email">{{data.email}}</p>
|
||||
<form (ngSubmit)="showConfirm()" novalidate>
|
||||
<ion-item>
|
||||
<ion-label>Email</ion-label>
|
||||
<ion-input type="email" [(ngModel)]="data.email" name="email" required></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label >Get news and updates from BitPay</ion-label>
|
||||
<ion-checkbox name="accept" [(ngModel)]="data.accept"></ion-checkbox>
|
||||
</ion-item>
|
||||
<div class="buttons">
|
||||
<button ion-button block type="submit">Continue →</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div *ngIf="showConfirmForm">
|
||||
<div class="email-content">
|
||||
<p translate>Is this email address correct?</p>
|
||||
<p>{{data.email}}</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="row">
|
||||
<div class="col col-50">
|
||||
<button class="primary" block ion-button (click)="showConfirm()">Edit</button>
|
||||
|
|
@ -34,10 +50,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay collect-overlay">
|
||||
<button (click)="skip()">
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -1,201 +1,17 @@
|
|||
page-email {
|
||||
ion-label {
|
||||
text-align: left !important;
|
||||
white-space: normal;
|
||||
.buttons {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 4vh 15px;
|
||||
}
|
||||
.email {
|
||||
color: $v-onboarding-color;
|
||||
background: rgb(17, 209, 166) !important;
|
||||
$relish-success: 1.3s;
|
||||
|
||||
button {
|
||||
&.primary {
|
||||
border-color: transparent;
|
||||
background-color: $v-accent-color;
|
||||
color: $v-onboarding-color;
|
||||
}
|
||||
&.secondary {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $v-accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
#success-container {
|
||||
text-align: center;
|
||||
top: 41vh;
|
||||
position: relative;
|
||||
animation-name: emailCollectSlideUp;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .5s;
|
||||
animation-delay: $relish-success;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
#success-image {
|
||||
width: 13vh;
|
||||
margin: 0 auto 2vh;
|
||||
}
|
||||
#success-message {
|
||||
font-size: 3vh;
|
||||
}
|
||||
.collect-overlay {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.4);
|
||||
z-index: 4;
|
||||
animation-name: emailCollectOpacity;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .2s;
|
||||
animation-delay: $relish-success;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 5% 1% 0 0;
|
||||
background-color: transparent;
|
||||
font-size: initial;
|
||||
color: $v-light-gray;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
text-align: center;
|
||||
color: $v-dark-gray;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
.prompt {
|
||||
text-align: center;
|
||||
margin: 1rem 1.5rem;
|
||||
color: $v-mid-gray;
|
||||
}
|
||||
#email-form {
|
||||
margin: 0 1.5rem 1rem;
|
||||
}
|
||||
#email-label {
|
||||
border-radius: $v-visible-radius;
|
||||
background: rgba(200, 200, 200, 0.20);
|
||||
height: 3rem;
|
||||
margin-top:0;
|
||||
}
|
||||
#collect-email {
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
animation-name: topBottom;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .4s;
|
||||
animation-delay: $relish-success + .2s;
|
||||
position: absolute;
|
||||
bottom: -100%;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 5;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#collect-email-inner {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
input[type="email"] {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
color: #445;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
#email-label {
|
||||
border-radius: 6px;
|
||||
background: rgba(200, 200, 200, 0.2);
|
||||
height: 4rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#collect-email-confirm {
|
||||
text-align: center;
|
||||
p.confirm {
|
||||
margin: 2rem 0;
|
||||
color: $v-mid-gray;
|
||||
}
|
||||
p.user-email {
|
||||
color: $v-dark-gray;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.row, .col {
|
||||
padding: 0;
|
||||
}
|
||||
.button {
|
||||
padding: 2.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#news-updates {
|
||||
padding-top: 0;
|
||||
}
|
||||
.item {
|
||||
border: none;
|
||||
label {
|
||||
background: none;
|
||||
}
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before {
|
||||
border-radius: 50% !important;
|
||||
background: none;
|
||||
border-width: 2px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
.checkbox input:checked:after,
|
||||
input:checked + .checkbox-icon:after {
|
||||
border-color: $v-onboarding-checkbox-on-border;
|
||||
top: 8px;
|
||||
left: 6px;
|
||||
}
|
||||
.item-content {
|
||||
color: $v-mid-gray;
|
||||
text-align: left;
|
||||
margin-left: 75px;
|
||||
white-space: initial;
|
||||
}
|
||||
}
|
||||
.item-checkbox {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.item-checkbox .checkbox {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before{
|
||||
border-color: $v-onboarding-checkbox-on-border;
|
||||
}
|
||||
.checkbox input:checked:before,
|
||||
.checkbox input:checked + .checkbox-icon:before {
|
||||
border-color: $v-onboarding-checkbox-on-border;
|
||||
}
|
||||
|
||||
@keyframes topBottom {
|
||||
0% { bottom: -100%; }
|
||||
100% { bottom: 0; }
|
||||
}
|
||||
@keyframes emailCollectOpacity {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes emailCollectSlideUp {
|
||||
0% { top: 41vh; }
|
||||
100% { top: calc((100vh - 20rem) / 2 - 11vh);}
|
||||
}
|
||||
.email-title {
|
||||
margin: 5vh 0;
|
||||
text-align: center;
|
||||
font-size: 3vh;
|
||||
}
|
||||
.email-content {
|
||||
text-align: center;
|
||||
padding: 0 4vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams, ActionSheetController } from 'ionic-angular';
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
|
||||
import { BackupRequestPage } from '../backup-request/backup-request';
|
||||
|
||||
|
|
@ -11,7 +12,12 @@ export class EmailPage {
|
|||
public data: any;
|
||||
public showConfirmForm: boolean;
|
||||
|
||||
constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheet: ActionSheetController) {
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public navParams: NavParams,
|
||||
public actionSheet: ActionSheetController,
|
||||
private log: Logger
|
||||
) {
|
||||
this.data = {
|
||||
accept: true,
|
||||
email: '',
|
||||
|
|
@ -19,6 +25,10 @@ export class EmailPage {
|
|||
this.showConfirmForm = false;
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.log.info('ionViewDidLoad EmailPage');
|
||||
}
|
||||
|
||||
skip() {
|
||||
this.navCtrl.push(BackupRequestPage);
|
||||
}
|
||||
|
|
@ -39,6 +49,7 @@ export class EmailPage {
|
|||
}
|
||||
|
||||
showConfirm() {
|
||||
// TODO Fix form validation
|
||||
if (!this.data.email) return;
|
||||
this.showConfirmForm = !this.showConfirmForm;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<p translate>Bitcoin is secure,<br/>digital money.</p>
|
||||
<p translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
|
||||
</div>
|
||||
<img src='assets/img/tour-phone.svg' />
|
||||
<img src='assets/img/app/onboarding/tour-phone.svg' />
|
||||
<div class="buttons">
|
||||
<div translate>Just scan the code to pay.</div>
|
||||
<button ion-button block (click)="slideNext()" translate>Got it</button>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<p translate>Bitcoin is a currency.</p>
|
||||
<p translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
|
||||
</div>
|
||||
<img src='assets/img/tour-currency.svg' />
|
||||
<img src='assets/img/app/onboarding/tour-currency.svg' />
|
||||
<p>1 BTC = 6000 USD</p>
|
||||
<div class="buttons">
|
||||
<div translate>The exchange rate changes with the market.</div>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<p translate>You control your bitcoin.</p>
|
||||
<p translate>This app stores your bitcoin with cutting-edge security.</p>
|
||||
</div>
|
||||
<img src='assets/img/tour-control.svg' />
|
||||
<img src='assets/img/app/onboarding/tour-control.svg' />
|
||||
<div class="buttons">
|
||||
<div translate>Not even BitPay can access it.</div>
|
||||
<button ion-button block (click)="createDefaultWallet()" translate>
|
||||
|
|
|
|||
Loading…
Reference in New Issue