BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet colors. BCH icon.

This commit is contained in:
Gustavo Maximiliano Cortez 2017-12-11 18:26:54 -03:00
parent 0544ee04cc
commit 4e1ecec76f
No known key found for this signature in database
GPG Key ID: 15EDAD8D9F2EB1AF
24 changed files with 149 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app-template/bitpay/sass/overrides.scss
View File

@ -20,3 +20,4 @@ $colors: (
dark: #222,
);
$icon-border-radius: 50%;

1
app-template/copay/sass/overrides.scss
View File

@ -20,3 +20,4 @@ $colors: (
dark: #222,
);
$icon-border-radius: 3px;

2
app-template/index-template.html
View File

@ -7,7 +7,7 @@
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
<link rel="icon" type="image/x-icon" href="assets/img/app/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="*THEMECOLOR*">

11
src/assets/img/icon-bitcoin.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 51 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path id="coin" d="M25.5,51C39.6,51 51,39.6 51,25.5C51,11.4 39.5,0 25.5,0C11.5,0 0,11.4 0,25.5C0,39.6 11.4,51 25.5,51Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
<g id="BitPay.-Bitcoin_Symbol" transform="matrix(0.939973,0.341249,-0.341249,0.939973,10.2185,-7.19166)">
<path d="M33.5,19.1C32.9,16.1 30.2,15.3 27,15.2L26.5,11L24,11.2L24.5,15.4C23.8,15.5 23.2,15.5 22.5,15.6L22,11.4L19.5,11.6L20,15.9C19.5,15.9 18.9,16 18.4,16.1L15,16.4L15.3,19.2C15.3,19.2 17.1,19 17.1,19.1C18.1,19 18.5,19.6 18.6,20.1L19.1,25C19.2,25 19.3,25 19.4,25C19.3,25 19.2,25 19.1,25L19.9,31.8C19.9,32.1 19.7,32.7 19.1,32.7L17.3,32.9L17.2,36L20.4,35.7C21,35.7 21.6,35.6 22.2,35.6L22.7,39.9L25.2,39.7L24.7,35.4C25.4,35.4 26.1,35.3 26.7,35.3L27.2,39.5L29.7,39.3L29.2,35C33.4,34.4 36.2,33 36.1,28.9C36,25.6 34.4,24.2 31.9,23.8C33.2,22.8 34,21.4 33.5,19.1ZM31,28.7C31.4,31.9 26,32 24.3,32.2L23.7,26.5C25.5,26.3 30.7,25.3 31,28.7ZM23.5,23.8L23,18.6C24.4,18.5 28.8,17.6 29.1,20.7C29.3,23.6 24.9,23.7 23.5,23.8Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-17.5917,-30.4347,30.4347,-17.5917,30.8557,34.8191)"><stop offset="0" style="stop-color:rgb(255,162,75);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(247,137,28);stop-opacity:1"/></linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

85
src/pages/home/home.html
View File

@ -4,7 +4,7 @@
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content>
<ion-card *ngIf="serverMessage">
<ion-item>
<div>{{serverMessage.title}}</div>
@ -63,47 +63,88 @@
</div>
<ion-card *ngIf="walletsBtc && walletsBtc[0]">
<ion-item>
<span translate>Bitcoin Wallets</span>
<button ion-button clear item-end class="header-icon" (click)="goToAddView()">
<ion-icon name="ios-add"></ion-icon>
</button>
</ion-item>
<ion-card-header>
<ion-row>
<ion-col class="title-wallet">
<img src="assets/img/icon-bitcoin.svg" alt="Bitcoin Wallets" width="18" />
<span translate>Bitcoin Wallets</span>
</ion-col>
<ion-col text-right (click)="goToAddView()">
<ion-icon class="add-icon" name="add"></ion-icon>
</ion-col>
</ion-row>
</ion-card-header>
<ion-list>
<button ion-item *ngFor="let wallet of walletsBtc" (click)="goToWalletDetails(wallet)">
<ion-icon item-start>
<img *ngIf="wallet.network == 'testnet'" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="wallet.network != 'testnet'" src="assets/img/icon-wallet.svg" class="icon-wallet" />
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg" class="icon-wallet" />
</ion-icon>
<h2>{{wallet.credentials.walletName}} <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-{{wallet.credentials.n}}</span></h2>
<span *ngIf="wallet.scanning" translate>Scanning funds</span>
<p *ngIf="!wallet.scanning && !wallet.balanceHidden">{{wallet.status.availableBalanceSat || 0 | satToUnit}} {{cachedBalanceUpdateOn}}</p>
<p *ngIf="wallet.balanceHidden">[{{'Balance Hidden' | translate}}]</p>
<p *ngIf="wallet.error" class="error">{{wallet.error}}</p>
<p>
<span *ngIf="!wallet.isComplete()" translate>
Incomplete
</span>
<span *ngIf="wallet.isComplete()">
<span *ngIf="!wallet.balanceHidden && !wallet.scanning">
{{wallet.status.totalBalanceSat ? (wallet.status.totalBalanceSat || 0 | satToUnit) :
( wallet.cachedBalance ?
wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '')
: '')}}
</span>
<span *ngIf="wallet.scanning" translate>Scanning funds</span>
<span *ngIf="wallet.balanceHidden && !wallet.scanning">[{{'Balance Hidden' | translate}}]</span>
<ion-icon *ngIf="!wallet.balanceHidden && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)" name="timer"></ion-icon>
<span *ngIf="wallet.error" class="error">{{wallet.error}}</span>
</span>
</p>
</button>
</ion-list>
</ion-card>
<ion-card *ngIf="walletsBch && walletsBch[0]">
<ion-item>
<span translate>Bitcoin Cash Wallets</span>
<button ion-button clear item-end class="header-icon" (click)="goToAddView('bch')">
<ion-icon name="ios-add"></ion-icon>
</button>
</ion-item>
<ion-card-header>
<ion-row>
<ion-col class="title-wallet">
<img src="assets/img/bitcoin-cash-logo.svg" alt="Bitcoin Cash Wallets" width="22" />
<span translate>Bitcoin Cash Wallets</span>
</ion-col>
<ion-col text-right (click)="goToAddView('bch')">
<ion-icon class="add-icon" name="add"></ion-icon>
</ion-col>
</ion-row>
</ion-card-header>
<ion-list>
<button ion-item *ngFor="let wallet of walletsBch" (click)="goToWalletDetails(wallet)">
<ion-icon item-start>
<img src="assets/img/icon-wallet.svg" class="icon-wallet" />
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg" class="icon-wallet" />
</ion-icon>
<h2>{{wallet.credentials.walletName}} <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-{{wallet.credentials.n}}</span></h2>
<span *ngIf="wallet.scanning" translate>Scanning funds</span>
<p>
<span *ngIf="!wallet.isComplete()" translate>
Incomplete
</span>
<span *ngIf="wallet.isComplete()">
<span *ngIf="!wallet.balanceHidden && !wallet.scanning">
{{wallet.status.totalBalanceSat ? (wallet.status.totalBalanceSat || 0 | satToUnit: wallet.coin) :
( wallet.cachedBalance ?
wallet.cachedBalance + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '')
: '')}}
</span>
<span *ngIf="wallet.scanning" translate>Scanning funds</span>
<span *ngIf="wallet.balanceHidden && !wallet.scanning">[{{'Balance Hidden' | translate}}]</span>
<ion-icon *ngIf="!wallet.balanceHidden && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)" name="timer"></ion-icon>
<span *ngIf="wallet.error" class="error">{{wallet.error}}</span>
</span>
</p>
<span *ngIf="wallet.scanning" translate>Scanning funds</span>
<p *ngIf="!wallet.scanning">{{wallet.status.availableBalanceSat || 0 | satToUnit: wallet.coin}} {{cachedBalanceUpdateOn}}</p>
<p *ngIf="wallet.error" class="error">{{wallet.error}}</p>
</button>
</ion-list>
</ion-card>
</ion-content>
</ion-content>

25
src/pages/home/home.scss
View File

@ -1,19 +1,20 @@
page-home {
img {
&.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
.add-icon {
cursor: pointer;
}
.title-wallet {
color: color($colors, dark);
font-weight: 700;
>img {
width: 22px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
}
.header-icon {
font-size: 1.7rem !important;
color: silver;
margin: 0 !important;
padding: 10px !important;
}
.error {
color: color($colors, danger) !important;
color: color($colors, danger);
}
}

14
src/pages/paper-wallet/paper-wallet.scss
View File

@ -1,10 +1,4 @@
page-paper-wallet {
img {
&.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
}
}
@mixin wallets-list {
height: 3.5rem;
width: 3.5rem;
@ -13,17 +7,17 @@ page-paper-wallet {
border-radius: 3px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
}
.wallet-livenet::before {
@include wallets-list;
background: color($colors, primary) url('../assets/img/icon-wallet.svg') no-repeat 0px 0px;
}
.wallet-testnet::before {
@include wallets-list;
background: color($colors, primary) url('../assets/img/icon-wallet-testnet.svg') no-repeat 0px 0px;
}
.action-sheet-container {
.action-sheet-button {
display: flex;
@ -35,4 +29,4 @@ page-paper-wallet {
}
}
}
}
}

6
src/pages/receive/custom-amount/custom-amount.scss
View File

@ -4,12 +4,6 @@ page-custom-amount {
display: flex;
justify-content: center;
}
img {
&.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
}
}
.wallet-label {
align-items: center;
display: flex;

10
src/pages/receive/receive.html
View File

@ -13,7 +13,7 @@
<span translate>Wallet not backed up</span>
<ion-icon name="arrow-forward"></ion-icon>
</div>
<div *ngIf="wallet && wallet.isComplete()" class="qr-container">
<qr-code *ngIf="address" copy-to-clipboard="{{ address }}" [value]="qrAddress" [level]="M" [size]="220" [foreground]="'#334'"></qr-code>
<div class="text-address" copy-to-clipboard="{{ address }}">{{ address }}</div>
@ -25,7 +25,7 @@
<span translate>Generate new address</span>
</button>
</div>
<div *ngIf="wallet && !wallet.isComplete()" class="incomplete-wallet-container">
<div class="title">
<span translate>Incomplete wallet</span>
@ -35,10 +35,10 @@
</div>
<button ion-button (click)="goCopayers()" translate>Open wallet</button>
</div>
<div *ngIf="wallets[0]" class="wallets-container" (click)="showWallets()">
<img src="assets/img/icon-wallet.svg" class="icon-wallet" *ngIf="wallet.network == 'livenet'">
<img src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" *ngIf="wallet.network == 'testnet'">
<img src="assets/img/icon-wallet.svg" [ngStyle]="{'background-color': wallet.color}" class="icon-wallet" *ngIf="wallet.network == 'livenet'">
<img src="assets/img/icon-wallet-testnet.svg" [ngStyle]="{'background-color': wallet.color}" class="icon-wallet" *ngIf="wallet.network == 'testnet'">
<div class="wallet-text">
<div>{{wallet.name}}</div>
</div>

17
src/pages/receive/receive.scss
View File

@ -40,7 +40,7 @@ page-receive {
}
.wallets-container {
position: absolute;
bottom: 0rem;
bottom: 0;
width: 100%;
padding-left: 2rem;
border-top: solid 1px rgb(242, 242, 242);
@ -48,22 +48,25 @@ page-receive {
display: flex;
align-items: center;
cursor: pointer;
img.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
> img {
margin: 9px 8px 9px 0;
}
.wallet-text {
padding-left: 1rem;
padding-left: 24px;
}
}
}
.action-sheet-container .action-sheet-button .button-inner {
padding-left: 10px !important;
}
@mixin wallets-list {
height: 3.5rem;
width: 3.5rem;
content: " ";
position: absolute;
border-radius: 3px;
border-radius: $icon-border-radius;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
}
@ -71,7 +74,7 @@ page-receive {
@include wallets-list;
background: color($colors, primary) url('../assets/img/icon-wallet.svg') no-repeat 0px 0px;
}
.wallet-testnet::before {
@include wallets-list;
background: color($colors, primary) url('../assets/img/icon-wallet-testnet.svg') no-repeat 0px 0px;

9
src/pages/send/amount/amount.scss
View File

@ -77,13 +77,4 @@ page-amount {
font-size: 12px;
}
}
img {
&.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
}
&.icon-contact {
width: 35px !important;
}
}
}

2
src/pages/send/confirm/confirm.html
View File

@ -110,4 +110,4 @@
<ion-toolbar position="bottom">
<button ion-button full (click)="approve(tx, wallet, statusChangeHandler)" [disabled]="!wallet" translate>Click to send</button>
</ion-toolbar>
</ion-footer>
</ion-footer>

8
src/pages/send/confirm/confirm.scss
View File

@ -44,8 +44,6 @@ page-confirm {
@include row-flex;
.icon-wallet {
margin-right: 1rem;
width: 35px !important;
background-color: color($colors, primary);
&.disabled {
background-color: color($global-colors, light-grey);
}
@ -64,17 +62,17 @@ page-confirm {
border-radius: 3px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
}
.wallet-livenet::before {
@include wallets-list;
background: color($colors, primary) url('../assets/img/icon-wallet.svg') no-repeat 0px 0px;
}
.wallet-testnet::before {
@include wallets-list;
background: color($colors, primary) url('../assets/img/icon-wallet-testnet.svg') no-repeat 0px 0px;
}
.action-sheet-container {
.action-sheet-button {
display: flex;

5
src/pages/send/send.html
View File

@ -34,7 +34,8 @@
<ion-list>
<button ion-item *ngFor="let item of walletList" (click)="goToAmount(item)">
<ion-icon item-start>
<img src="assets/img/icon-wallet.svg" class="icon-wallet">
<img *ngIf="item.network == 'testnet'" [ngStyle]="{'background-color': item.color}" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="item.network != 'testnet'" [ngStyle]="{'background-color': item.color}" src="assets/img/icon-wallet.svg" class="icon-wallet" />
</ion-icon>
<h2>{{item.name}}</h2>
</button>
@ -48,4 +49,4 @@
<button ion-button (click)="createWallet()" translate>Create bitcoin wallet</button>
</ion-card-content>
</ion-card>
</ion-content>
</ion-content>

9
src/pages/send/send.scss
View File

@ -2,13 +2,4 @@ page-send {
.scanner-icon {
z-index: 99;
}
img {
&.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
}
&.icon-contact {
width: 35px !important;
}
}
}

9
src/pages/settings/settings.html
View File

@ -65,8 +65,8 @@
<ion-item-divider *ngIf="walletsBtc.length" color="light">{{'Bitcoin Wallets' | translate}}</ion-item-divider>
<button ion-item *ngFor="let wallet of walletsBtc" (click)="openWalletSettings(wallet.credentials.walletId)">
<ion-icon item-start>
<img *ngIf="wallet.network == 'testnet'" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="wallet.network != 'testnet'" src="assets/img/icon-wallet.svg" class="icon-wallet" />
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg" class="icon-wallet" />
</ion-icon>
<h2>{{wallet.name}} <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-{{wallet.credentials.n}}</span></h2>
<ion-note class="assertive" *ngIf="!wallet.isComplete()" item-end>
@ -79,7 +79,8 @@
<ion-item-divider *ngIf="walletsBch.length" color="light">{{'Bitcoin Cash Wallets' | translate}}</ion-item-divider>
<button ion-item *ngFor="let wallet of walletsBch" (click)="openWalletSettings(wallet.credentials.walletId)">
<ion-icon item-start>
<img src="assets/img/icon-wallet.svg" class="icon-wallet" />
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg" class="icon-wallet" />
</ion-icon>
<h2>{{wallet.name}} <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-{{wallet.credentials.n}}</span></h2>
<ion-note class="assertive" *ngIf="!wallet.isComplete()" item-end>
@ -100,4 +101,4 @@
</ion-item>
</ion-list>
</ion-content>
</ion-content>

10
src/pages/settings/settings.scss
View File

@ -1,16 +1,14 @@
page-settings {
img {
&.icon-wallet {
width: 35px !important;
background-color: color($colors, primary);
}
}
.assertive {
color: color($colors, danger);
ion-label {
white-space: inherit;
}
}
.icon-wallet {
width: 27px;
height: 27px;
}
ion-item {
cursor: pointer;
}

2
src/pages/tx-details/tx-details.html
View File

@ -69,4 +69,4 @@
</ion-list>
<button ion-button block clear (click)="viewOnBlockchain()" translate>View on blockchain</button>
</ion-content>
</ion-content>

5
src/pages/tx-details/tx-details.scss
View File

@ -8,9 +8,6 @@ page-tx-details {
}
img {
margin-right: 15px;
&.icon-wallet {
background-color: color($colors, primary);
}
}
.amount-str {
font-size: 30px;
@ -21,4 +18,4 @@ page-tx-details {
margin-left: 2px;
margin-bottom: 1.5rem;
}
}
}

2
src/pages/tx-details/tx-details.ts
View File

@ -56,4 +56,4 @@ export class TxDetailsPage {
const url = 'https://' + prefix + 'insight.bitpay.com/tx/' + this.tx.txid;
this.externalLinkProvider.open(url);
}
}
}

4
src/pages/txp-details/txp-details.scss
View File

@ -4,7 +4,7 @@ page-txp-details {
$v-success-color: #1abb9b;
$v-icon-border-radius: 3px;
$item-label-color: #6C6C6E;
.item-md {
padding: 0rem;
}
@ -51,8 +51,6 @@ page-txp-details {
margin-top: 1rem;
.icon-wallet {
margin-right: 1rem;
width: 35px !important;
background-color: color($colors, primary);
&.disabled {
background-color: color($global-colors, light-grey);
}

17
src/theme/global.scss
View File

@ -20,4 +20,19 @@ $global-colors: (
// This style prevents the names of the tabs from disappear
.tabbar .tab-button .tab-button-text {
display: block;
}
}
.icon-wallet {
background-color: color($colors, primary);
border-radius: $icon-border-radius;
width: 37px;
height: 37px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
}
.icon-contact {
width: 35px;
}

7
src/theme/overrides.scss
View File

@ -1,5 +1,5 @@
/*
* Copay Distribution SCSS overrides
* BitPay Distribution SCSS overrides
*/
// Named Color Variables
@ -11,8 +11,8 @@
// The "primary" color is the only required color in the map.
$colors: (
primary: #1abb9b,
secondary: #31465b,
primary: #647ce8,
secondary: #111b49,
warning: #EBA133,
danger: #bb331a,
success: #7BC94D,
@ -20,3 +20,4 @@ $colors: (
dark: #222,
);
$icon-border-radius: 50%;

2
src/theme/variables.scss
View File

@ -33,14 +33,12 @@ $app-direction: ltr;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$item-md-detail-push-show: true;
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
$item-wp-detail-push-show: true;