fix confirm modal img - use map colors properly

This commit is contained in:
JDonadio 2017-10-28 12:11:28 -03:00
parent b0a1a1ab01
commit b281c14e83
No known key found for this signature in database
GPG Key ID: EC1F4E04B2BFA730
9 changed files with 35 additions and 19 deletions

View File

@ -16,6 +16,7 @@ $colors: (
accent: #647ce8,
warning: #EBA133,
danger: #bb331a,
success: #7BC94D,
light: #f4f4f4,
dark: #222,
);

View File

@ -16,6 +16,7 @@ $colors: (
accent: #1abb9b,
warning: #EBA133,
danger: #bb331a,
success: #7BC94D,
light: #f4f4f4,
dark: #222,
);

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="158px" height="157px" viewBox="0 0 158 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Group 3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="0.2.4---Wallet-Created" transform="translate(-109.000000, -169.000000)">
<g id="Overlay/Success" transform="translate(-1.000000, 0.000000)">
<g id="Group-3" transform="translate(111.592000, 170.431784)">
<g id="ios-checkmark-outline" transform="translate(49.261333, 54.161919)"></g>
<polyline id="Line" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" points="49.764 82.7473763 67.3573333 100.801349 114.608 54.6634183"></polyline>
<path d="M77.4106667,154.461769 C120.163397,154.461769 154.821333,119.884324 154.821333,77.2308846 C154.821333,34.5774448 120.163397,0 77.4106667,0 C34.657936,0 0,34.5774448 0,77.2308846 C0,119.884324 34.657936,154.461769 77.4106667,154.461769 Z" id="Oval-1" stroke="#FFFFFF" stroke-width="2"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1,8 +1,6 @@
<ion-content>
<div class="confirm-modal-header">
<div>
<img src='assets/img/onboarding/success.svg'/>
</div>
<img src='assets/img/backup/success.svg'/>
</div>
<div class="confirm-modal-content">
<div>
@ -12,7 +10,7 @@
<div class="confirm-modal-message">
<span translate>Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it.</span>
</div>
<button (click)="closeBackupResultModal()" translate>Got it</button>
<button ion-button clear (click)="closeBackupResultModal()" translate>Got it</button>
</div>
</div>
</ion-content>

View File

@ -1,5 +1,5 @@
.confirm-modal-header {
background: green;
background: color($colors, success);
padding: 1rem;
border-radius: 12px 12px 0 0;
min-height: 120px;
@ -21,7 +21,6 @@
font-size: 1.6rem;
}
button {
padding-top: 2rem;
background: none;
font-size: 1.6rem;
}

View File

@ -26,7 +26,7 @@
<div class="buttons">
<div class="tldr" translate>We'll confirm on the next screen.</div>
<button [disabled]="wallet.credentials.mnemonicEncrypted || error" (click)="slideNext()" translate>I've written it down</button>
<button ion-button block [disabled]="wallet.credentials.mnemonicEncrypted || error" (click)="slideNext()" translate>I've written it down</button>
</div>
</div>
</ion-slide>
@ -35,13 +35,13 @@
<div>
<div translate>Let's verify your backup phrase.</div>
<div class="phrase">
<button *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
<button ion-button outline *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
</div>
<div class="buttons">
<div *ngIf="!selectComplete">
<div class="tldr" translate>Please tap each word in the correct order.</div>
<div>
<button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index"
<button ion-button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index"
(click)="addButton(i, shuffledWord)"
[disabled]="shuffledWord.selected">{{shuffledWord.word}}
</button>
@ -51,8 +51,8 @@
<div *ngIf="selectComplete">
<div class="tldr" translate>Is this correct?</div>
<div>
<button (click)="slideNext();" translate>Confirm</button>
<button (click)="initFlow();" translate>Clear</button>
<button ion-button block (click)="slideNext();" translate>Confirm</button>
<button ion-button block outline (click)="initFlow();" translate>Clear</button>
</div>
</div>
</div>
@ -75,7 +75,7 @@
</div>
<div class="buttons">
<button [disabled]="!passphrase" (click)="finalStep();" translate>Confirm</button>
<button ion-button block [disabled]="!passphrase" (click)="finalStep();" translate>Confirm</button>
</div>
</ion-slide>
</ion-slides>

View File

@ -9,18 +9,18 @@
.password-required {
padding: 2rem;
font-size: 14px;
color: #DB5B44;
color: color($colors, danger);
}
.password {
background-color: #f2f2f2;
background-color: color($colors, light);
padding: 2rem;
}
.phrase {
display: -webkit-box;
background: #f2f2f2;
background: color($colors, light);
border: 2px dashed #d9d9d9;
border-radius: 3px;
color: #445;
color: color($colors, secondary);
text-align: center;
max-width: 500px;
min-height: 12rem;

View File

@ -10,7 +10,7 @@
<div class="warning-modal-message">
<span 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.</span>
</div>
<button (click)="close()" translate>I understand</button>
<button ion-button clear (click)="close()" translate>I understand</button>
</div>
</div>
</ion-content>

View File

@ -1,5 +1,5 @@
.warning-modal-header {
background: orange;
background: color($colors, warning);
padding: 1rem;
border-radius: 12px 12px 0 0;
min-height: 120px;
@ -21,7 +21,6 @@
font-size: 1.6rem;
}
button {
padding-top: 2rem;
background: none;
font-size: 1.6rem;
}