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

feat(design): correct bitcoin icon across all views

This commit is contained in:
Jason Dreyzehner 2016-10-11 14:30:41 -04:00
parent b78dd84a23
commit c19bbc539e
8 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/sass/icons.scss
View File

@ -14,6 +14,19 @@
padding-left: 74px;
}
.icon-svg {
display: flex;
justify-content: center;
align-items: center;
> img {
background-repeat:no-repeat;
background-clip: padding-box;
background-size: contain;
height: 18px;
}
}
.big-icon-svg {
padding: 0 7px;
> .bg {

11
src/sass/ionic.scss
View File

@ -27,3 +27,14 @@ ion-tabs.ion-tabs-transparent {
}
}
}
// .placeholder-icon padding cannot be modified by a variable
$placeholder-icon-padding: 10px;
.placeholder-icon {
&:first-child {
padding-right: $placeholder-icon-padding;
}
&:last-child {
padding-left: $placeholder-icon-padding;
}
}

7
src/sass/views/tab-receive.scss
View File

@ -32,9 +32,6 @@
font-size: .8rem;
i {
font-size: 1.3rem;
&.ion-social-bitcoin-outline {
border-right: 1px solid rgb(228, 228, 228);
}
}
}
.bit-address {
@ -111,6 +108,10 @@
margin-bottom:1rem;
}
}
.receive-tab-bitcoin-icon {
border-right: 1px solid rgb(228, 228, 228);
padding-right: 10px;
}
}
@keyframes fadeIn {

13
www/img/icon-bitcoin-symbol.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Bitcoin_Symbol" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 12 16" style="enable-background:new 0 0 12 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#5D5D5D;}
</style>
<path class="st0" d="M7.4,2.5l0-2.4L6,0.2l0,2.3c-0.4,0-0.8,0-1.2,0l0-2.3l-1.5,0l0,2.4c-0.3,0-0.6,0-0.9,0l-2,0l0,1.5
c0,0,1.1,0,1,0c0.6,0,0.8,0.3,0.8,0.6l0,6.5c0,0.2-0.2,0.5-0.6,0.5c0,0-1.1,0-1.1,0l-0.3,1.7l1.9,0c0.4,0,0.7,0,1,0l0,2.4l1.5,0
l0-2.4c0.4,0,0.8,0,1.2,0l0,2.3l1.5,0l0-2.4c2.5-0.1,4.2-0.7,4.4-3c0.2-1.8-0.7-2.6-2.1-3C10.5,7,11,6.2,10.9,5
C10.7,3.3,9.3,2.7,7.4,2.5z M8.8,10.1c0,1.8-3.1,1.6-4.1,1.6l0-3.2C5.7,8.5,8.8,8.2,8.8,10.1L8.8,10.1z M8.2,5.6
c0,1.6-2.6,1.4-3.4,1.4l0-2.9C5.6,4.2,8.2,3.9,8.2,5.6L8.2,5.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 939 B

2
www/views/modals/tx-details.html
View File

@ -56,7 +56,7 @@
<div class="list">
<div class="item item-icon-left" ng-show="btx.action == 'sent'">
<i class="icon ion-social-bitcoin-outline"></i>
<i class="icon icon-svg"><img src="img/icon-bitcoin-symbol.svg"></i>
<div ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" copy-to-clipboard="btx.addressTo">
<span ng-if="btx.merchant">
<span ng-show="btx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{btx.merchant.domain}}</span>

2
www/views/modals/txp-details.html
View File

@ -52,7 +52,7 @@
<div class="item">
<span translate>To</span>
<span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
<i class="icon ion-social-bitcoin"></i>
<i class="icon icon-svg"><img src="img/icon-bitcoin-symbol.svg"></i>
<contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{tx.toAddress}}"></contact>
<span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
</span>

6
www/views/tab-receive.html
View File

@ -18,7 +18,7 @@
<div class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
<i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
<span class="bit-address-gen-address">...</span>
</div>
</div>
@ -39,7 +39,7 @@
<div class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
<i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
<span class="bit-address-gen-address" ng-if="!generatingAddress" translate>address not yet available</span>
</div>
</div>
@ -76,7 +76,7 @@
<div class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
<i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
<span class="bit-address-gen-address" ng-if="generatingAddress">...</span>
<span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
</div>

2
www/views/tab-send.html
View File

@ -6,7 +6,7 @@
<ion-content>
<div class="item item-heading" translate>Recipient</div>
<label class="item item-input bitcoin-address">
<i class="icon ion-social-bitcoin placeholder-icon"></i>
<i class="icon icon-svg placeholder-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
<div class="qr-scan-icon" ng-style="{'width': '100%'}">
<a ui-sref="tabs.scan" ng-style="{'top': '6px'}"><i class="icon ion-qr-scanner"></i></a>
<input type="text"